WordPress不用插件添加联系表单页面

话说前几日介绍了一款WordPress插件：intouch为你的wordpress添加联系表单，其实也有不用通过插件实现的方法。现记录如下：

第一、创建联系页面模板

首先创建一个contact.php的文件，然后将page.php文件里的代码复制到这个新建的文件里。

为了确保WordPress能够将它当作一个页面模板来看待，我们需要在contact.php文件的开头添加下面的注释：
[php]
<?php
/*
Template Name: Contact
*/
?>
[/php]

也就是说contact.php文件应该是下面这样子的：

[php]
<?php
/*
Template Name: Contact
*/
?>
<?php get_header() ?>
<div id="container">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID() ?>" class="post">
<div class="entry-content">
</div><!-- .entry-content ->
</div><!-- .post-->
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar() ?>
<?php get_footer() ?>
[/php]

第二、 创建表单

现在，我们需要创建一个简单的联系表单，只要将下面的代码粘贴到div entry-content内部即可。

[php]
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul>
<li>
<label for="contactName">Name:</label>
<input type="text" name="contactName" id="contactName" value="" />
</li>
<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
</li>
<li>
<label for="commentsText">Message:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
</li>
<li>
<button type="submit">Send email</button>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
[/php]

这个html代码相当明了，不过要注意下第19行的 input type=”hidden”，我们后面会用它来检查表单是否提交。

第三、数据的处理和错误的应对

表单看起来已经不错了，但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交，然后再验证表单的字段填写是否正确。如果填写都是正确的，就会收到博客管理员的邮件并向他们发送邮件。否则，就无法发送邮件，错误提示就会显示给用户。将下面的代码粘贴在页面模板声明和get_header()函数之间：

[php]
<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}
if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
} ?>
[/php]

这段代码确认表单是否提交，是否正确填写。如果发生错误，比如，一个字段是空的，或者邮箱地址不正确，就会返回错误提示的信息，表单就无法提交。接着就是显示错误提示的信息，例如，“请输入你的姓名”。 下面是完整的表单页面模板，如果喜欢的话你可以原封不动地使用。

[php]
<?php
/*
Template Name: Contact
*/
?>

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '') {
$emailError = 'Please enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}
$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>
<?php get_header(); ?>
<div id="container">
<div id="content">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>
<div class="thanks">
<p>Thanks, your email was sent successfully.</p>
</div>
<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">Sorry, an error occured.<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ul class="contactform">
<li>
<label for="contactName">Name:</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>

<li>
<label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>

<li><label for="commentsText">Message:</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</li>

<li>
<input type="submit">Send email</input>
</li>
</ul>
<input type="hidden" name="submitted" id="submitted" value="true" />
</form>
<?php } ?>
</div><!-- .entry-content -->
</div><!-- .post -->

<?php endwhile; endif; ?>
</div><!-- #content -->
</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

第四、添加jQuery验证

到此为止，我们的表达已经能够非常完美的运作了。不过你还可以通过添加一个客户端验证来改善它。为此，我们打算使用jQuery和validate jQuery插件，这个插件非常强大，通过它你可以正确、快速、轻松地验证表单。

首先是下载验证插件jQuery validate plugin然后将它上传到你的主题文件里，完成之后，将下面的代码粘贴到一个新的文件里：

[js]
$(document).ready(function(){
$("#contactForm").validate();
});
[/js]

将这个文件命名为verif.js并保存至你的主题文件目录里。

现在就需要将这个javascript文件链接到主题里，打开你的header.php文件，把下面的代码粘贴到head标签之间：

[php]
<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>
[/php]

大功告成！现在在后台新建一个联系页面，模版选择Contact，内容可写可不写，试试看吧！效果同样见分文网的联系页面。

原文

同样，对于懒人，可以通过下面的内容获取全部contact页面文件的链接。

点我下载