为你的 WordPress 主题创建内置的联系表单

有许多WordPress插件都可以为你的博客添加一个联系表单，但是似乎并没有这个必要，因为，在今天的这个教程中，我将向大家介绍一个不用插件就能为你的WordPress主题创建一个内置式联系表单的方法，并为表单加上一个jQuery的验证功能，简单，易用，可靠。

一个内置联系表单形如下图所示，十分简单：

文章目录

创建一个页面模板

将主题中page.php 文件里的代码复制到一个新文件，并将这个新文件命名为contact.php，然后在此文件的开头加上这样的一段注释(你可以从WordPress后台新建一个叫"Contact"的页面):

<?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() ?>

创建表单

现在，我们需要建立一个简单的表单了，只需将下面的代码复制并粘贴到<div class="entry-content">……</div>这对标签之间：

倡萌注：如果你的页面结构不一样，可以找到
<?php the_content(); ?>
将下面的代码复制并粘贴到它的下面，这样就可以了。

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
    <ul>
        <li>
            <label for="contactName">姓名:</label>
            <input type="text" name="contactName" id="contactName" value="" />
        </li>
        <li>
            <label for="email">邮箱：</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="commentsText">邮件内容:</label>
            <textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
        </li>
        <li>
            <button type="submit">发送邮件</button>
        </li>
    </ul>
    <input type="hidden" name="submitted" id="submitted" value="true" />

代码看起来十分简单，也不用再作多余解释了。注意一下，上面最后一行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 \n\nEmail: $email \n\nComments: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 
        mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
 
} ?>

我们这样做的目的是为了确保表单已经提交并且填写正确，如果存在错误，如表单留空或者邮件地址不正确等，就会返回错误信息，表单提交发送失败。

现在，我们需要在相关表单区域设置显示错误信息，比如在姓名一栏的下方显示“请输入你的邮箱地址”等，以下是整个表单contact.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(); ?>

添加jQuery表单验证功能

其实我们制作的这个表单到此已经可以正常使用了，但是我们可以在验证功能上进一步加强，添加jQuery用户端验证过程，配合一个插件validate jQuery plugin，此插件很不错，对于表单验证快速准确而且简单，我们可以到这里下载jQuery validate plugin，将插件上传到我们主题的/js目录下，然后再将下面这一段代码粘贴进一个新文件中，保存文件名为 verif.js 。

$(document).ready(function(){
    $("#contactForm").validate();
});

现在，我们必须将这个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 }?>

这样做之后，保存一下文件，完工！

然后，你只需要发布一个新页面，然后选择 Contact 模板即可。

参考资料：catswhocode

中文整理自：SayBlog.Me

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

20 条回复 A文章作者 M管理员

更换删除

大颗粒番石榴 学前班lv0

15年9月13日

是不是还要求主机支持什么PHP的mail()函数才行啊，我用的一个香港主机DA面板的不行，另一个美国的主机却可以！
- 倡萌AM@大颗粒番石榴 研究生lv5
  
  15年9月13日
  
  你要发送邮件，肯定需要服务器支持，如果支持 mail()函数就好，不支持的话，就自己想办法通过 SMTP 方式发送也应该可以
行不行啊 Guest

14年8月4日

vps要怎么设置 ➡
行不行啊 Guest

14年8月4日

收不到邮件
stream Guest

14年1月12日

校长，用smtp发送邮件到邮箱，上面的代码该怎么改？
stream Guest

14年1月11日

按照校长源代码复制上去的，收不到邮件呀。问了空间商，说主机支持jmail。怎么办呀
stream Guest

14年1月9日

校长，想在前端做一个简单的调查表单，用户勾选性别男女（和校长上面的例子多了一个勾选的按钮，这个不会写代码），填写姓名联系方式以及备注，然后提交。接着就是后台怎么生成一个专门的菜单，里面有每个用户提交的表单生成的记录。这里就是直接在后台生成，不是发送到邮箱。这种表单功能用代码怎么实现呀？求教了，望校长棒棒小弟，谢过了。
游客 Guest

13年12月25日

這郵件發哪去?主機後臺嗎？
- 倡萌AM@游客 研究生lv5
  
  13年12月26日
  
  上面代码的 40 行就是设置接收到邮箱，默认为 $emailTo = get_option(‘admin_email’); 也就是管理员的邮箱，在后台 > 设置 > 常规填写的邮箱地址
猫猫 Guest

13年11月16日

老大！搞好了！但是QQ邮箱老是存在垃圾箱中，也不能添加白名单。怎么办？
猫猫 Guest

13年11月16日

老大邮箱没有接收到怎么办啊？
- 倡萌AM@猫猫 研究生lv5
  
  13年11月16日
  
  首先，请确保你的主机空间支持发送邮件，其次，检查你哪一步是不是弄错了
- 猫猫@倡萌AM Guest
  
  13年11月16日
  
  用插件是可以的啊，老大！没有添加jQuery表单验证功能啊不能用吗
- 猫猫@倡萌AM Guest
  
  13年11月16日
  
  老大！你的文章少了一个</form>标签
- 倡萌AM@猫猫 研究生lv5
  
  13年11月16日
  
  没少啊，99行不是有吗
IN杨凌 Guest

13年7月20日

这个你试验没？？我没找到validate jQuery plugin插件
- 倡萌AM@IN杨凌 研究生lv5
  
  13年7月20日
  
  validate jQuery plugin 不是WordPress插件，是jQuery插件，文章已经有下载地址了，仔细看看
- IN杨凌@倡萌AM Guest
  
  13年7月21日
  
  找不到啊，你说的那个下载地址是英语的我也进去看了，还是没找到，方便把 jQuery validate plugin 发到我邮箱吗？522653439@qq.com
- 倡萌AM@IN杨凌 研究生lv5
  
  13年7月21日
  
  无语了，人家那个网站的首页不是有下载吗http://jqueryvalidation.org/
- IN杨凌@倡萌AM Guest
  
  13年7月21日
  
  非常抱歉，我是点击你网页的链接进去的然后就在那个日志下面找一直没找到，不好意思浪费你时间了

{{userData.name}}已认证

为你的 WordPress 主题创建内置的联系表单

创建一个页面模板

创建表单

表单数据验证和错误处理

添加jQuery表单验证功能

WordPress 评论过滤插件：wp-itluren-comment-filter

WordPress联系表单插件：Magic Contact（侧边悬浮收缩展开）

WordPress 发现 XSS 漏洞 – 建议更新至 6.5.2

WordPress 6.6 将取消对 PHP 7.0 和 7.1 的支持

WordPress 6.5 “Regina” 正式版发布了

WordPress 6.5 正式版延迟至2024 年 4 月 2 日发布

WordPress 允许上传的文件类型以及如何新增新的文件类型支持

WordPress手机网站主题：M-site

WordPress图片主题：图片一号

户外运动服装商城模板 MB0025

WordPress杂志主题：杂志一号

WordPress简约高端网址导航类主题 Slhao

WordPress传统行业企业主题 Third

{{userData.name}}已认证

创建一个页面模板

创建表单

表单数据验证和错误处理

添加jQuery表单验证功能

WordPress 评论过滤插件：wp-itluren-comment-filter

WordPress联系表单插件：Magic Contact（侧边悬浮收缩展开）

WordPress联系表单插件：Magic Contact（侧边悬浮收缩展开）

WordPress 联系表单插件 First Contact Form

非常好用的 WordPress 联系表单生成器插件 WPForms

WordPress 彻底禁用评论功能 Disable Comments

WordPress手机网站主题：M-site

WordPress图片主题：图片一号

户外运动服装商城模板 MB0025

WordPress杂志主题：杂志一号

WordPress简约高端网址导航类主题 Slhao

WordPress传统行业企业主题 Third