如何禁用Formsubmit.co默认跳转并自定义错误提示/跳转地址

1. 自定义错误跳转地址 #

Formsubmit 原生支持自定义错误页，你只需要在表单代码中新增一个隐藏域即可，字段名为_error，值填写你自己的错误页地址mydomain.com/error.html，示例代码如下：

<input type="hidden" name="_error" value="https://mydomain.com/error.html">

配置完成后用户提交无效信息时，会直接跳转到你指定的错误页，不会再触发Formsubmit自带的提示页跳转。

2. 实现站内无跳转错误提示（AJAX方案，零基础可直接套用） #

如果要完全避免跳转，所有交互都在你的站点内完成，可以按以下步骤修改：

第一步：调整表单基础属性 #

删除原有表单上的action="https://formsubmit.co/你的邮箱"属性，给表单加唯一ID，比如id="contact-form"，同时给提交按钮也加唯一ID比如id="submit-btn"。

第二步：页面底部插入JS代码 #

直接复制以下代码，替换对应占位信息即可生效：

document.getElementById('contact-form').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认表单跳转逻辑
  const submitBtn = document.getElementById('submit-btn');
  const originalBtnText = submitBtn.innerText;
  submitBtn.innerText = '提交中...';
  submitBtn.disabled = true;

  try {
    const formData = new FormData(this);
    const response = await fetch('https://formsubmit.co/ajax/你的Formsubmit绑定邮箱', {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/json'
      }
    });
    const result = await response.json();
    if (result.success) {
      // 提交成功逻辑，可自行修改文案或自定义操作
      alert('提交成功！我们会尽快联系你');
      this.reset();
    } else {
      // 提交失败逻辑，可自行修改提示样式
      alert('提交失败：' + (result.error || '请检查填写的信息是否有效'));
    }
  } catch (error) {
    alert('网络异常，请稍后重试');
  } finally {
    submitBtn.innerText = originalBtnText;
    submitBtn.disabled = false;
  }
});

注意：需要将代码里的你的Formsubmit绑定邮箱替换为你实际绑定的邮箱地址，成功/失败的提示文案可根据需求自行修改，也可以替换为页面内自定义的提示框，无需使用alert弹窗。

3. 前置邮箱格式校验（可选，优化用户体验） #

可以在用户提交前就完成邮箱格式校验，无需等提交到服务端再报错，直接给邮箱输入框添加正则校验属性即可：

<input type="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效的邮箱地址，例如xxx@xxx.com">

添加后用户输入不符合格式的邮箱时，浏览器会直接弹出提示，不会触发提交逻辑。

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