Wix表单提交后跳转场景下触发外部POST请求的解决方案咨询

问题原因 #

你的猜想是正确的，核心问题是页面跳转中断了未完成的异步请求：

• onWixFormSubmitted 是表单提交成功后触发的事件，你调用的saveProspectToCRM是异步网络请求。第一个表单提交后不跳转，页面留在原地，异步请求可以完整执行；第二个表单提交后立刻触发跳转，页面资源直接卸载，还没跑完的POST请求会被浏览器直接取消。
• 你替换为onWixFormSubmit后仍无效，是因为该事件仅支持同步返回true/false控制是否允许提交，不会等待异步请求完成再执行后续的提交、跳转流程，异步请求还是会被跳转打断。

最优解决方案 #

有两种可选方案，都可以保留表单原有发送邮件、跳转的配置：

方案1：前端拦截提交（改造成本最低） #

使用onWixFormSubmit先拦截默认提交流程，等待异步请求完成后，再手动触发表单提交，通过标记位避免无限拦截：

// 全局标记位，防止手动提交时重复拦截
let isSubmitting = false

export function wixForms2_wixFormSubmit(event) {
    // 已经是手动触发的提交，直接放行走原有流程
    if (isSubmitting) return true
    
    // 先阻止默认提交行为
    event.preventDefault()
    
    // 收集表单数据
    const formData = {
        first_name: $w('#input5').value,
        last_name: $w('#input4').value,
        email: $w('#input3').value,
    }

    // 等待CRM接口请求完成后再手动提交表单
    saveProspectToCRM(formData)
        .then(response => {
            console.log('数据提交到CRM成功', response)
            isSubmitting = true
            // 手动触发表单提交，走原有发邮件、跳转逻辑
            $w('#wixForms2').submit()
        })
        .catch(err => {
            console.error('数据提交到CRM失败', err)
            // 如要求无论CRM是否提交成功都保留原有表单功能，可放开下面两行代码
            // isSubmitting = true
            // $w('#wixForms2').submit()
        })
    
    // 首次拦截返回false，终止默认提交流程
    return false
}

你原有的后端saveProspectToCRM代码不需要修改。

方案2：后端钩子监听（稳定性最高） #

完全不依赖前端逻辑，不受跳转影响：

• 开启Wix Form的提交数据自动存入数据集功能
• 给对应数据集添加afterInsert后端钩子，在钩子中调用发送数据到第三方服务器的逻辑
  该方案即使前端页面出现异常，只要表单提交成功，后端都会执行数据同步逻辑，更稳定可靠。

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