如何在WPForms表单验证通过后打开Fancybox模态框？

你的代码问题在于直接监听了表单的submit事件，这个事件会在WPForms执行前端验证之前触发，所以不管字段是否通过验证，模态框都会弹出。要实现仅在验证通过后打开模态框，应该使用WPForms官方提供的提交成功事件钩子。

修正后的代码 #

function openFormResp() {
  new Fancybox([
    {
      src: '#modal-response',
      type: 'inline',
    },
  ]);
}

// 监听WPForms前端验证通过后的提交成功事件
document.addEventListener('wpforms_submit_success', function(event) {
  // 可根据需求指定特定表单ID生效，比如只处理ID为123的表单
  // if (event.detail.formId === 123) {
    openFormResp();
  // }
});

关键说明 #

• wpforms_submit_success是WPForms官方提供的JavaScript事件，仅当表单通过前端验证并完成AJAX提交时才会触发。
• 如果需要针对特定表单生效，取消注释代码中的表单ID判断，替换成你的表单实际ID（可在WPForms编辑器中查看）。
• 若使用非AJAX提交（表单提交后刷新页面），则需要后端配合：通过wpforms_process_complete钩子设置会话变量，前端页面加载时检查该变量，存在则打开模态框。

内容的提问来源于stack exchange，提问作者Rudy