在wp后台安装contact form7插件
创新互联建站专注于企业全网营销推广、网站重做改版、望都网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为望都等各大城市提供网站开发制作服务。
启用contact form 7，得到一个短代码类似这种形式的：[contact-form id=x]
拷贝短代码，然后在侧边栏添加一个text文字小工具，把短代码粘贴到小工具里，保存
刷新首页，看看是不是有了联系框
1、 在comments.php评论表单中添加自己想要的字段，如：
p
input type="text" name="tel" id="tel" size="22" tabindex="4" /
label for="tel"电话/label
/p
tabindex 这个属性按照从小到大排，为什么要这样？你可以自己试试….
2、如果评论表单是使用系统自带的，那么请用以下方法添加表单字段，如果不是，请略过
add_filter('comment_form_default_fields','comment_form_add_ewai');
function comment_form_add_ewai($fields) {
$label1 = __( '国家/地区' );
$label2 = __( 'Skype账号' );
$label3 = __( '电话' );
$label4 = __( '传真' );
$label5 = __( '地址' );
$value1 = isset($_POST['guojia']) ? $_POST['guojia'] : false;
$value2 = isset($_POST['skype']) ? $_POST['skype'] : false;
$value3 = isset($_POST['tel']) ? $_POST['tel'] : false;
$value4 = isset($_POST['fax']) ? $_POST['fax'] : false;
$value5 = isset($_POST['address']) ? $_POST['address'] : false;
$fields['guojia'] =HTML
p
label for="guojia"{$label1}/label
input id="guojia" name="guojia" type="text" value="{$value1}" size="30" /
/p
HTML;
return $fields;
}
3、 接收表单字段并写入数据库
在主题目录的 functions.php添加以下代码
add_action('wp_insert_comment','wp_insert_tel',10,2);
function wp_insert_tel($comment_ID,$commmentdata) {
$tel = isset($_POST['tel']) ? $_POST['tel'] : false;
//_tel 是存储在数据库里的字段名字，取出数据的就会用到
update_comment_meta($comment_ID,'_tel',$tel);
}
这两步就可以将数据写入数据库了，不信你试试看
add_action()参数中的10和2分别表示该函数执行的优先级是10（默认值，值越小优先级越高），该函数接受2个参数。
4、在后台显示额外字段
前面两步只是接收和写入到数据库，那么要怎么在后台评论列表中显示呢？将以下代码复制到主题目录的functions.php 中：
add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
function my_comments_columns( $columns ){
$columns[ '_tel' ] = __( '电话' ); //电话是代表列的名字
return $columns;
}
function output_my_comments_columns( $column_name, $comment_id ){
switch( $column_name ) {
case "_tel" :
echo get_comment_meta( $comment_id, '_tel', true );
break;
}
如果要在前台的留言列表中调用，就用以下代码，_tel就是你在数据库中存储的字段名字
?php
$tel = get_comment_meta($comment-comment_ID,'_tel',true);
if( !empty($tel)){
echo "电话".$tel;
}
?
5、 大功告成，看看后台的评论列表，是不是多了一列电话，那样的话就没错了。
6、如果要移除某一个自带的表单字段，可以使用以下代码
function tel_filtered($fields){
if(isset($fields['tel']))
unset($fields['tel']);
return $fields;
}
add_filter('comment_form_default_fields', 'tel')
当然第一步是要创建一个页面模板。先创建一个 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"ullilabel for="contactName"Name:/labelinput type="text" name="contactName" id="contactName" value="" //lililabel for="email"Email/labelinput type="text" name="email" id="email" value="" //lililabel for="commentsText"Message:/labeltextarea name="comments" id="commentsText" rows="20" cols="30"/textarea/lilibutton type="submit"Send email/button/li/ulinput type="hidden" name="submitted" id="submitted" value="true" //form 这个html代码相当明了，不过要注意下第19行的 input type=”hidden”，我们后面会用它来检查表单是否提交。步骤三: 数据的处理和错误的应对 表单看起来已经不错了，但是此刻它仍然是无效的因为它没有发送任何邮件。我们需要做的是验证表单是否提交，然后再验证表单的字段填写是否正确。如果填写都是正确的，就会收到博客管理员的邮件并向他们发送邮件。否则，就无法发送邮件，错误提示就会显示给用户。将下面的代码粘贴在页面模板声明和get_header()函数之间：?phpif(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*/??phpif(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(); ?/h1div class="entry-content"?php if(isset($emailSent) $emailSent == true) { ?div class="thanks"pThanks, 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"lilabel for="contactName"Name:/labelinput 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 } ?/lililabel for="email"Email/labelinput 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 } ?/lililabel for="commentsText"Message:/labeltextarea 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 } ?/liliinput type="submit"Send email/input/li/ulinput 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') ){ ?
如果要在文章内加入表单，切换编辑模式为 html 直接添加表单代码。 如果是在页面内添加，可以建立页面模板，直接在模板内添加表单。
