EP01. “Contact Form 7 表单搭建完整指南”

首页 › 建站工具 › Email · Contact Form 7

约 15 分钟·

这篇笔记讲怎么安装 Contact Form 7、把表单加进页面、以及 Form Tab 里所有常用字段标签的用法。Contact Form 7 自 2009 年起就存在，是 WordPress 最受欢迎的免费联系表单插件之一，累计下载超过 500 万次。邮件通知和 Flamingo 记录设置看《邮件设置与Flamingo记录》，防垃圾邮件设置看《防垃圾邮件设置-reCAPTCHA与Cloudflare》。

重点内容

安装插件

WordPress 后台 → Plugins → Add New Plugin → 搜索 "Contact Form 7" → Install Now → Activate
安装后左侧菜单会多一个 "Contact" 项目，所有设置都在这里
首次安装会自动生成一个示例表单（Contact Form 1），可以先打开看一下结构再自己改

📌 如果 WordPress 后台还在用 /wp-admin/ 默认登录方式，建议先做好登录安全，这不是 Contact Form 7 本身的功能，只是操作前的提醒。

[截图：安装 Contact Form 7 后左侧菜单新增的 Contact 项目，以及默认生成的 Contact Form 1 示例表单]

联系表单的利弊（要不要装）

✅ 优点：

让读者/客户/粉丝能直接联系你；电商网站如果没有联系表单，客户有疑问联系不到人，可能直接造成生意损失
网站上有联系表单会增加可信度，访客会把「能联系到站主」当作一种信任背书

❌ 缺点：

公开的表单容易被垃圾邮件盯上（解法见《防垃圾邮件设置-reCAPTCHA与Cloudflare》）
装了表单之后要花时间回复访客消息，这是持续的维护成本，但通常认为利大于弊

编辑联系表单页面的四个分区

Tab	作用
Form	用各种字段（Text/Email/Checkbox 等）自定义表单的 HTML 模板，也可以直接手写 HTML
Mail	自定义提交后发出的通知邮件模板与参数
Message	自定义提交后（成功/失败/验证错误等）显示给访客的提示文字
Additional Settings	用代码片段开启附加功能，例如仅限已登录订阅者提交、demo 模式、跳过发信等

[截图：Contact Form 7 表单编辑页面的 Form / Mail / Message / Additional Settings 四个分区标签页]

把表单放到页面上

Gutenberg 编辑器：点 "+" 加号 → 搜索 "Contact Form" 区块 → 选择对应表单即可插入
Divi / Elementor 等其他建站工具：在 Contact Form 7 的表单列表页复制对应的 shortcode（例如 [contact-form-7 id="..." title="..."]），到页面里加一个 Text/Code 模块粘贴 shortcode 即可
经典编辑器：shortcode 直接贴在内容里任意位置

常用表单标签（Form Tag）一览

点击 Form Tab 里对应的预设按钮，会弹出设置窗，填完设置会自动生成一段 shortcode，按 Insert Tag 插入到表单模板里：

[截图：Form Tab 编辑界面，显示 Text/Email/Textarea 等字段类型的预设按钮与点击后弹出的字段设置窗口]

标签	用途	常用设置	示例 shortcode
Text	单行文本（姓名等不需要多行的字段）	Field Type（是否必填）、Name、Default Value（占位文字）、ID/Class Attribute	`[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]`
Email	邮箱地址	同上	`[email* email-632 id:email class:email placeholder "Your Email"]`
URL	网址（比用 Text 更好，会自动校验格式）	Name、Default Value、ID/Class	`[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]`
Tel	电话号码（比用 Text 更好，会校验号码格式）	Name、Default Value、ID/Class	`[tel tel-842 id:cf7-your-phone-number class:cf7-your-phone-number "Your Phone Number"]`
Number	纯数字输入（跟 Text/Textarea 不同，只允许数字）	Name	—
Date	日历式日期选择器，适合约定日期用途，可设置可选范围（min/max）	Name、Default Value、Range	`[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]`
Textarea	多行文本框，适合留言正文	Name、Default Value、ID/Class	`[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]`
Drop-down menu	下拉选单，选项占用空间少，适合选项较多的情况	Name、Options（每行一个选项）、是否 Allow Multiple Selections、是否插入空白首项、ID/Class	—
Checkbox	复选框，可多选，选项少时比下拉菜单省点击次数	Name、Options、Wrap Each Item with Label Element、ID/Class	`[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]`
Radio buttons	单选按钮，只能选一项	Name、Options、Wrap Each Item with Label Element、ID/Class	`[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]`
Acceptance	单个「接受条款」复选框，可设置一段说明文字，也可在文字里插入 `<a href="...">` 链接到隐私政策页	Name、Condition（提示文字）、ID/Class；不勾选默认打勾的选项，否则访客不勾也能提交	`[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]`
Quiz	简单问答验证，格式是「问题｜答案」，用 `\	` 分隔	Name、ID/Class	`[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?\	2003"]`
File	文件上传字段，可设置大小限制与允许类型（例如摄影类网站限 1MB、只收 jpg/png）	Name、File Size Limit、Acceptable File Types、ID/Class	`[file file-658 limit:1024kb filetypes:jpg\	png\	gif id:cf7-file class:cf7-file]`
Submit	提交按钮	Label、ID/Class	`[submit id:cf7-submit class:cf7-submit "Submit"]`

常见搭配（实操顺序参考）

一个完整的联系表单常见字段顺序：姓名（Text）→ 邮箱（Email，必填）→ 电话（Tel，选填）→ 留言内容（Textarea，必填）→ 网站（URL，选填）→ 下拉菜单/复选框/单选按钮（视需求）→ 接受条款（Acceptance）→ 文件上传（File，选填）→ 提交按钮（Submit）。

💡 每个字段外面记得包一层 <label>...</label>，字段之间按 Enter 换行即可让字段独立成行显示。

给字段加标签（Label）

Text / Email / URL / Tel / Number / Date / Text Area / Acceptance / Quiz / File 这几种标签，直接用 <label> 包住整个 shortcode 就行：

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

⚠️ Checkbox / Radio buttons / Drop-down menu 这几种因为背后对应多个表单控件，不能直接套 <label> 标签（会报错），要在 shortcode 里加 use_label_element 参数，之后就能在表单编辑器里给每个选项加标签（上面「常用设置」表里的 shortcode 示例已经带上这个参数）。

💡 有占位文字（placeholder）的字段其实不一定要加 label；生产环境按需要加就好，不用每个字段都加。

常见误区

❌ Checkbox / Radio / Drop-down menu 直接套用 <label> 标签包住 shortcode——这几种类型必须加 use_label_element 参数，用普通 <label> 包会报错
❌ Acceptance 接受条款字段的 Condition 默认打勾——一定要取消默认勾选，否则访客不主动勾选也能提交表单，等于形同虚设
❌ 每个字段都套用 <label>，包括有占位文字的字段——占位文字（placeholder）已经能提示访客该填什么，不是每个字段都需要额外加 label
💡 URL 和 Tel 类型比直接用 Text 更好，因为会自动校验格式，能提前拦住格式错误的输入

Sources

YouTube：

Blog / Website：

如何为WordPress网站配置Contact Form 7（WBOLT_COM）