為你的 WordPress 主題創(chuàng)建內(nèi)置的聯(lián)系表單

有許多WordPress插件都可以為你的博客添加一個(gè)聯(lián)系表單，但是似乎并沒有這個(gè)必要，因?yàn)椋诮裉斓倪@個(gè)教程中，我將向大家介紹一個(gè)不用插件就能為你的WordPress主題創(chuàng)建一個(gè)內(nèi)置式聯(lián)系表單的方法，并為表單加上一個(gè)jQuery的驗(yàn)證功能，簡單，易用，可靠。

一個(gè)內(nèi)置聯(lián)系表單形如下圖所示，十分簡單：

創(chuàng)建一個(gè)頁面模板

將主題中page.php 文件里的代碼復(fù)制到一個(gè)新文件，并將這個(gè)新文件命名為contact.php，然后在此文件的開頭加上這樣的一段注釋(你可以從WordPress后臺新建一個(gè)叫"Contact"的頁面):

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

之后這個(gè)contact.php文件看起來應(yīng)該象這樣：

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

創(chuàng)建表單

現(xiàn)在，我們需要建立一個(gè)簡單的表單了，只需將下面的代碼復(fù)制并粘貼到<div class="entry-content">……</div>這對標(biāo)簽之間：

倡萌注：如果你的頁面結(jié)構(gòu)不一樣，可以找到

<?php the_content(); ?>

將下面的代碼復(fù)制并粘貼到它的下面，這樣就可以了。

<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">郵件內(nèi)容:</label>
            <textarea name="comments" id="commentsText" rows="20" cols="30"></textarea>
        </li>
        <li>
            <button type="submit">發(fā)送郵件</button>
        </li>
    </ul>
    <input type="hidden" name="submitted" id="submitted" value="true" />

代碼看起來十分簡單，也不用再作多余解釋了。注意一下，上面最后一行input的type值是”hidden” ，稍后用于檢驗(yàn)表單是否已經(jīng)提交。

表單數(shù)據(jù)驗(yàn)證和錯(cuò)誤處理

到此，這個(gè)表單看起來已經(jīng)很帥了，但還不能使用，因?yàn)檫€沒有發(fā)送任何郵件，所以我們需要做的就是要驗(yàn)證一下表單提交及其所填內(nèi)容是否正確。

我們需要作如下判斷：如果表單填寫正確，則獲取管理員郵箱地址并發(fā)送內(nèi)容；如果表單填寫有誤，則提示錯(cuò)誤。將下面的代碼粘貼到模板聲明和get_header()函數(shù)的中間:

<?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;
    }
 
} ?>

我們這樣做的目的是為了確保表單已經(jīng)提交并且填寫正確，如果存在錯(cuò)誤，如表單留空或者郵件地址不正確等，就會(huì)返回錯(cuò)誤信息，表單提交發(fā)送失敗。

現(xiàn)在，我們需要在相關(guān)表單區(qū)域設(shè)置顯示錯(cuò)誤信息，比如在姓名一欄的下方顯示“請輸入你的郵箱地址”等，以下是整個(gè)表單contact.php模板的代碼結(jié)構(gòu)：

<?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表單驗(yàn)證功能

其實(shí)我們制作的這個(gè)表單到此已經(jīng)可以正常使用了，但是我們可以在驗(yàn)證功能上進(jìn)一步加強(qiáng)，添加jQuery用戶端驗(yàn)證過程，配合一個(gè)插件validate jQuery plugin，此插件很不錯(cuò)，對于表單驗(yàn)證快速準(zhǔn)確而且簡單，我們可以到這里下載jQuery validate plugin，將插件上傳到我們主題的/js目錄下，然后再將下面這一段代碼粘貼進(jìn)一個(gè)新文件中，保存文件名為 verif.js 。

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

現(xiàn)在，我們必須將這個(gè)javascript文件跟我們的主題連接起來，打開 header.php文件，將下面的代碼粘貼在<head> 和 </head> 這對標(biāo)簽的中間:

<?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 }?>

這樣做之后，保存一下文件，完工！

然后，你只需要發(fā)布一個(gè)新頁面，然后選擇 Contact  模板即可。

參考資料：catswhocode

中文整理自：SayBlog.Me