本文旨在提供在Contact Form 7表单成功提交后显示“感谢弹窗”的正确方法。针对常见的jQuery和原生JavaScript实现方式，详细解释了如何避免在表单验证失败时触发弹窗，并提供了适用于多个表单的解决方案。通过本文，你将学会如何利用wpcf7mailsent事件，结合jQuery或原生JavaScript，实现可靠的表单提交后交互效果。
在Contact Form 7中，需要在表单成功提交后执行某些操作，例如显示一个“感谢弹窗”，最可靠的方法是监听wpcf7mailsent事件。这个事件只有在表单数据成功发送到服务器，并且服务器成功处理后才会触发。这避免了在表单验证失败或发送过程中出现错误时，错误地显示弹窗。
使用 wpcf7mailsent 事件 (推荐)
Contact Form 7 提供了 wpcf7mailsent 事件，专门用于在邮件成功发送后触发 JavaScript 代码。 这是一个比监听 submit 事件更可靠的方法，因为它确保了邮件确实已成功发送。
JavaScript (原生) 实现
以下是使用原生 JavaScript 监听 wpcf7mailsent 事件的示例代码：
document.addEventListener( 'wpcf7mailsent', function( event ) {
// 移除原始弹窗的 active class
document.getElementById('popUp').classList.remove('popUp__active');
// 添加感谢弹窗的 active class
document.getElementById('popUpThanks').classList.add('popUp__active');
}, false );这段代码监听了 wpcf7mailsent 事件。当事件触发时，它会移除 ID 为 popUp 的元素的 popUp__active 类，并为 ID 为 popUpThanks 的元素添加 popUp__active 类，从而显示“感谢弹窗”。
注意事项：
- 确保你的 HTML 结构中包含 popUp 和 popUpThanks 元素，并且它们最初的显示状态是隐藏的（例如，通过 CSS 设置 display: none; 或其他方式）。
- popUp__active 类应该定义相应的 CSS 样式，使其在添加该类时显示弹窗。
jQuery 实现
如果你更喜欢使用 jQuery，也可以将 wpcf7mailsent 事件与 jQuery 结合使用：
document.addEventListener( 'wpcf7mailsent', function( event ) {
event.preventDefault();
jQuery('#popUp').removeClass('popUp__active');
jQuery('#popUpThanks').addClass('popUp__active');
}, false );这段代码与上面的原生 JavaScript 示例功能相同，但使用了 jQuery 的语法来操作 DOM 元素。
注意事项：
- 确保你的 WordPress 站点已经加载了 jQuery 库。
解决多个表单的问题
如果你的页面上有多个 Contact Form 7 表单，并且你想对每个表单都应用相同的“感谢弹窗”逻辑，上面的代码也能正常工作，因为 wpcf7mailsent 事件是全局事件，会为页面上所有 Contact Form 7 表单触发。
总结
使用 wpcf7mailsent 事件是在 Contact Form 7 表单成功提交后执行操作的最佳方法。它确保了只有在邮件成功发送后才会触发你的代码，避免了在表单验证失败或其他错误情况下出现问题。无论你选择使用原生 JavaScript 还是 jQuery，都可以轻松实现这个功能。
