WordPress 创建AJAX免刷新联系表单

<form id="ajax-contact" method="post" action="mailer.php">
    <div class="field">
        <label for="name">名字:</label>
        <input type="text" id="name" name="name" required>
    </div>
 
    <div class="field">
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
    </div>
 
    <div class="field">
        <label for="message">信息:</label>
        <textarea id="message" name="message" required></textarea>
    </div>
 
    <div class="field">
        <button type="submit">发送</button>
    </div>
</form>

<div id="form-messages"></div>

<link rel="stylesheet" href="/contact/style.css">
<script src="/contact/jquery-2.1.0.min.js"></script>
<script src="/contact/app.js"></script>

$(function() {
 
	// 获取表单
	var form = $('#ajax-contact');
 
	// 获取显示消息的div
	var formMessages = $('#form-messages');
 
	// 为联系表单创建事件监听
	$(form).submit(function(e) {
		// 阻止浏览器直接提交表单
		e.preventDefault();
 
		// 序列化表单数据
		var formData = $(form).serialize();
 
		// 使用AJAX提交表单
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
		})
		.done(function(response) {
			// 确保formMessages的div有“success”这个类
			$(formMessages).removeClass('error');
			$(formMessages).addClass('success');
 
			// 设置消息文本
			$(formMessages).text(response);
 
			// 清除表单
			$('#name').val('');
			$('#email').val('');
			$('#message').val('');
		})
		.fail(function(data) {
			// 确保formMessages的div有“error”这个类
			$(formMessages).removeClass('success');
			$(formMessages).addClass('error');
 
			// 设置消息文本
			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('糟糕！发生错误，无法发送邮件。');
			}
		});
 
	});
 
});

<?php
 
	// 只处理 POST 请求
	if ($_SERVER["REQUEST_METHOD"] == "POST") {
		// 获取表单字段并删除空白
		$name = trim($_POST["name"]);
		$email = trim($_POST["email"]);
		$message = trim($_POST["message"]);
 
		// 检查要发送邮件的数据
		if ($name == "" OR $email == "" OR $message == "") {
			// 设置一个400（错误请求）响应代码并退出
			http_response_code(400);
			echo "糟糕！您提交数据时出现了一个问题。请填完表格，然后再试一次。";
			exit;
		}
 
		// 设置收件人的电子邮件地址
		// 请修改为你自己的接受邮件地址
		$recipient = "text@example.com";
 
		// 设置电子邮件的主题
		$subject = "来自 $name 的新信息";
 
		// 建立电子邮件内容
		$email_content = "名字: $name\n";
		$email_content .= "邮箱: $email\n\n";
		$email_content .= "信息:\n$message\n";
 
		// 建立电子邮件标头
		$email_headers = "来自: $name <$email>";
 
		// 发送邮件
		if (mail($recipient, $subject, $email_content, $email_headers)) {
			// 设置200（成功）响应代码
			http_response_code(200);
			echo "谢谢您！您的消息已发送。";
		} else {
			// 设置500（内部服务器错误）响应代码
			http_response_code(500);
			echo "糟糕！出事了，我们无法发送邮件。";
		}
 
	} else {
		// 不是一个POST请求，设置一个403（禁止）响应代码
		http_response_code(403);
		echo "您提交的过程出现了一个错误，请重试。";
	}
 
?>