Contact Form 7提交后显示感谢弹窗的正确事件处理方法

本文旨在提供在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 类，从而显示“感谢弹窗”。

注意事项：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

• 确保你的 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，都可以轻松实现这个功能。

以上就是Contact Form 7提交后显示感谢弹窗的正确事件处理方法的详细内容，更多请关注php中文网其它相关文章！