Elementor表单提交按钮功能添加：提交后跳转两个页面的实现问题

1. 前置配置：给表单设置唯一ID #

打开Elementor编辑器，选中目标表单组件，切换到「高级」选项卡，在CSS ID输入框填写自定义唯一标识，例如custom-submit-form，保存表单设置。

2. 修正后的功能代码 #

原参考代码缺陷说明： #

• 直接绑定按钮点击事件，会跳过表单校验、数据提交逻辑，可能出现表单未提交成功就跳转的问题
• window.location.replace参数缺少引号，存在语法错误
• 未适配Elementor表单的提交生命周期，新标签页跳转容易被浏览器拦截

可用代码： #

<script>
// 监听Elementor官方提供的表单提交成功事件
document.addEventListener('submit_success', function(e) {
    // 匹配你设置的表单CSS ID，和第一步设置的内容保持一致
    if (e.target.id === 'custom-submit-form') {
        // 新标签页打开第二个页面，替换引号内为你的目标地址
        window.open('https://替换为你的第二个页面地址', '_blank');
        // 当前标签页跳转第一个页面，替换引号内为你的目标地址
        window.location.href = 'https://替换为你的第一个页面地址';
    }
});
</script>

3. 代码部署方法 #

• 单页面使用：在当前表单所在的Elementor编辑页面，拖入一个「HTML」组件，把上述代码完整粘贴到HTML组件的代码输入框，保存页面即可生效。
• 多页面通用：进入WordPress后台，依次打开「外观」-「自定义」-「自定义代码」，把代码粘贴到页脚注入区域，保存全局设置后所有对应ID的表单都会生效。

注意：如果出现新标签页被浏览器拦截的情况，是浏览器的安全策略限制，可引导用户为你的站点开放弹窗权限，属于正常现象。

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