这是一篇完整的 Contact Form 7 教程 ,利用 Contact Form 7(免费 WordPress 表单插件),我们可以制作联络表单,并收集资料。
搭建多类型网站,可能都会需要制作表单,搜集资料,像是:联络、订阅电子报、咨询等 .. 。
如果只需要设置基本联络表单,不想额外购买插件,也不想使用其他有限制的免费版插件,那可以考虑使用 Contact Form 7 。
Contact Form 7 是完全免费且开源的,只需一点程序基础,就可以任意调整表单字段、样式。
如果你是新手,不用担心,这篇文章会带领你完成基础的联络表单,让你轻松上手这款优质的免费插件.
那我们就开始制作联络表单教程吧!
- 1. Contact Form 7 是什么?
- 2. 安装+启用 Contact Form 7
- 3. 新增联络表单
- 4. 设置电子邮件(接收表单数据)
- 5. 修改表单讯息
- 6. 表单上线+测试
- 常见问题
- WordPress 学习资源
1. Contact Form 7 是什么?
![contact-form-banner2-2 Contact Form 7 联络表单](https://img.itaoda.cn/wp-content/uploads/2023/05/contact-form-banner2-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
Contact Form 7 是目前安装数量最多 WordPress 表单插件,有高达 500w+ 以上安装,并且常驻 WordPress 热门插件。
开发者为个人,算是佛心开发给 WordPress 用户免费使用,自由度&客制化程度极高,有一些程序码基础,就可以自由调整表单功能、样式。
点击不同按钮,可新增表单字段,可新增的字段不受数量限制,新增后会产生程序码,嵌入后再依站长需求,进行修改。
完成后在 WordPress 区块编辑器,直接复制短代码,即可套用。
![fdp-contact-block17-1024x565-3 Contact Form 7 表单设计页面](https://img.itaoda.cn/wp-content/uploads/2023/05/fdp-contact-block17-1024x565-3.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
Contact Form 7 目前只提供单一联络表单功能,但我们可依据整合插件,定制不同表单功能。
像是:Sendinblue、Constant Contact 可整合成电子报订阅表单; Stripe 可制作购物流程表单; reCAPTCHA 可保护表单,避免恶意灌水。
![n-fdp-01-2](https://img.itaoda.cn/wp-content/uploads/2023/05/n-fdp-01-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
同时支持 AJAX 传送方式、CAPTCHA、Akismet 垃圾留言筛选等功能,并且有完全中文化的后台。 更多 Akismet 垃圾留言防护、WordFence 资安插件教程。
在电子邮件可自由设定内容,传送至管理员信箱,方便实时统整表单信息。
![n-fdp-03-2](https://img.itaoda.cn/wp-content/uploads/2023/05/n-fdp-03-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
也可编辑各种通知消息,像是:成功收到表单讯息、必填字段未填写、输入数据不正确等 .. 通知,以免费插件来说,各项细节功能都十分齐全。
![n-fdp-02-2](https://img.itaoda.cn/wp-content/uploads/2023/05/n-fdp-02-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
2. 安装+启用 Contact Form 7
此章节,我们就来安装+启用 Contact Form 7 。
前往 WordPress 后台,插件 > 安装插件,搜寻 Contact Form 7 安装+启用。
![wfp-01-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-01-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
3. 新增联络表单
启用后,从左侧边栏找到“ 联络表单 ”> 选择“ 添加联络表单 ” 。
![wfp-02-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-02-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
进入表单制作页面,会看见 Contact Form 7 已自动帮我们填好基本问题 CSS 字段 ,制作出一个基本的联络表单。
![wfp-03-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-03-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
我们可以利用这个基本表单,来新增及修改表单字段。
先输入表单标题,接着往下可以选择想加入的字段项目,这边我以新增「电话号码」为范例。
![wfp-04-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-04-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
跳出设定窗口,这边可设定:必填字段、默认文字(会出现在字段中,为示范用文字)。 请先不要更动字段名称。
设定完成,会看见 Contact Form 7 帮我们完成短代码,选择「 插入标签 」加入表单中。
![wfp-05-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-05-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
顺利加入后,这是该字段在前台显示的样子(后续会教大家上架该表单,目前仅示范短代码呈现效果)。
![wfp-06-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-06-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这时我们会发现,缺少电话号码标题,因此我们需要命名该字段。
该怎么做呢? 很简单,用 将这串短带码包起来,并且在短代码之前,加入命名标题。</label> </label>
![wfp-07-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-07-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
这涉及到一点 HTML 的概念。 要让计算机判读这串短代码+命名标题为一组“ 标签 ”,所以才要把它们「包起来 」。
最后完成的表单字段格式会是:
<label> 電話號碼
[tel* tel-911 placeholder "0322255557"] <label>
小备注:「*」为必填指令,「 tel-911 」为字段名称,「 placeholder “0911234567” 」为默认(示范)文字。
以上就是新增表单栏位的教程。
学会如何新增单项窗体表单字段后,相信大家都可以顺利制作表单!
4. 设置电子邮件(接收表单数据)
Contact Form 7 可设定将此份表单接收的资料,传送到 Email ,也能够自由填写电邮模版内容。
这个章节,我会教大家如何设定电子邮件,让各位站长可顺利收取表单信息。
上方面板选择「电子邮件」,可看到表单字段短代码,已经整理在面板中。
![wfp-09-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-09-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
- 收件人:可填入其他 Email ,也可维持预设(管理员邮箱)。
[_site_admin_email]
- 发件人:电子邮件会显示的发件人,无特别需求,维持预设即可。 (网站名称)。
[_site_title]
- 主旨:电子邮件标题。 (填写表单者填入的主旨字段)。
[your-subject]
- 其它信头:会显示于回复邮件等 .. 特殊位置的标题。 (填写表单者 Email )。
[your-email]
以上设定项目,如果没有特别需求,维持预设即可。
往下,我们可以利用插件提供的标签,修改电子邮件模版内容,新增更多表单信息。
![wfp-10-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-10-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
填写完成,往下滑,还能新增第二个电子邮件模板(可寄给填表单者)。
因操作过程相似,大家可参考上方教程,进行新增,就不再另外示范。
![wfp-11-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-11-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
两块模板都新增完成后,选择存储即可,这样电子邮件的设置就完成啰:)
5. 修改表单讯息
修改好电子邮件,我们还能够修改系统讯息。
切换到讯息面版,即可依据字段说明,对系统信息进行调整。
![wfp-12-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-12-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
默认本来就有讯息,所以若没有特别需求,维持原预设即可。
修改后储存,前台就会在做出相对应动作时,显示系统讯息。
![wfp-13-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-13-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
6. 表单上线+测试
以上设定完成,恭喜各位站长完成表单:)
接下来我们要做的,就是让这份表单上线,以及实际填写表单,测试表单能否正常运作,以及站长能否顺利接收资料。
联络表单上线
不管是使用哪款 页面编辑器,只要前往页面设定,使用短代码小工具,贴上窗体代码即可,此处我以 Elementor 进行示范。 更多 Elementor 基础教程。
使用 Elementor 编辑页面,找到「短码」小工具,新增至想呈现表单的位置。
![wfp-14-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-14-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接着,在表单编辑页面,我们可以找到表单短代码复制,并在 Elementor 的短码小工具,贴上表单代码,储存更新页面。
![wfp-15-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-15-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
到前台刷新,发现成功在页面新增联络表单~
联络表单测试
那我们来实际填写,测试联络表单能否顺利运作吧:)
随机填写信息后,选择“ 发送 ”送出。
![wfp-17-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wfp-17-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
送出成功,站长就可以在 Email 接收到联络表单资料。
我们前往 Email 查看,发现成功收到表单资料信件,信件内容也跟模板一样!
那么,以上就是完整的 Contact Form 7 教程.)
常见问题
Contact Form 7 是什么?
Contact Form 7 是目前安装数量最多 WordPress 表单插件,并且常驻 WordPress 热门插件。
开发者为个人,算是佛心开发给 WordPress 用户免费使用,自由度&客制化程度极高,有一些程序码基础,就可以自由调整表单功能、样式。
点击不同按钮,可新增表单字段,可新增的字段不受数量限制,新增后会产生程序码,嵌入后再依站长需求,进行修改。
完成后直接复制表单短代码,即可在任意页面、文章套用。
我想变更联络表单样式,该怎么做?
可以在编辑表单时,切换至“ 其他设置”区块,贴上样式 CSS 字段,进行修改。
样式 CSS 字段,可以参考开发者论坛文章:设计联系表格的样式 进行学习唷:)
有其他推荐的 WordPress 表单插件吗?
对于不太擅长程序码的站长,若是有调整窗体样式 CSS 需求,可能会需要一段时间上手 Contact Form 7 。
所以可以参考其他款可可视化编辑的 WordPress 表单插件。
犬哥网站已经整理一份 WordPress 表单插件推荐清单,供站长们自由挑选符合自身需求的表单插件:)
其中我最推荐的是 WPForms ,免费版功能相对齐全,也可轻松完成基本表单需求(特殊表单需求,就需额外付费)。
如果不想使用 WordPress 表单插件,有办法嵌入表单吗?
可以使用 Google Form,新增表单后,再用 HTML 小工具,将表单嵌入至页面 / 文章,就不用额外安装插件
原文链接:https://www.itaoda.cn/blog/12074.html,转载请注明出处。
评论0