表单多字段提交到Formspree的方法

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《隐藏表单提交多字段数据到 Formspree 的方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

本文详解如何在 Formspree 仅支持基础字段（如 email、message）的限制下，使用前端 JavaScript 将用户填写的多个表单字段（姓名、邮箱、电话、消息）自动聚合并提交至 Formspree 后端。

Formspree 默认仅将 <input name="email"> 和 <textarea name="message"> 等命名字段映射为邮件正文内容，不原生支持自定义字段（如 name 或 phone）。若需收集更多用户信息，推荐方案是复用这两个字段，将结构化数据拼接后注入 email 和 message——而非尝试动态修改表单 DOM 后提交（易因选择器错误或 DOM 未挂载导致失败）。

以下为经过验证的可靠实现：

✅ 正确结构：分离交互表单与提交表单

• 主表单（#firstForm）负责用户输入，无 action，纯前端交互；
• 隐藏提交表单（#secondForm）专用于 Formspree 提交，所有字段必须显式设置 id 并通过 getElementById 安全获取；
• 避免使用模糊的 querySelector('input[name="email"]')，防止因多个同名字段或渲染顺序引发定位错误。

<main>
  <div class="container">
    <p class="specialtext">Contact ME!</p>
    <form class="contactform" id="firstForm">
      &lt;input type=&quot;text&quot; id=&quot;name&quot; placeholder=&quot;Your Name&quot; required&gt;
      &lt;input type=&quot;email&quot; id=&quot;email&quot; placeholder=&quot;E-Mail&quot; required&gt;
      &lt;input type=&quot;text&quot; id=&quot;phoneno&quot; placeholder=&quot;Phone No.&quot;&gt;
      &lt;textarea id=&quot;message&quot; placeholder=&quot;Message&quot; cols=&quot;30&quot; rows=&quot;10&quot; required&gt;&lt;/textarea&gt;
      <button type="submit">SUBMIT</button>
    </form>
  </div>
</main>

<!-- 隐藏提交表单：确保 action 正确，且字段 id 唯一 -->
<form 
  action="https://formspree.io/f/xoqzgybd" 
  method="post" 
  id="secondForm" 
  hidden
>
  &lt;input type=&quot;email&quot; name=&quot;email&quot; id=&quot;email1&quot;&gt;
  &lt;textarea name=&quot;message&quot; id=&quot;message1&quot;&gt;&lt;/textarea&gt;
</form>

✅ 可靠脚本：精准赋值 + 换行拼接

注意关键修复点：

• 使用 getElementById 替代 querySelector，杜绝选择器歧义；
• 拼接消息时用 "\n"（非 "/n"），否则换行符失效；
• message 字段应包含全部非邮箱信息（姓名、电话、原始消息），提升可读性；
• email 字段严格传递用户输入的邮箱地址（Formspree 会将其作为发件人/收件人识别依据）。

document.getElementById('firstForm').addEventListener('submit', function(e) {
  e.preventDefault();

  const emailInput = document.getElementById('email');
  const nameInput = document.getElementById('name');
  const phoneInput = document.getElementById('phoneno');
  const messageInput = document.getElementById('message');

  // 写入隐藏表单
  document.getElementById('email1').value = emailInput.value;

  const fullMessage = [
    `Name: ${nameInput.value || 'Not provided'}`,
    `Phone: ${phoneInput.value || 'Not provided'}`,
    `Message:`,
    messageInput.value
  ].join('\n');

  document.getElementById('message1').value = fullMessage;

  // 触发提交
  document.getElementById('secondForm').submit();
});

⚠️ 注意事项

• ID 唯一性：确保 #email1 和 #message1 在整个页面中唯一，避免冲突；
• Formspree 配置：首次提交后需登录 Formspree 控制台验证邮箱，否则表单将被拦截；
• 移动端兼容性：
• 防重复提交：生产环境建议在 submit 后禁用按钮并添加加载状态，例如：

  const btn = e.target.querySelector('button[type="submit"]');
  btn.disabled = true;
  btn.textContent = 'Sending...';

该方案绕过 Formspree 的字段限制，无需后端代理，轻量、可靠、易于维护，是静态网站集成联系表单的最佳实践之一。

理论要掌握，实操不能落！以上关于《表单多字段提交到Formspree的方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！