DIY WordPress contact form with JQuery (2)

接着上一篇，本篇我们继续完成这个简单的contact form的PHP部分。上篇我们已经完成了联系表单的基本信息录入，现在需要的是增加对表单填写内容的检测，比如对于姓名，邮件和联系内容的非空检测，还有对邮址的合法检测。

调用的PHP代码也是基本通用，如下：

<?php
//当表单提交时检测
if(isset($_POST['submitted'])) {

//检测是否人类填写的表单，防垃圾，具体介绍请看（1）篇
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {

//检测姓名处是否留空
if(trim($_POST['contactName']) === '') {
$nameError = 'You forgot to enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

//检测邮件地址正确与否
if(trim($_POST['email']) === '') {
$emailError = 'You forgot to enter your E-mail.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
}
}
});
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
$(this).parent().append('<img src="/wp-content/themes/js-o3-16/imgs/ajax-loader.gif" alt="Loading&hellip;" height="32" width="32" />');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('#wrapper').ScrollTo(1000);
$('form#contactForm').slideUp("normal", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong><br/>你的邮件已成功发送！我经常会看邮件的，所以我应该很快就收到你的留言。Have a nice day ^_^ </p>');
});
});
}
return false;
});quot;, trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

//检测留言部分是否为空
if(trim($_POST['comments']) === '') {
$commentError = 'You forgot to enter your comments.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

//如果上述检测无误，则发送邮件，其中$emailTo为你的邮件地址，必需修改为你自己的。
if(!isset($hasError)) {
$emailTo = 'yourname@domain.com';
$siteurl = trim($_POST['siteurl']);

//下面的subject值为发送邮件的标题部分
$subject = "Contact Form from $name";
$sendCopy = trim($_POST['sendCopy']);

//下面的body值为发送邮件的正文样式
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: [Jinwen Say] <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);

//下面的设置为选择发送副本时候的邮件标题和内容
if($sendCopy == true) {
$subject = 'Copy of the mail you send at Jinwen Say.';
$headers = 'From: Jinwen Say <noreply@somedomain.com>';
mail($email, $subject, $body, $headers);
}
$emailSent = true;
}
}
} ?>

按上述的检测设置，还有对发送邮件的样式设定，我们将收到类似下图的邮件样式：

上图中标记的部分分别都为本篇代码中的设置部分，大家可以通过对照一下内容和上述代码中的简单说明，创建一个适合自己的个性表单。

总结前两篇的代码，我把它整合一起，由于较长，所以不想复制粘贴的同学就下载下面的php代码部分好了：

wordpress-ajax-contact-form-php-code

有了上述的代码后，表单还不能正常工作，因为需要利用到JQuery，所以我们还需要调用如下的js代码。在确认你的网站已经调用了JQery库代码后，请在你的站内js文件中加入如下代码：

$(document).ready(function() {
$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
}
}
});
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
//下面路径是当表单提交时候loding图标的位置，请根据自己的主题图片位置修改
$(this).parent().append('<img src="/wp-content/themes/js-o3-16/imgs/ajax-loader.gif" alt="Loading&hellip;" height="32" width="32" />');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('#wrapper').ScrollTo(1000);
$('form#contactForm').slideUp("normal", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong><br/>你的邮件已成功发送！我经常会看邮件的，所以我应该很快就收到你的留言。Have a nice day ^_^ </p>');
});
});
}
return false;
});
});

最后，当综合本篇和上篇的代码后，你的contact form是应该能工作的了，当出现错误信息时候，会出现如下图的提示信息：

其中红字部分就是提示错误信息，不过本篇写得有点长了。我把样式部分的设计和一些补充放到下一篇继续说，希望能继续关注啦。