本文介绍如何精准实现在 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 主题/插件开发的最佳实践。
