更新时间：2026年8月28号
Contact Form 7（CF7）是WordPress中广泛使用的免费表单插件。通过GTM监听CF7的DOM事件，我们可以将表单提交数据准确发送至GA4，实现无代码埋点。本文将逐步讲解实现原理与配置流程。
实现原理
Contact Form 7在AJAX表单提交过程中会触发一系列DOM事件，GTM可以通过自定义HTML代码监听这些事件，并将相关信息推送到dataLayer，再由GA4事件代码采集。
CF7提供的核心事件包括：
| 事件名 | 触发时机 |
|---|---|
| wpcf7invalid | 表单提交成功，但因存在无效字段而未发送邮件 |
| wpcf7spam | 表单提交成功，但因检测到垃圾信息而未发送邮件 |
| wpcf7mailsent | 表单提交成功，且邮件已成功发送 |
| wpcf7mailfailed | 表单提交成功，但邮件发送失败 |
| wpcf7submit | 表单提交完成，无论后续结果如何 |
我们选择监听 wpcf7mailsent（邮件发送成功）作为主要跟踪事件，当然你也可以根据业务需求监听其他事件。
在GTM中部署以下自定义HTML代码，将CF7事件转换为标准化的dataLayer事件：
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
<
这段代码会在CF7 件发送成功后，向dataLayer推送一个cf7submission 事件，并携带formId（表单 ID）和 response（表单提交数据）两个参数。
设置过程
Step 1：创建自定义HTML监听代码
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「自定义HTML」，做如下设置：
这段配置的作用是监听Contact Form 7的Dom Event，当监听到这些事件的时候，在通过dataLayer发送事件给GA4。
Step 2：创建数据层变量
我们需要创建两个数据层变量formId和response，用于后续 GA4 事件参数传递。
在GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」，做如下设置：
同样的方式去设定response。
Step 3：创建触发器
从上一步我们已经知道了event是cf7submission。
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「自定义事件」，做如下设置：
Step 4：创建GA4事件代码
最后就是设置GA4 事件代码。
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，命名为“Event—Form Submit Tracking(Contact Form 7)”，做如下设置：
Step 5：预览调试与发布
点击 GTM 右上角「预览」，输入你的网站地址，进入调试模式，在网站上提交一次CF7表单，可以看到是准确触发：
验证无误后，发布 GTM 容器。
注意事项与常见问题
-
事件监听代码需在CF7脚本后执行：如果自定义HTML代码在页面底部加载，而CF7事件在页面加载早期触发，可能会漏掉。建议将代码放在「所有页面」触发器中，并确保 GTM 容器本身加载时机合理。
-
AJAX 提交默认开启：CF7默认使用AJAX提交，上述事件才会触发；如果关闭了AJAX，事件将不会触发，需改用页面刷新后的判断逻辑。
-
数据隐私：response参数包含用户提交的所有表单字段，务必检查是否包含敏感信息（如密码、身份证号）。若需跟踪特定字段，建议在 dataLayer push 时筛选，或创建更精细的变量。
-
与其他插件冲突：某些缓存插件或优化插件可能延迟CF7脚本加载，导致事件监听失败。遇到问题时建议在无缓存环境下测试。
