如何在 WPForms 表单成功提交后触发 Fancybox 弹窗

本文介绍如何精准实现在 wpforms 表单通过前端验证并完成 ajax 成功提交后，自动打开 fancybox 内联模态框，避免在验证失败或页面跳转时误触发。

WPForms 提供了完善的 javaScript 事件钩子，其中 wpformsajaxSubmitSuccess 是关键——它仅在表单通过所有客户端验证、成功发送至服务器并收到有效响应后触发，完美契合“仅成功后弹窗”的需求。

直接监听原生 submit 事件（如 form.addEventListener(‘submit’, …)）不可靠：该事件在用户点击提交按钮瞬间即触发，此时 WPForms 的异步验证尚未完成，甚至可能因必填字段为空而中断提交，但模态框却已提前弹出，造成体验错乱。

✅ 正确做法是利用 WPForms 官方支持的 jquery 事件机制：

// 确保在 DOM 加载完成后执行，且依赖 jQuery 和 WPForms 脚本已就绪 (($) => {     // 监听所有 WPForms 表单的 AJAX 成功提交事件     $('form.wpforms-form').on('wpformsAjaxSubmitSuccess', function (e, response) {         // 可选：校验响应状态增强健壮性         if (response && response.success === true) {             new Fancybox([                 {                     src: '#modal-response',                     type: 'inline',                     // 推荐添加关闭按钮与键盘支持                     closeButton: 'inside',                     keyboard: {                         Escape: 'close',                         Delete: 'close',                         Backspace: 'close'                     }                 }             ]);         }     }); })(jQuery);

? 注意事项：

• 确保 #modal-response 元素在页面中存在且为隐藏状态（例如用 display: none; 或 visibility: hidden;），Fancybox 会自动处理显示逻辑；
• 此方案仅适用于启用「AJAX 提交」的 WPForms 表单（默认开启），若禁用了 AJAX（即传统页面刷新提交），则需改用 wpformsSubmitSuccess 事件，并注意页面跳转可能导致模态框无法显示；
• 建议将上述代码放入主题的 footer.php 底部、或通过 wp_add_inline_script() 注入，确保 jQuery 和 WPForms 的 js 已加载；
• 若使用 Fancybox v5（当前主流版本），以上语法完全兼容；若为旧版 v4，请替换为 $.fancybox.open(…) 写法。

总结：抛弃对原生 submit 事件的粗粒度监听，转而信任 WPForms 提供的语义化事件，是实现精准交互响应的核心原则。既保障用户体验一致性，也符合 wordPress 主题/插件开发的最佳实践。