创建WordPress联系表单

 
  • Chonghua
  • 2013年3月19日

很多博客都建立了一个联系页面，在这个页面上放置一个联系表单，是一个非常好的选择，实现的方法也是多种多样，你可以嵌入一个第三方的联系表单，也可以使用WordPress内置的评论功能达到同样的效果，不过更多的人士选择了使用诸如Contact Form 7之类的插件，不过，加入仅仅是为了添加一个简单的联系表单，我们大可不必这么大费周章，几段代码就可以解决问题。

为什么不建议使用上述的几种方法呢，第三方服务不可控因素太多，且需要调用第三方服务器的脚本，而通过评论方法，显得不太专业，还需要通过评论发送邮件。

下面就是通过建立页面模板的方式创建一个表单页面，直接发送到管理员邮箱。

首先，创建一个页面模板，最好的办法就是复制你的主题的默认的页面模板，一般是名称为page.php的文件。以默认主题Twenty_Twelve 为例

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">                           表单代码位置

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

</p>

将头部修改成下面的样子：

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

<?php get_header() ?>

将文件另存为Contact.php。

然后，我们开始创建一个表单，并且加入错误和成功的提示

<?php if(isset($emailSent) && $emailSent == true) { ?>
                            <div class="alert alert-success">
                                <p>感谢您的联系，您的邮件已经成功发送.</p>
                            </div>
                        <?php } else { ?>

                            <?php if(isset($hasError) || isset($captchaError)) { ?>
                                <div class="alert alert-error">
                                    <a class="close" data-dismiss="alert">×</a>
                                    <h4 class="alert-heading">对不起，发生了错误.</h4>
                                <p class="error">请检查输入框下面的错误提示并重试!<p>
                                </div>
                            <?php } ?>

                    <form action="<?php the_permalink(); ?>" id="contactForm" method="post" class="form-horizontal">
                        <fieldset>
                        <div class="control-group ">
                                <label class="control-label" for="contactName">名称:</label>
                            <div class="controls">
                                <input class="input-xlarge" type="text" name="contactName" id="contactName" value="" />
                                <?php if($nameError != '') { ?>
                                    <p><span class="label label-warning"><?=$nameError;?></span></p>
                                <?php } ?>
                            </div>
                           </div>
                           <div class="control-group">
                                <label class="control-label" for="email">邮箱:</label>
                            <div class="controls">
                                <input class="input-xlarge" type="text" name="email" id="email" value="" />
                                <?php if($emailError != '') { ?>
                                    <p><span class="label label-warning"><?=$emailError;?></span></p>
                                <?php } ?>
                             </div>
                           </div>
                            <div class="control-group">
                                <label class="control-label" for="commentsText">内容:</label>
                            <div class="controls">
                                <textarea class="span7" name="comments" id="commentsText" rows="20" cols="30"></textarea>
                                 <?php if($commentError != '') { ?>
                                    <p><span class="label label-warning"><?=$commentError;?></span></p>
                                <?php } ?>
                             </div>
                           </div>
                           <div class="form">
                                <button type="submit" class="btn btn-primary">发送</button>
                           </div>
                        <input type="hidden" name="submitted" id="submitted" value="true" />
                    </fieldset>
                    </form>
                    <?php } ?>

<input type="hidden" name="submitted" id="submitted" value="true" />
</form>

</p>

加入到上面的提示的位置之中。

接下来，我们需要加入校验有效性或者未填写项目的检测功能，在

<?php get_header() ?>

上面插入

<?php
if(isset($_POST['submitted'])) {
    if(trim($_POST['contactName']) === '') {
        $nameError = '请输入您的名称.';
        $hasError = true;
    } else {
        $name = trim($_POST['contactName']);
    }

    if(trim($_POST['email']) === '')  {
        $emailError = '请输入您的邮箱，以方便回复.';
        $hasError = true;
    } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
        $emailError = '邮箱的格式有错误哦.';
        $hasError = true;
    } else {
        $email = trim($_POST['email']);
    }

    if(trim($_POST['comments']) === '') {
        $commentError = '请输入一些内容.';
        $hasError = true;
    } else {
        if(function_exists('stripslashes')) {
            $comments = stripslashes(trim($_POST['comments']));
        } else {
            $comments = trim($_POST['comments']);
        }
    }

    if(!isset($hasError)) {
        if (!isset($emailTo) || ($emailTo == '') ){
            $emailTo = get_option('admin_email');
        }
        $subject = '[StrapPress] From '.$name;
        $body = "Name: $name nnEmail: $email nnComments: $comments";
        $headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;

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

} ?>

至此，一个联系表单的页面模板就算做好了，只要在WordPress中使用此模板新建一个页面就可以看到效果。

搜索