教你如何给WordPress主题创建内置联系表单
in IT互联网 | 评论关闭网上有很多WordPress插件可以给你的博客添加联系表单,但其实并不一定要插件才能实现,这篇教程就将向大家显示如何给WordPress主题创建一个内置的联系表单。
步骤一: 创建页面模板
当然第一步是要创建一个页面模板。先创建一个 page-contact.php的文件,然后将page.php文件里的代码复制到这个新建的文件里。
为了确保WordPress能够将它当作一个页面模板来看待,我们需要在 contact.php文件的开头添加下面的注释
<?php /* Template Name: Contact */ ?> 也就是说contact.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() ?>
步骤二: 创建表单
现在,我们需要创建一个简单的联系表单,只要将下面的代码粘贴到 entry-content div内部即可。
<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>
这个html代码相当明了,不过要注意下第19行的 input type=”hidden”,我们后面会用它来检查表单是否提交。
步骤三: 数据的处理和错误的应对
表单看起来已经不错了,但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交,然后再验证表单的字段填写是否正确。
如果填写都是正确的,就会收到博客管理员的邮件并向他们发送邮件。否则,就无法发送邮件,错误提示就会显示给用户。
将下面的代码粘贴在页面模板声明和get_header()函数之间:
<?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 nnEmail: $email nnComments: $comments"; $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>
这段代码确认表单是否提交,是否正确填写。如果发生错误,比如,一个字段是空的,或者邮箱地址不正确,就会返回错误提示的信息,表单就无法提交。
接着就是显示错误提示的信息,例如,“请输入你的姓名”。 下面是完整的表单页面模板,如果喜欢的话你可以原封不动地使用。
<?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 nnEmail: $email nnComments: $comments"; $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . '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(); ?>
第四步骤: 添加jQuery验证
到此为止,我们的表达已经能够非常完美的运作了。不过你还可以通过添加一个客户端验证来改善它。为此,我打算使用jQuery和 validate jQuery 插件,这个插件非常强大,通过它你可以正确、快速、轻松地验证表单。
首先是下载验证插件 然后将它上传到你的主题文件里,完成之后,将下面的代码粘贴到一个新的文件里:
$(document).ready(function(){ $("#contactForm").validate(); });
将这个文件命名为verif.js并保存至你的主题文件目录里。
现在就需要将这个javascript文件链接到主题里,打开你的header.php文件,把下面的代码粘贴到<head>和</head>这两个标签之间:
<?php if( is_page('contact') ){ ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script> <?php }?>
大功告成!