Formspree联系表单无法提交数据至邮箱：JS逻辑排查与修复方案问询

我看了你的代码，问题主要出在当前JavaScript的几个关键逻辑上，咱们一步步拆解：

核心错误点 #

1. FormData格式错误 #

你当前代码里把FormData转成了普通对象：

let data = Object.fromEntries(new FormData(form).entries())

然后把这个普通对象作为body传给fetch，但Formspree需要接收原生FormData格式的请求（multipart/form-data），传普通对象会让请求变成JSON格式，Formspree无法解析，自然收不到邮件。

2. 重复的submit事件监听 #

你同时用了form.onsubmit和document.querySelector('form').addEventListener('submit')两个提交监听，第一个已经调用了e.preventDefault()，第二个监听的逻辑会和第一个冲突，而且重复做了表单验证，容易导致逻辑混乱。

3. HTML里的小瑕疵（不影响提交但不规范） #

第一个input的id是first name（带空格），和name属性firstname不一致，虽然不影响功能，但建议改成一致的firstname，避免后续DOM操作出问题。

修复后的完整JavaScript代码 #

咱们整合验证逻辑，保留错误动画，同时恢复Formspree的正常提交：

const form = document.forms.myform;

// 统一的表单提交处理函数
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  let validationOK = true;
  const formElements = Array.from(form.elements).filter(el => el.tagName === 'INPUT' || el.tagName === 'TEXTAREA');

  // 表单验证+错误动画
  formElements.forEach(el => {
    if (!el.checkValidity()) {
      validationOK = false;
      el.classList.add('shakingErr');
      setTimeout(() => {
        el.classList.remove('shakingErr');
      }, 820);
    } else {
      el.style.borderColor = 'initial';
    }
  });

  // 验证通过才提交
  if (validationOK) {
    const data = new FormData(form);
    await fetch(form.action, {
      method: form.method,
      body: data,
      headers: { Accept: 'application/json' }
    });
    // 跳转到感谢页
    window.location = "thankyou.html";
  }
});

// 输入框无效时的错误触发（可选，和submit里的验证重复，也可以保留）
function badEntrie({ target }) {
  target.classList.add('shakingErr');
  setTimeout(() => {
    target.classList.remove('shakingErr');
  }, 820);
}
myform.firstname.oninvalid = badEntrie;
myform.lastname.oninvalid = badEntrie;
myform.email.oninvalid = badEntrie;
myform.subject.oninvalid = badEntrie;

修复说明 #

• 移除了重复的submit监听，把验证和提交逻辑整合到同一个监听里
• 直接传递原生FormData给fetch，保证Formspree能正确解析请求
• 保留了你想要的错误抖动动画效果
• 可选保留了oninvalid事件触发的错误动画，和submit时的验证形成双重提示

HTML的小修改（建议） #

把第一个input的id改成和name一致：

<input type="text" id="firstname" name="firstname" placeholder="Your First Name.." required>

这样修改后，表单应该就能正常把数据发送到Formspree绑定的邮箱了，同时保留你的错误动画效果。

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