强大的WordPress 表单插件Contact form 7 设置教程

我们用wordpress建站一定会用到这款强大的wordpress表单插件,contact form 7。这款插件是一款免费的制作网站表单的工具,我们在后台制作好表单之后,把代码复制到指定的位置,就可以实现表单功能了。

说到表单工具,很多人会想到很多专业的表单服务商,例如woofu,hubspot,这类表单工具虽然功能强大,但是好用的功能都需要付费,其次就是外嵌的JS,会直接影响网站速度。有一个客户Z就特别喜欢Hubspot这类自动化营销的表单工具,结果费了好一番功夫装好之后,发现网站直接慢了2s多,打开网站要费大半天时间,后面他又很郁闷的换成contact form 7了。

利用contact form 7这款表单工具,我们可以很轻松的实现各种强大的表单效果,并且他丝毫不影响网站速度。配合好对应的插件,你还可以清楚的看到了客户发询盘的IP,浏览器,发询盘的页面等功能。如果你想要做谷歌PPC的话,还可以利用redirect跳转功能,让你可以很好的锁定转化的客户。此外,他还兼容谷歌的仿垃圾工具,这样你就不怕自己的网站收到很多垃圾邮件了。

对于新手来说,要用好这款表单工具还是存在比较多的问题的,这里Kiwi就一步一步的讲下如何使用这款强大的wordpress表单插件。

一、安装Wordpress表单插件

登陆网站后台之后,在左侧找到并点击Plugins–>Add New,这样就会进入到插件市场。在插件市场搜索栏输入contact form 7,出来的第一个结果就是我们要找的表单插件。我们点击安装并激活,这个插件就安装成功了。

安装Wordpress表单插件 contact form 7

图1:安装Wordpress表单插件 contact form 7

安装并激活成功之后,我们到网站后台的左侧找到Contact,点击就可以进入到表单界面了。在这里,你可以看到所有的表单,每个表单都以标题和代码的形式展示出来。在顶部,你也可以点击Add New添加新的表单。

表单插件 contact form 7介绍

图2:表单插件 contact form 7介绍

二、Contact form 7 表单设置

我们把鼠标放到表单名上面,就会出来Edit的按钮,我们点击Edit,就可以编辑已存在的表单。如果你想要删除表单,就选中这个表单,然后点击上面的Bulk Actions,然后选中delete功能,点击Apply,就可以成功删除你不想要的表单了。

contact form 7删除表单功能

图3:contact form 7删除表单功能

这里我以安装新表单为例,我们点击Add New添加一个新表单。如下图,我们可以看到表单设置界面是由几个部分组成的,标题区域,表单代码区域,邮箱设置区域,还有信息提示服务区域。接下来Kiwi就一个一个讲解如何对这些区域进行设置。

1、Form 区域设置

首先我们看下Form区域,你需要为你的表单输入一个标题,这个标题会直接影响你的代码情况,所以设置了就不能改了。一般主表单Kiwi通常是直接用Contact Us做标题。其次就是修改下系统默认给你的代码,如果你直接用这个代码的话,就不需要修改了。但是一般我们是需要对代码进行改进的,以便让表单更好的服务客户。

Form 区域设置

图4:Form 区域设置

考虑到很多新手站长并不懂代码,Kiwi就放一些常见实用的代码供大家参考。直接copy这个代码覆盖掉原来的代码就可以

代码1(经典代码):

[submit “Send”]

经典代码表单

图5:经典代码表单

代码2(附带多选框功能表单):

Your Name (*)

[text* your-name]

Your Email (*)

[email* your-email]

Company Name

[text* company-name]

Your Phone number

[text* your-phone no.]

What did you use to make your products? (*)

[checkbox* checkbox-778 exclusive “Handmade” “Machine” “New Products” “Others”]

Your Message

[textarea* inquiry-item placeholder “Please write down your specific requirements here”]

[submit “Submit”]

图6:附带多选框功能表单

代码3(多选并排式表单):

[text* placeholder “Your Name*”]

[text* placeholder “Departure*”]

[text* placeholder “Cargo Description*”]

[email your-email placeholder “Your email*”]

[text* placeholder “Arrival*”]

[text* placeholder “Transportation Method*”]

[textarea your-message placeholder “Your Message”]

[submit “Send”]

注意,此段代码需配合CSS使用。讲下面这段CSS复制到Appearance–>Customize–>Additional CSS

#two-column{
width: 100%;
}
#two-column #left{
width: 45%;
float: left;
}
#two-column #right{
width: 45%;
float: right;
}

多选并排式表单

图7:多选并排式表单

代码4 (文字内嵌进表单框):

[text* your-name placeholder “Your Name”]

[email* your-email placeholder “Your Email”]

[text your-subject placeholder “Your Subject”]

[textarea your-message placeholder “Your Message”]

[submit “Send”]

文字内嵌进表单框

图8:文字内嵌进表单框

代码5 控制表格长度 :