如何使用JavaScript实现Mailchimp表单提交后2秒在新标签页跳转

基础实现（适用异步提交/提交后页面不刷新的Mailchimp表单） #

如果你的Mailchimp表单默认是异步提交（点击订阅后页面不会刷新，仅在当前页展示提交结果），直接插入以下脚本即可：

// 定位到Mailchimp表单元素
const mailchimpForm = document.querySelector('.mc4wp-form-fields').closest('form');

mailchimpForm.addEventListener('submit', function () {
  // 延迟2秒执行跳转
  setTimeout(() => {
    // 替换引号内的内容为你的目标跳转地址
    window.open('自定义跳转地址', '_blank');
  }, 2000);
});

兼容同步提交表单的实现 #

如果你的表单是同步提交（点击订阅后页面会跳转/刷新），需要先改为异步提交保证延迟逻辑生效，使用以下代码：

const mailchimpForm = document.querySelector('.mc4wp-form-fields').closest('form');

mailchimpForm.addEventListener('submit', function (e) {
  // 阻止默认的同步提交刷新页面行为
  e.preventDefault();
  
  // 异步提交表单数据到Mailchimp
  fetch(mailchimpForm.action, {
    method: mailchimpForm.method || 'POST',
    body: new FormData(mailchimpForm),
    mode: 'no-cors'
  }).then(() => {
    // 提交成功后延迟2秒跳转
    setTimeout(() => {
      window.open('自定义跳转地址', '_blank');
    }, 2000);
  });
});

注意事项 #

• 部分浏览器的弹窗拦截规则会阻止非用户直接触发的window.open调用，如果遇到拦截问题，可以将新标签页跳转改为当前页跳转，只需要把window.open('自定义跳转地址', '_blank')替换为window.location.href = '自定义跳转地址'即可。
• 代码中所有自定义跳转地址都需要替换为你实际要跳转的目标地址。

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