本文介绍如何通过原生 javascript 实现 contact form 7 表单提交后隐藏原始表单区域、显示自定义感谢信息，无需插件或 jquery，兼容 wordpress 默认集成方式。
本文介绍如何通过原生 javascript 实现 contact form 7 表单提交后隐藏原始表单区域、显示自定义感谢信息，无需插件或 jquery，兼容 wordpress 默认集成方式。
在使用 Contact Form 7（CF7）时，虽然其内置支持「成功提交后跳转」或「显示默认提示消息」，但若需更精细的 UI 控制——例如将整个表单容器（.div1）平滑替换为定制感谢页（.div2）——则需借助前端脚本干预提交行为。关键在于拦截原生表单提交事件，执行 DOM 切换逻辑，同时确保 CF7 的 AJAX 提交流程不受干扰（CF7 默认启用 AJAX，不会真正刷新页面）。
以下为推荐实现方案（适配 CF7 最新版本）：
✅ 正确做法：监听 wpcf7mailsent 自定义事件（推荐）
Contact Form 7 在 AJAX 提交成功后会触发 wpcf7mailsent 事件，这是最稳妥的钩子，避免与 CF7 内部逻辑冲突：
<div class="form padtop25 div1">
<!-- CF7 短代码嵌入处，例如：[contact-form-7 id="123"] -->
<!-- 或保留你原有的 HTML 结构，但需确保 form 具有 wpcf7-form 类 -->
</div>
<div class="div2" style="display: none;">
<p class="headline">Thanks for filling the form! Lorem Ipsum</p>
<p class="subhead">Lorem Ipsum Lorem Ipsum Lorem Ipsum...</p>
<p class="subhead">Lorem Ipsum Lorem Ipsum :) Lorem Ipsum AXCV</p>
</div>
<script>
document.addEventListener('wpcf7mailsent', function(event) {
// 隐藏表单容器
document.querySelector('.div1').style.display = 'none';
// 显示感谢区域
document.querySelector('.div2').style.display = 'block';
// ✅ 可选：滚动到感谢内容顶部（提升用户体验）
document.querySelector('.div2').scrollIntoView({ behavior: 'smooth' });
}, false);
</script>⚠️ 注意事项：
- 不要使用 submit 事件 + event.preventDefault()：这会阻止 CF7 的 AJAX 提交，导致表单无法发送。
- 确保 .div2 初始为 display: none（如上所示），否则可能闪现。
- 若页面含多个 CF7 表单，建议为每个表单添加唯一 ID 或 data 属性，并在事件监听中校验 event.detail.contactFormId 进行精准匹配。
- 如需加载动画效果，可配合 CSS transitions 或添加 fade-in 类替代 display 切换。
? 替代方案（仅限非 AJAX 场景）
若因特殊原因禁用了 CF7 的 AJAX（不推荐），可改用原生 submit 事件，但必须配合 event.preventDefault() 并手动发起提交（复杂且易出错），故不在此展开。
综上，利用 wpcf7mailsent 是与 Contact Form 7 协同工作的标准实践。它既尊重插件机制，又赋予开发者完全的 UI 控制权，是实现「提交后内容切换」简洁、可靠、可维护的最佳路径。
