Contact Form 7(CF7)是全球使用最广泛的 WordPress 插件之一,活跃安装量超过 500 万次。它可以让您免费创建无限数量的联系表单——从简单的询问表单,到多字段的预约和注册表单。本指南将带您了解安装、配置、邮件设置、垃圾信息防护以及常见问题排查。
为什么选择 Contact Form 7? 100% 免费、轻量级、高度灵活、支持 AJAX 提交,拥有丰富的扩展生态系统和庞大的社区支持。
Contact Form 7 是什么?为何如此流行?
Contact Form 7 是由 Takayuki Miyoshi 自 2007 年开始开发的开源 WordPress 表单插件。由于完全免费且无任何功能锁定,它已成为全球数百万网站所有者的默认选择。CF7 的核心概念是"表单标签"(Form Tags)——类似短代码的标记,可自动生成 HTML 表单输入元素,只需一行短代码即可在网站任何位置嵌入表单。
其灵活性使其深受开发者喜爱。您可以通过 WordPress 钩子(Hooks)和过滤器(Filters)几乎无限扩展 CF7,也可以安装第三方扩展,例如 CF7 Honeypot(垃圾信息防护)、Conditional Fields CF7(根据用户选择显示/隐藏字段)、CF7 to Zapier(Webhook 整合)、多步骤表单扩展等。
CF7 开箱即用,支持 AJAX 表单提交(提交后页面不刷新)、带类型和大小限制的文件上传、reCAPTCHA v3 垃圾信息防护,以及同一页面上的多个独立表单配置。
安装 Contact Form 7
安装 CF7 有两种方式,最简便的方法是直接通过 WordPress 后台安装:
- 在 WordPress 管理后台中,前往插件 > 安装插件。
- 搜索 "Contact Form 7"。
- 点击 Takayuki Miyoshi 所发布插件旁的立即安装。
- 安装完成后,点击启用。
- 左侧菜单栏将出现新的联系菜单。
或者,从 WordPress.org 下载 ZIP 文件,然后前往插件 > 安装插件 > 上传插件并上传该文件。若您的主机环境限制从后台直接安装插件,此方法尤为适用。
兼容性说明:Contact Form 7 需要 WordPress 6.0 或更高版本,以及 PHP 7.4 或更高版本。请始终将 WordPress 核心和 CF7 更新至最新版本,以确保安全性和兼容性。
创建表单与理解表单标签
启用后,CF7 会自动创建一个示例表单。您可以编辑它,也可以前往联系 > 联系表单 > 新建创建新表单。
表单标签是每个 CF7 表单的基本构建块,每个标签都会生成一个 HTML 表单元素。以下是最重要的常用标签:
[text your-name]— 单行文本输入框[email your-email]— 带格式验证的邮件输入框[tel your-phone]— 电话号码输入框[textarea your-message]— 多行文本区域[select your-subject]— 下拉选择列表[checkbox your-checkbox]— 多选复选框组[radio your-radio]— 单选按钮[file your-file]— 文件上传输入框[date your-date]— 日期选择器[submit "发送消息"]— 提交按钮[recaptcha]— Google reCAPTCHA(需先完成配置)
基础联系表单代码示例
<label> 您的姓名(必填)
[text* your-name] </label>
<label> 您的邮箱(必填)
[email* your-email] </label>
<label> 主题
[text your-subject] </label>
<label> 您的留言(必填)
[textarea* your-message] </label>
[submit "发送消息"]
标签名称后的星号 * 表示该字段为必填项。若用户未填写,CF7 将自动显示验证错误提示,且页面不会刷新。
配置邮件(Mail)选项卡
创建好表单后,最关键的步骤是配置邮件选项卡。这里决定了表单提交后谁会收到通知邮件、使用什么主题行,以及邮件内容如何呈现。
在表单编辑器中点击邮件选项卡,需填写的关键字段如下:
- 收件人(To):接收通知的邮件地址,例如
[email protected],多个地址用逗号分隔。 - 发件人(From):发送方地址,请始终使用您自己域名的邮箱,例如
[email protected]。 - 主题(Subject):邮件主题行,可使用邮件标签嵌入用户数据,例如
[your-subject]。 - 附加标头(Additional Headers):添加
Reply-To: [your-email],使回复直接发送给表单提交者。 - 邮件正文(Message Body):使用邮件标签(如
[your-name]、[your-email]、[your-message])构建邮件内容。
邮件正文示例
From: [your-name] <[your-email]>
Subject: [your-subject]
Message:
[your-message]
---
Sent from contact form at https://yourwebsite.com/contact/
IP Address: [_remote_ip]
Date: [_date] at [_time]
重要提示:切勿将提交者的邮箱地址([your-email])直接填入"发件人"字段,这会导致邮件被 DMARC 策略拒绝。请在"发件人"字段使用您自己域名的邮箱,并将"回复地址"设置为 [your-email]。
邮件 2(Mail 2)— 自动回复给提交者
CF7 提供可选的邮件 2功能,可向填写表单的用户自动发送确认邮件。勾选使用邮件 2并按照主邮件的方式进行配置——但将"收件人"字段设置为 [your-email],使回复发送给提交者。这样可以发出专业的确认通知,例如"感谢您联系我们,我们将在 24 小时内回复。"
配置 reCAPTCHA v3 防止垃圾信息
reCAPTCHA v3 在后台分析用户行为,无需任何用户交互——不再需要"我不是机器人"复选框。配置步骤如下:
- 访问 Google reCAPTCHA 管理控制台:
google.com/recaptcha/admin。 - 创建新网站,选择 reCAPTCHA v3 类型。
- 添加您的网站域名并点击提交。
- 复制站点密钥(Site Key)和密钥(Secret Key)。
- 在 WordPress 中,前往联系 > 整合。
- 输入两个密钥,点击保存更改。
- 在提交按钮之前,将
[recaptcha]添加到您的表单中。
专业建议:将 reCAPTCHA v3 与"Honeypot for Contact Form 7"插件结合使用。蜜罐(Honeypot)会添加一个机器人会填写的隐藏字段,为垃圾信息检测提供第二层防护,且不影响真实用户体验。
通过 SMTP 修复邮件发送问题
CF7 最常见的问题是邮件无法送达。根本原因在于 WordPress 默认使用 PHP mail() 函数,许多主机服务商会屏蔽此功能,垃圾邮件过滤器也可能将其拦截。解决方法是安装 SMTP 插件:
- WP Mail SMTP — 最受欢迎,支持 Gmail、Outlook、SendGrid、Mailgun、Amazon SES 及通用 SMTP。
- FluentSMTP — 功能完整的免费选项,内置邮件日志记录,支持多个发信服务商。
- Easy WP SMTP — 简单易用,适合初学者进行基础 SMTP 配置。
配置 WP Mail SMTP 通过 Gmail 发信
- 安装并启用 WP Mail SMTP。
- 前往 WP Mail SMTP > 设置。
- 填写发件邮箱和发件人名称。
- 选择 Google / Gmail 作为发信方式。
- 为要用于发信的 Gmail 账户创建 Google 应用专属密码。
- 输入 Google Cloud Console 中的 Client ID 和 Client Secret。
- 保存并完成 OAuth 授权流程。
- 通过 WP Mail SMTP > 邮件测试验证发信是否正常。
AsiaGB 主机使用建议:您可以直接使用主机 SMTP。将主机地址设为 mail.yourdomain.com,端口设为 587(TLS)或 465(SSL),并输入在 DirectAdmin 中创建的邮件账户用户名和密码。
验证与自定义错误消息
CF7 内置了对所有必填字段及邮件格式的验证功能。您可以在表单编辑器的消息选项卡中自定义所有错误和成功提示:
- 发送成功:例如"感谢您的留言,我们将尽快与您联系!"
- 发送失败:例如"发送时出现错误,请重试。"
- 必填字段为空:例如"请填写此字段。"
- 邮件格式无效:例如"请输入有效的邮箱地址。"
- 文件过大:例如"您上传的文件过大。"
自定义联系表单样式
CF7 会继承您当前主题的样式。您可以通过在外观 > 自定义 > 附加 CSS中添加 CSS,或在子主题的 style.css 文件中进行自定义:
/* Contact Form 7 自定义样式 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
margin-bottom: 12px;
}
.wpcf7 input[type="submit"] {
background: #059669;
color: #fff;
border: none;
padding: 12px 32px;
border-radius: 5px;
font-size: 15px;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background: #047857;
}
文件上传配置
CF7 支持使用 [file] 标签进行文件附件上传,您可以限制文件类型和大小:
[file your-file limit:5mb filetypes:jpg|png|pdf]
上述配置仅接受 JPG、PNG 和 PDF 文件,且大小不超过 5MB。表单提交成功后,文件将作为附件发送至通知邮件。请务必限制文件类型,以防止任意文件上传带来的安全风险。
Contact Form 7 热门扩展插件
| 扩展插件 | 功能 | 价格 |
|---|---|---|
| Honeypot for CF7 | 额外的机器人垃圾信息防护 | 免费 |
| CF7 to Zapier | 连接 Zapier / Webhook | 付费 |
| Conditional Fields CF7 | 根据条件显示/隐藏字段 | 免费 |
| CF7 Multi-Step Forms | 多步骤表单向导 | 免费 |
| Stripe Payments CF7 | 通过 Stripe 接受付款 | 付费 |
| CF7 Google Sheets | 将提交内容保存至 Google Sheets | 免费 |
常见问题排查
问题:邮件未能送达
- PHP mail() 被屏蔽:安装 WP Mail SMTP 或 FluentSMTP,通过真实的 SMTP 服务器发送邮件。
- 邮件进入垃圾箱:检查域名的 SPF、DKIM 和 DMARC DNS 记录,并在"发件人"字段中使用域名邮箱。
- 发件人邮箱设置有误:请使用您自己域名的邮箱作为发件人(而非在"From"字段填写 Gmail 地址)。
问题:"检测到垃圾信息"错误
若 Akismet 处于启用状态,它可能会拦截被标记为垃圾信息的表单提交。可暂时禁用 Akismet 进行测试。如有需要,在 CF7 设置中配置 CF7–Akismet 整合,微调垃圾信息评分阈值。
问题:提交后页面刷新(AJAX 未生效)
这通常表示存在 JavaScript 冲突。打开浏览器开发者控制台查看 JS 报错。尝试逐一禁用其他插件以定位冲突来源,同时确认 jQuery 是否正常加载,是否被其他插件取消了注册。
问题:CF7 脚本在每个页面都加载
CF7 默认在所有页面加载其 CSS 和 JS。若要限制仅在含有表单的页面加载,请在子主题的 functions.php 中添加:
add_filter('wpcf7_load_js', '__return_false');
add_filter('wpcf7_load_css', '__return_false');
然后使用 wpcf7_enqueue_scripts() 和 wpcf7_enqueue_styles() 在特定页面手动加载。