WordPress 的 Contact Form 7 插件

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 后台安装:

  1. 在 WordPress 管理后台中,前往插件 > 安装插件。
  2. 搜索 "Contact Form 7"。
  3. 点击 Takayuki Miyoshi 所发布插件旁的立即安装。
  4. 安装完成后,点击启用。
  5. 左侧菜单栏将出现新的联系菜单。

或者,从 WordPress.org 下载 ZIP 文件,然后前往插件 > 安装插件 > 上传插件并上传该文件。若您的主机环境限制从后台直接安装插件,此方法尤为适用。

兼容性说明:Contact Form 7 需要 WordPress 6.0 或更高版本,以及 PHP 7.4 或更高版本。请始终将 WordPress 核心和 CF7 更新至最新版本,以确保安全性和兼容性。

创建表单与理解表单标签

启用后,CF7 会自动创建一个示例表单。您可以编辑它,也可以前往联系 > 联系表单 > 新建创建新表单。

表单标签是每个 CF7 表单的基本构建块,每个标签都会生成一个 HTML 表单元素。以下是最重要的常用标签:

基础联系表单代码示例

<label> 您的姓名(必填)
    [text* your-name] </label>

<label> 您的邮箱(必填)
    [email* your-email] </label>

<label> 主题
    [text your-subject] </label>

<label> 您的留言(必填)
    [textarea* your-message] </label>

[submit "发送消息"]

标签名称后的星号 * 表示该字段为必填项。若用户未填写,CF7 将自动显示验证错误提示,且页面不会刷新。

配置邮件(Mail)选项卡

创建好表单后,最关键的步骤是配置邮件选项卡。这里决定了表单提交后谁会收到通知邮件、使用什么主题行,以及邮件内容如何呈现。

在表单编辑器中点击邮件选项卡,需填写的关键字段如下:

邮件正文示例

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 在后台分析用户行为,无需任何用户交互——不再需要"我不是机器人"复选框。配置步骤如下:

  1. 访问 Google reCAPTCHA 管理控制台:google.com/recaptcha/admin。
  2. 创建新网站,选择 reCAPTCHA v3 类型。
  3. 添加您的网站域名并点击提交。
  4. 复制站点密钥(Site Key)和密钥(Secret Key)。
  5. 在 WordPress 中,前往联系 > 整合。
  6. 输入两个密钥,点击保存更改。
  7. 在提交按钮之前,将 [recaptcha] 添加到您的表单中。

专业建议:将 reCAPTCHA v3 与"Honeypot for Contact Form 7"插件结合使用。蜜罐(Honeypot)会添加一个机器人会填写的隐藏字段,为垃圾信息检测提供第二层防护,且不影响真实用户体验。

通过 SMTP 修复邮件发送问题

CF7 最常见的问题是邮件无法送达。根本原因在于 WordPress 默认使用 PHP mail() 函数,许多主机服务商会屏蔽此功能,垃圾邮件过滤器也可能将其拦截。解决方法是安装 SMTP 插件:

配置 WP Mail SMTP 通过 Gmail 发信

  1. 安装并启用 WP Mail SMTP。
  2. 前往 WP Mail SMTP > 设置。
  3. 填写发件邮箱和发件人名称。
  4. 选择 Google / Gmail 作为发信方式。
  5. 为要用于发信的 Gmail 账户创建 Google 应用专属密码。
  6. 输入 Google Cloud Console 中的 Client ID 和 Client Secret。
  7. 保存并完成 OAuth 授权流程。
  8. 通过 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 免费

常见问题排查

问题:邮件未能送达

问题:"检测到垃圾信息"错误

若 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() 在特定页面手动加载。

立即开始使用 AsiaGB WordPress 主机

搭载 DirectAdmin 的高速 WordPress 主机——立即安装您喜爱的插件,开箱即用。

查看主机套餐