首页    >    新闻资讯    >   教你如何给WordPress主题创建内置联系表单

教你如何给WordPress主题创建内置联系表单

ven 星期二,2010/06/29 02:24

网上有很多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 

Email: $email 

Comments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "
" . '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 

Email: $email 

Comments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "
" . '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 }?>

大功告成！
原文

分类：新闻资讯

标签：, ,

* 版权声明：作者WordPress啦！ 转载请注明出处。

相关文章