FormSubmit无跳转表单提交失败及收不到邮件问题技术求助

一、实现表单提交不跳转（无刷新提交） #

FormSubmit默认会触发页面跳转，要实现无刷新提交，需用JS拦截表单默认行为，通过AJAX/fetch发送请求：

<form id="contact-form">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">提交</button>
</form>

<script>
const form = document.getElementById('contact-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止默认跳转行为
  
  const formData = new FormData(form);
  // 替换为你的FormSubmit目标URL（格式：https://formsubmit.co/你的收件邮箱）
  const response = await fetch('https://formsubmit.co/YOUR_TARGET_EMAIL', {
    method: 'POST',
    body: formData,
    headers: {
      'Accept': 'application/json' // 要求返回JSON响应，避免跳转
    }
  });

  const result = await response.json();
  if (result.success) {
    alert('提交成功！');
    form.reset(); // 重置表单
  } else {
    alert('提交失败，请重试：' + result.error);
  }
});
</script>

注意：确保fetch的URL是FormSubmit提供的正确地址，且所有表单字段都设置了name属性（FormSubmit依赖该属性识别字段）。

二、排查并解决收不到邮件的问题 #

1. 验证FormSubmit基础配置 #

• 确认已点击FormSubmit发送的激活邮件（优先检查垃圾邮件文件夹），未激活账户无法接收提交通知；
• 登录FormSubmit后台，核对收件邮箱是否正确，有无拼写错误。

2. 排除Netlify表单自动拦截干扰 #

Netlify会自动扫描并拦截网站表单，可能与FormSubmit冲突：

• 登录Netlify后台「Forms」页面，查看是否有该表单的提交记录：
  • 若有记录：说明表单提交到了Netlify而非FormSubmit，需在表单标签添加data-netlify="false"属性，禁用Netlify自动处理：

    <form id="contact-form" data-netlify="false">
      <!-- 表单字段 -->
    </form>
    

  • 若无记录：打开浏览器开发者工具（F12）的「Network」面板，提交表单时查看请求状态：
    • 404状态：检查FormSubmit的URL是否正确；
    • 403状态：可能是账户未激活或IP被限制；
    • 200状态但无邮件：继续下一步排查。

3. 检查邮箱过滤规则 #

• 登录收件邮箱，检查垃圾邮件、订阅邮件、归档文件夹，FormSubmit的通知邮件常被误判为垃圾邮件；
• 将FormSubmit发件邮箱（如notifications@formsubmit.co）添加到邮箱白名单。

4. 替代方案：改用Netlify原生表单处理 #

如果FormSubmit始终无法正常工作，推荐使用Netlify自带表单功能，适配性更好，同样支持无刷新提交：

1. 表单添加name属性和data-netlify="true"：

   <form name="contact-form" data-netlify="true" id="netlify-form">
     <!-- 表单字段 -->
   </form>
   

2. 用JS实现无刷新提交：

   <script>
   const form = document.getElementById('netlify-form');
   form.addEventListener('submit', async (e) => {
     e.preventDefault();
     const formData = new FormData(form);
     const response = await fetch('/', {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
       body: new URLSearchParams(formData).toString()
     });
     if (response.ok) {
       alert('提交成功！');
       form.reset();
     } else {
       alert('提交失败，请重试');
     }
   });
   </script>
   

3. 在Netlify后台「Forms」页面可查看所有提交记录，也可设置邮件通知（路径：Netlify后台→Forms→Notifications）。

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