如何在 Contact Form 7 成功提交后显示弹窗提示-html教程-PHP中文网

如何在 Contact Form 7 成功提交后显示弹窗提示

本文介绍如何通过监听 Contact Form 7 的 wpcf7submit DOM 事件，在表单成功提交后触发自定义弹窗，替代默认的内联提示，提升用户体验。

本文介绍如何通过监听 contact form 7 的 `wpcf7submit` dom 事件，在表单成功提交后触发自定义弹窗，替代默认的内联提示，提升用户体验。

Contact Form 7 默认在表单下方显示「Thank you for your message. It has been sent.」等静态提示信息。若希望以更醒目、友好的方式呈现提交成功反馈（例如模态弹窗），可通过其内置的 JavaScript DOM 事件机制实现，无需修改插件核心文件，也无需依赖额外插件。

✅ 实现步骤

确保 jQuery 或原生 JS 环境可用（推荐使用原生 JS 以减少依赖）；
在页面底部或专用 JS 文件中添加事件监听器；
在回调中调用弹窗逻辑（可使用浏览器 alert() 快速验证，或集成 SweetAlert2、Bootstrap Modal 等成熟方案）。

? 示例代码（原生 JavaScript + 基础弹窗）

<!-- 在页面 <head> 或底部 <script> 中加入 -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.addEventListener('wpcf7submit', function (event) {
    // 可选：仅针对特定表单（通过 ID 过滤）
    if (event.detail.contactFormId !== '123') return;

    // 阻止默认跳转/刷新行为（如有）
    event.preventDefault();

    // 显示自定义弹窗（此处使用浏览器原生 prompt 演示）
    alert('✅ 提交成功！感谢您的留言。');

    // ✨ 更推荐：使用轻量级弹窗库，如：
    // Swal.fire('提交成功', '我们已收到您的信息，将尽快回复！', 'success');
  }, false);
});
</script>

? event.detail 对象包含关键信息：

contactFormId: 表单唯一 ID（后台编辑页 URL 中可见）

inputs: 提交的字段名与值（如 [{ name: 'your-name', value: '张三' }]）

status: 'mail_sent' 表示邮件发送成功（注意：不保证收件人实际收到）

⚠️ 注意事项

该事件仅在服务器返回成功响应（HTTP 200 + JSON { "status": "mail_sent" }）时触发，失败（如邮箱配置错误、SPF 拒绝）不会触发；
若使用缓存插件（如 WP Rocket），请确保 JS 文件未被错误合并或延迟执行，建议将脚本置于 wp_footer 钩子或设置 defer="false"；
如需关闭默认提示区域，可在 Contact Form 7 编辑页 → 「Additional Settings」中添加：
```
on_sent_ok: "jQuery('.wpcf7-response-output').hide();"
```
（⚠️ 此语法已弃用，推荐优先使用 wpcf7submit 事件控制 UI）