如何移除FormSubmit默认致谢跳转页 实现自定义表单提交成功提示

方案1：异步提交（无跳转，最推荐） #

完全绕过原生表单的跳转逻辑，提交后直接触发自定义提示，修改步骤如下：

1. 给现有表单添加id属性，方便JS选择：

<form id="contactForm" action="https://formsubmit.co/myemail@gmail.com" method="POST">
  <div class="form-group">
    <label for="Nombre"> 姓名</label>
    <input type="text" id="firstName" name="Nombre" required>
    <input type="hidden" name="_subject" value="新的网站咨询">
  </div>
  <div class="form-group">
    <label for="Apellido">姓氏</label>
    <input type="text" id="lastName" name="Apellido" required>
  </div>
  <div class="form-group">
    <label for="Email">邮箱</label>
    <input type="email" id="email" name="Email" required>
  </div>
  <div class="form-group">
    <label for="Mensaje">留言</label>
    <textarea name="Mensaje" id="message" cols="30" rows="3" placeholder="请输入你的留言" required></textarea>
  </div>
  <input type="hidden" name="_captcha" value="false">
  <button type="submit">提交</button>
  <input type="hidden" name="_template" value="table">
  <input type="hidden" name="_next" value=" ">
</form>

2. 新增表单提交事件监听代码，阻止默认跳转、异步提交：

document.querySelector('#contactForm').addEventListener('submit', function(e) {
  // 阻止原生表单默认跳转行为
  e.preventDefault();
  const submitBtn = this.querySelector('button[type="submit"]');
  // 提交中置灰按钮，避免重复提交
  submitBtn.disabled = true;
  submitBtn.textContent = '提交中...';

  fetch(this.action, {
    method: 'POST',
    body: new FormData(this),
    headers: {
      'Accept': 'application/json'
    }
  }).then(res => {
    if (res.ok) {
      // 调用你已实现的成功提示函数
      yourSuccessFunction();
      // 重置表单
      this.reset();
    } else {
      // 调用失败提示函数
      yourErrorFunction();
    }
  }).catch(() => {
    yourErrorFunction();
  }).finally(() => {
    // 恢复按钮状态
    submitBtn.disabled = false;
    submitBtn.textContent = '提交';
  })
})

方案2：自定义跳转回当前页 #

如果不想修改提交逻辑，可利用FormSubmit的_next参数实现跳转回当前页，再触发提示：

1. 修改现有_next隐藏字段的value值，替换为你当前表单页面的完整URL，可加自定义参数用于判断提交状态：

<input type="hidden" name="_next" value="https://你的表单页面完整地址?submit=success">

2. 页面加载时判断是否为提交成功后跳转回来的状态，触发提示：

window.addEventListener('load', () => {
  const searchParams = new URLSearchParams(window.location.search);
  if (searchParams.get('submit') === 'success') {
    // 调用你已实现的成功提示函数
    yourSuccessFunction();
    // 移除URL参数，避免刷新页面重复触发提示
    history.replaceState({}, document.title, window.location.pathname);
  }
})

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