现在的位置: 首页 > Wordpress > WP技巧 > 正文
WordPress不用插件添加联系表单页面
2012年06月11日 WP技巧 ⁄ 共 6001字 评论数 15 ⁄ 被围观 15,924+

话说前几日介绍了一款WordPress插件:intouch为你的wordpress添加联系表单,其实也有不用通过插件实现的方法。现记录如下:

第一、创建联系页面模板

首先创建一个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() ?>

第二、 创建表单

现在,我们需要创建一个简单的联系表单,只要将下面的代码粘贴到div entry-content内部即可。

<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 \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "\r\n" . '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 \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插件,这个插件非常强大,通过它你可以正确、快速、轻松地验证表单。

首先是下载验证插件jQuery validate plugin然后将它上传到你的主题文件里,完成之后,将下面的代码粘贴到一个新的文件里:

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

将这个文件命名为verif.js并保存至你的主题文件目录里。

现在就需要将这个javascript文件链接到主题里,打开你的header.php文件,把下面的代码粘贴到head标签之间:

<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

大功告成!现在在后台新建一个联系页面,模版选择Contact,内容可写可不写,试试看吧!效果同样见分文网的联系页面。

原文

同样,对于懒人,可以通过下面的内容获取全部contact页面文件的链接。

点我下载



目前有 15 条留言 其中:访客:15 条, 博主:0 条

  1. 象牙塔 : 2012年06月12日09:17:15  -9楼

    我也是懒人,我直接下载了……


    • 管理员
      admin : 2012年06月12日11:47:17  地下1层

      下下更健康

  2. 茅檐小博 : 2012年06月12日10:30:44  -8楼

    wordpress不用插件可以解决的问题就尽量不要用插件。不过对于我这个门外汉来说,不用插件是不行了。
    对于联系表单的添加,我还是习惯用contact form 7插件。


    • 管理员
      admin : 2012年06月12日10:46:56  地下1层

      话说那玩意儿设置页比较复杂 用插件的话 之前的wp-intouch比较小巧好用

      • 茅檐小博 : 2012年06月12日11:28:22  地下2层

        呵呵O(∩_∩)O~习惯吧!

  3. Louis Han : 2012年06月12日13:03:54  -7楼

    效果确实很不错啊

  4. 汶海洳 : 2012年06月13日19:30:13  -6楼

    更喜欢代码。收了,折腾去。


    • 管理员
      admin : 2012年06月13日20:30:53  地下1层

      折腾无止境

  5. 混乱羽翼 : 2012年06月13日20:23:46  -5楼

    嗯,功能还不错,不过一般现在的都有评论邮件回复功能了,要找博主直接留言就能邮件收到了,哇嘎嘎


    • 管理员
      admin : 2012年06月13日20:29:55  地下1层

      也是 不过对于一个单独的联系页面 还是不错的

  6. 健康生活 : 2012年06月14日23:42:57  -4楼

    我们这个主题不是自带了吗?,对了,你说的那个双击向上滑的怎么改啊?


    • 管理员
      admin : 2012年06月15日08:04:15  地下1层

      是吗 没有看到啊 那个我也不会改。。。不知道你动了什么文件

  7. kuka : 2012年08月28日10:03:53  -3楼

    验证码是个问题


  8. 管理员
    admin : 2012年08月28日10:07:39  -2楼

    额 哪里有验证码?

  9. 眼缘购 : 2012年10月23日03:50:47  -1楼

    拜读,略表敬意,顺便请大家关注环保


如果觉得文章或者网站对您有帮助请点击 向TA付款 捐赠作者或者点击下面的分享按钮支持作者

更多

给我留言

留言无头像?

无觅相关文章插件,快速提升流量

×