这是一篇完整的 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 7 是目前安装数量最多 WordPress 表单插件，有高达 500w+ 以上安装，并且常驻 WordPress 热门插件。
开发者为个人，算是佛心开发给 WordPress 用户免费使用，自由度&客制化程度极高，有一些程序码基础，就可以自由调整表单功能、样式。
点击不同按钮，可新增表单字段，可新增的字段不受数量限制，新增后会产生程序码，嵌入后再依站长需求，进行修改。
完成后在 WordPress 区块编辑器，直接复制短代码，即可套用。
Contact Form 7 目前只提供单一联络表单功能，但我们可依据整合插件，定制不同表单功能。
像是：Sendinblue、Constant Contact 可整合成电子报订阅表单; Stripe 可制作购物流程表单; reCAPTCHA 可保护表单，避免恶意灌水。
同时支持 AJAX 传送方式、CAPTCHA、Akismet 垃圾留言筛选等功能，并且有完全中文化的后台。 更多 Akismet 垃圾留言防护、WordFence 资安插件教程。
在电子邮件可自由设定内容，传送至管理员信箱，方便实时统整表单信息。
也可编辑各种通知消息，像是：成功收到表单讯息、必填字段未填写、输入数据不正确等 .. 通知，以免费插件来说，各项细节功能都十分齐全。
2. 安装+启用 Contact Form 7
此章节，我们就来安装+启用 Contact Form 7 。
前往 WordPress 后台，插件 > 安装插件，搜寻 Contact Form 7 安装+启用。
3. 新增联络表单
启用后，从左侧边栏找到“ 联络表单 ”> 选择“ 添加联络表单 ” 。
进入表单制作页面，会看见 Contact Form 7 已自动帮我们填好基本问题 CSS 字段 ，制作出一个基本的联络表单。
我们可以利用这个基本表单，来新增及修改表单字段。
先输入表单标题，接着往下可以选择想加入的字段项目，这边我以新增「电话号码」为范例。
跳出设定窗口，这边可设定：必填字段、默认文字（会出现在字段中，为示范用文字）。 请先不要更动字段名称。
设定完成，会看见 Contact Form 7 帮我们完成短代码，选择「 插入标签 」加入表单中。
顺利加入后，这是该字段在前台显示的样子（后续会教大家上架该表单，目前仅示范短代码呈现效果）。
这时我们会发现，缺少电话号码标题，因此我们需要命名该字段。
该怎么做呢？ 很简单，用 将这串短带码包起来，并且在短代码之前，加入命名标题。</label> </label>
这涉及到一点 HTML 的概念。 要让计算机判读这串短代码+命名标题为一组“ 标签 ”，所以才要把它们「包起来 」。
最后完成的表单字段格式会是：
<label> 電話號碼
[tel* tel-911 placeholder "0322255557"] <label>
小备注：「*」为必填指令，「 tel-911 」为字段名称，「 placeholder “0911234567” 」为默认（示范）文字。
以上就是新增表单栏位的教程。
学会如何新增单项窗体表单字段后，相信大家都可以顺利制作表单！
4. 设置电子邮件（接收表单数据）
Contact Form 7 可设定将此份表单接收的资料，传送到 Email ，也能够自由填写电邮模版内容。
这个章节，我会教大家如何设定电子邮件，让各位站长可顺利收取表单信息。
上方面板选择「电子邮件」，可看到表单字段短代码，已经整理在面板中。
- 收件人：可填入其他 Email ，也可维持预设（管理员邮箱）。
[_site_admin_email] - 发件人：电子邮件会显示的发件人，无特别需求，维持预设即可。 （网站名称）。
[_site_title] - 主旨：电子邮件标题。 （填写表单者填入的主旨字段）。
[your-subject] - 其它信头：会显示于回复邮件等 .. 特殊位置的标题。 （填写表单者 Email ）。
[your-email]
以上设定项目，如果没有特别需求，维持预设即可。
往下，我们可以利用插件提供的标签，修改电子邮件模版内容，新增更多表单信息。
填写完成，往下滑，还能新增第二个电子邮件模板（可寄给填表单者）。
因操作过程相似，大家可参考上方教程，进行新增，就不再另外示范。
两块模板都新增完成后，选择存储即可，这样电子邮件的设置就完成啰：）
5. 修改表单讯息
修改好电子邮件，我们还能够修改系统讯息。
切换到讯息面版，即可依据字段说明，对系统信息进行调整。
默认本来就有讯息，所以若没有特别需求，维持原预设即可。
修改后储存，前台就会在做出相对应动作时，显示系统讯息。
6. 表单上线+测试
以上设定完成，恭喜各位站长完成表单：）
接下来我们要做的，就是让这份表单上线，以及实际填写表单，测试表单能否正常运作，以及站长能否顺利接收资料。
联络表单上线
不管是使用哪款 页面编辑器，只要前往页面设定，使用短代码小工具，贴上窗体代码即可，此处我以 Elementor 进行示范。 更多 Elementor 基础教程。
使用 Elementor 编辑页面，找到「短码」小工具，新增至想呈现表单的位置。
接着，在表单编辑页面，我们可以找到表单短代码复制，并在 Elementor 的短码小工具，贴上表单代码，储存更新页面。
到前台刷新，发现成功在页面新增联络表单~
联络表单测试
那我们来实际填写，测试联络表单能否顺利运作吧：）
随机填写信息后，选择“ 发送 ”送出。
送出成功，站长就可以在 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