簡體   English   中英

如何使AJAX聯系人表格實際發送郵件?

[英]How to make the AJAX contact form actually send mail?

我有一個聯系表,其中包含所有需要的基本功能。 我排除了action=""因為使用AJAX時不需要它。 當我在聯系表單中輸入所有必填字段時,它只是說消息已發送,但實際上什么也沒收到。 我檢查了瀏覽器的調試器,它完美地接收了輸入字段的信息,但是它只會success: function(msg) {在退出ajax函數並返回false之前。 其他時候,它會說您的消息已成功發送,但實際上並未發送電子郵件。 我做錯了什么或想念什么?

我的網站在這里供參考: http : //www.jaimepenzellna.com

index.html :(聯系表格)

<form method="post" id="contactForm" role="form">
        <div class="col-sm-8 col-md-8">
          <div class="form-group wow bounceInUp">
            <label for="contactName">Name <span class="required">*</span></label>
            <input type="text" size="35" class="form-control" name="contactName" id="contactName" title="Please enter your name (at least 2 characters)">
          </div>
          <div class="form-group wow bounceInUp">
            <label for="contactEmail">Email <span class="required">*</span></label>
            <input type="email" size="35" class="form-control" name="contactEmail" id="contactEmail" title="Please enter a valid email address">
          </div>
          <div class="form-group wow bounceInUp">
            <label for="contactSubject">Subject</label>
            <input type="text" size="35" class="form-control" name="contactSubject" id="contactSubject">
          </div>
           <div class="form-group wow bounceInUp">
            <label for="contactMessage">Message <span class="required">*</span></label>
            <textarea name="contactMessage" class="form-control" id="contactMessage" cols="50" rows="15" title="Please enter your message (at least 10 characters)"></textarea>
           </div>
           <div class="form-group wow bounceInUp">
               <button name="submit" type="submit" class="btn btn-lg btn-primary" id="submit">Submit</button>
               <span id="image-loader">
                <img alt="" src="images/loader.gif">
               </span>
               <!-- contact-warning -->
               <div id="message-warning">Error!</div>
               <!-- contact-success -->
               <div id="message-success">
                <i class="fa fa-check"></i>Your message was sent, thank you!<br/>
               </div>
           </div>
        </div>
      </form>

(Body標簽底部的腳本)

jQuery(document).ready(function($){
   $('form#contactForm button#submit').click(function() {

      $('#image-loader').fadeIn();

      var contactName = $('#contactForm #contactName').val();
      var contactEmail = $('#contactForm #contactEmail').val();
      var contactSubject = $('#contactForm #contactSubject').val();
      var contactMessage = $('#contactForm #contactMessage').val();

      var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
               '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;

      $.ajax({

          type: "POST",
          url: "inc/sendEmail.php",
          data: data,
          success: function(msg) {

            // Message was sent
            if (msg == 'OK') {
               $('#image-loader').fadeOut();
               $('#message-warning').hide();
               $('#contactForm').fadeOut();
               $('#message-success').fadeIn();
            }
            // There was an error
            else {
               $('#image-loader').fadeOut();
               $('#message-warning').html(msg);
               $('#message-warning').fadeIn();
            }

          }

      });
      return false;
   });


});

sendMail.php:

<?php

// Replace this with your own email address
$siteOwnersEmail = 'jnp5028@rit.edu';


if($_POST) {

   $name = trim(stripslashes($_POST['contactName']));
   $email = trim(stripslashes($_POST['contactEmail']));
   $subject = trim(stripslashes($_POST['contactSubject']));
   $contact_message = trim(stripslashes($_POST['contactMessage']));

   // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
   // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }


   // Set Message
   $message .= "Email from: " . $name . "<br />";
   $message .= "Email address: " . $email . "<br />";
   $message .= "Message: <br />";
   $message .= $contact_message;
   $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

   // Set From: header
   $from =  $name . " <" . $email . ">";

   // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


   if (!$error) {

      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }

    } # end if - no validation error

    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;

        echo $response;

    } # end if - there was a validation error

}

?>

我知道調試聯系表單的最佳方法如下:

將以下內容添加到php文件的頂部:

error_reporting(-1);` 
ini_set('display_errors', 'On');

然后創建一個HTML頁面,其中僅包含您的聯系表單的基本內容,如下所示。 注意在表單上添加了action="sendEmail.php"並設置了相應的路徑:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<form method="post" id="contactForm" role="form" action="sendEmail.php">
 Name: <input type="text" size="35" class="form-control" name="contactName" id="contactName" title="Please enter your name (at least 2 characters)"><br>
 Email: <input type="email" size="35" class="form-control" name="contactEmail" id="contactEmail" title="Please enter a valid email address"><br>
 Subject: <input type="text" size="35" class="form-control" name="contactSubject" id="contactSubject"><br>
 Body: <textarea name="contactMessage" class="form-control" id="contactMessage" cols="50" rows="15" title="Please enter your message (at least 10 characters)"></textarea><br>
  <button name="submit" type="submit" class="btn btn-lg btn-primary" id="submit">Submit</button>
</form>
</body>
</html>

將文件上傳到服務器,然后使用表格直接發布到php頁面。 這將在屏幕上向您顯示php文件中正在生成的任何錯誤。

這樣做,我們看到了錯誤:

Notice: Undefined variable: message in /home/content/08/10125908/html/sendEmail.php on line 39

這告訴我們,在第39行上,我們嘗試使用一個名為“ message”的變量,但沒有此類變量可用。

這是因為此行$message .= "Email from: " . $name . "<br />"; $message .= "Email from: " . $name . "<br />"; ,特別是這部分$message .= ,其意思是“采用字符串變量$message並在其后附加以下內容”,但未定義$message ,因此出錯。

我們可以通過在使用$message ='';之前將$message聲明為空字符串來解決此問題$message ='';

解決此問題並再次嘗試,我們將收到一個新錯誤:

Notice: Undefined variable: error in /home/content/08/10125908/html/sendEmail.php on line 56

這告訴我們,在第56行,我們嘗試使用一個稱為“錯誤”的變量,但是沒有可用的此類變量。

這是因為我們僅在有$error在if語句中聲明$error ,如果沒有錯誤,則它永遠不會被設置,因此在我們嘗試使用它時是未定義的。

我們可以通過使用$error = array()類的名稱和主題聲明error或通過使用if (isset($error))來檢查變量是否已聲明(我更喜歡后者,但請注意,這會反轉if子句,並且失敗代碼必須首先是成功代碼,然后if (!isset($error))成功代碼,您可以執行if (!isset($error))但隨后的邏輯將很難遵循)

修正這兩個錯誤,一切就緒! 工作實例

因此,固定的php文件如下所示:

    <?php

// the next two lines will turn on error reporting for the page
// uncomment them to see warnings
// error_reporting(-1); 
// ini_set('display_errors', 'On'); 
// these are really only useful if you actually go to the page 
// you wont see the warnings if you call the page with ajax


// Replace this with your own email address
$siteOwnersEmail = 'jnp5028@rit.edu';


if($_POST) {

   $name = trim(stripslashes($_POST['contactName']));
   $email = trim(stripslashes($_POST['contactEmail']));
   $subject = trim(stripslashes($_POST['contactSubject']));
   $contact_message = trim(stripslashes($_POST['contactMessage']));
   // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
   // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }


   // Set Message
   $message =''; // you need to define  `$message` as an empty string, otherwise when the `$message .=` on the next line tries to use it, it is undefined
   $message .= "Email from: " . $name . "<br />";
   $message .= "Email address: " . $email . "<br />";
   $message .= "Message: <br />";
   $message .= $contact_message;
   $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

   // Set From: header
   $from =  $name . " <" . $email . ">";

   // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


   if (isset($error)) {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;

        echo $response;


    } # end if - there was a validation error
    else {


      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }

    } # end if - no validation error

}

?>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM