[DogFooding] WordPress AJAX Contact Form&Email Part I

[DogFooding] WordPress AJAX Contact Form&Email Part I

"Eating your own dog food"是科技公司最常见的一个态度,在WordPress开发中也应该遵循这种哲学,所谓插件一时爽,性能一团糟.个人认为插件最大的两个弊端一是添加依赖,二是降低性能.每次打开Firebug的时候,那画面简直太美不敢看.所以这次下定决心从最常见的功能Contact Form入手,彻底告别各种插件.

Contact Form的整体流程

1. HTML - Bootstrap HTML Form

2. jQuery

   1. AJAX JSON Submit

        * Single Submit

   2. jQuery Validation Plug For Form Validation

3. PHP Process

   1. PHPmailer For Email Send

   2. AJAX JSON Process

        1. PHP Direct Process
        2. wordpress admin-ajax Process
      

HTML - Bootstrap HTML Form

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <form class="form-horizontal contact-form" action="">
        <div class="form-group">
          <label class="col-md-2 control-label" for="">Email</label>
          <div class="col-md-10">
            <input id="" class="form-control" type="email" name="email" placeholder="Input Your Email">
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-2 control-label" for="">Name</label>
          <div class="col-md-10">
            <input id="" class="form-control" type="text" name="username" placeholder="Input Your Name">
          </div>
        </div>

        <div class="form-group">
          <label class="col-md-2 control-label" for="">Message</label>
          <div class="col-md-10">
          <textarea id="" name="message" cols="30" rows="10" placeholder="Input Your Message"></textarea>
          </div>
        </div>

        <div class="col-md-4 col-md-offset-4">
          <input type="submit" value="Send Message" class="btn btn-primary">
        </div>
      </form>
    </div>
  </div>
</div>

以上为Bootstrap 示例表单

jQuery

jQuery(document).ready(function($) {
  $(".contact-form").validate({
    rules: {
      email: {
        required: true,
        email: true,
      },
      username: "required",
      message: {
        required: true,
        maxlength: 800
      }
    },
    messages: {
      email: {
        required: "请输入电子邮箱",
        email: "请输入正确的电子邮箱"
      },
      username: "请输入你的用户名",
      message: {
        required: "请输入你的邮箱内容",
        maxlength: "最多800字符"
      }
    },
    submitHandler: function(form) {
      var formData = {
        email: $('#email').val(),
        username: $('#username').val(),
        message: $('#message').val(),
      };

      $.ajax({
          type: "POST",
          url: "/form.php",
          dataType: "JSON",
          data: {
            data: JSON.stringify(formData)
          },
          beforeSend: function() {
            $(".msgSubmit").text("请稍候,邮件正在发送中...");
          },
          success: function(text) {
            if (text.status == "success"){
                $(".msgSubmit").text("邮件发送成功,我们的顾问会尽快联系你");
            } else {
                $(".msgSubmit").text("邮件未发送成功,请稍候重新发送");
            }
          }
      });
    }
  });
});

通过jQuery Validation Plugin 验证后提交表单到后端PHP处理

PHP Direct Process

<?php
include "wp-includes/class-phpmailer.php";
include "wp-includes/class-smtp.php";

header("Content-Type: applicaation/json");
if (isset($_POST['data'])) {
  $request = $_POST['data'];
  $form = json_decode($request);
}

$mail = new PHPMailer();
$mail->isSMTP(); 
$mail->Host = 'smtp.gmail.com'; 
//$mail->SMTPDebug = 2;
$mail->SMTPAuth = true; 
$mail->Port = 465; 
$mail->SMTPSecure = 'ssl'; 
$mail->Username = 'example@example.com'; 
$mail->Password = 'example.com';

$mail->From = "example@example.com";
$mail->FromName = "example.com";
$mail->CharSet= "UTF-8";

$mail->addAddress("example@example.com", "example.com");
$mail->Subject = "AJAX Email Test";
$mail->Body = "Test Email In AJAX"; 
$mail->Send();
$mail->SmtpClose();


if(!$mail->send()) 
{
     $response["status"] = "error";
     echo $mail->ErrorInfo;
} 
else 
{
     $response["status"] = "success";
}

echo json_encode($response)
?>

直接通过PHP调用Wordpress内核中phpmailer处理邮件

改进方向

1. jQuery禁止用户多次提交

2. 使用WordPress的后端AJAX处理,AJAX请求.

资料引用:

1. jQuery Validation Plugin

2. Stack Over Flow