The7建站系列（4）Contact Form 7如何自定义并实现跳转到Thank you？

注：这篇总结有部分直接采用其他人的总结，一并感谢！

Contact Form 7自定义要达到的效果（从我自身出发）

• 可以查看IP或更多的内容

• 提交以后要能跳转到thank you页面（为了GA统计转化率）

帮助文档

http://contactform7.com/special-mail-tags/http://www.wpyou.com/contact-form-7-advanced-applications.html

contact form 7 默认为我们添加了一个表单。但是默认表单可能并不能满足你的需求，比如没有显示IP功能。那么如何添加一个自定义表单呢？

1）首先安装contact form 7 插件并激活。2）点击add new。并选择一种语言，默认为英语。根据你的需要给表单添加相应的名字。3）contact form7 提供了很多的shortcode. 通过常用的几个就可以做出自己想要的联系表单，比如text, mail, tel , text area submit 等。

4） 那现在就给大家演示怎么做一个下图这样的表单。

4-1) 首先添加"My name is:" ,一般的标题是在框框的上面，这个标题是在框框的里面。那他的实现方式是这样的：点击text这个shortcode. 按照图示填写内容：

注意： field type : 选为 ”required field" , 则此项为“必填项”Name : 这一项为默认，不需要改。每一个name的值都会不一样。Default Value: 这个里面的的文字就是框框里面会出现的文字。大家可以按照自己的需要写出更多的话语。然后把下面这个“ use this text as the placeholder of the field” 勾上，这个文字就会出现在框框里面了。最后点击“ Insert Tag" 就添加完成这一项了。

4-2) 根据相同的方法，就可以添加出来email 和 text area 这两个项了。4-3) 最后是添加” submit".4-4） 此时可通过保存这个表单，把这个的shortcode直接插入到page， post， portfolio当中查看效果。如图：

很明显， 这个table没有分行，所有的框框都挤到一起了。可以用</p></br>等来为每个框框分行。添加如下：这里/p /br分行的效果都是一样，完整的是<p>.....</p> ; <br> ......</br> 但在这里也可以只添加后面的</p></br>就可以了。

5） 关于第二项" mail" 的设置。需要注意的地方。这个地方， 我们需要注意[...] 里面的内容设置。需要和前面表单的内容一致。

TO: 这个是你接收邮件的邮箱（最好gmail）。From: [ your-name] 应该= [text-967]Subject: [ your-subject] 前面没有关于主题的定义，这里可以自己写。如“inquiry from about us page"Additional headers: reply to ;[ your-email] = [email-934];Message body: 这是邮件的正文，内容根据你的需要来写。但最好把前面表单里面做的那几项都包含进来。具体设置如下图：

注意红色的部分，可以实现查看用户IP，发送时间等的目的。那么这些tags怎么来的呢？查看：http://contactform7.com/special-mail-tags/

很简单！在后台新建或者设置contact form 7的时候，菜单栏有个Additional Settings这个输入框，插入一下代码就可以实现提交后跳转（把url改掉）。on_sent_ok: "location = 'http://example.com/';"（注：the7的thank you页面制作可以用Page并最好选择micropage模板，或者用txt制作好直接FTP上传到根目录）

点击查看The7系列文章《The7建站系列（1）建站流程》