如何通过隐藏表单动态提交多字段数据到 Formspree

本文介绍一种实用技巧：使用前端 javascript 将用户在主表单中填写的多个字段（如姓名、邮箱、电话、消息）自动拼接并注入隐藏的 formspree 表单，再触发提交，从而绕过 formspree 对 `name` 属性字段数量的隐式限制。

Formspree 默认仅将带有 name 属性的 或 字段作为有效表单数据接收（如 email 和 message），但其免费版对可识别字段数并无硬性限制——真正的问题在于：<strong>你不能在目标表单（secondForm）中遗漏对应 name 属性，也不能在 JS 中错误选取或赋值 DOM 元素</strong>。

在原始代码中，存在几个关键缺陷：

• secondForm 中的 缺少 id，导致 querySelector('#secondForm input[name="email"]') 无法稳定定位（尤其当页面有其他同名字段时）；
• 拼接消息时误用 "/n"（字符串字面量），应为换行符 "\n"；
• secondForm 未设为 hidden，虽不影响功能，但暴露冗余 DOM，易引发样式或调试干扰；
• 原始 message 拼接逻辑将姓名、电话、留言强行合并进单一 message 字段，但未确保各字段间有清晰分隔，影响后端可读性。

✅ 推荐方案采用显式 id 绑定 + 隐藏表单 + 安全字符串拼接，结构更健壮、易维护：

  
    
Contact ME!
    

      
      
      
      
      SUBMIT
    
  

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

  const emailVal = document.getElementById('email').value;
  const nameVal = document.getElementById('name').value || 'Not provided';
  const phoneVal = document.getElementById('phoneno').value || 'Not provided';
  const messageVal = document.getElementById('message').value || '';

  // 使用 \n 实现真实换行（非字符串 "/n"）
  const fullMessage = [
    `Name: ${nameVal}`,
    `Phone: ${phoneVal}`,
    `Message:`,
    messageVal
  ].join('\n');

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

  document.getElementById('secondForm').submit();
});

? 注意事项与最佳实践：

• ✅ 务必为 secondForm 中所有需赋值的字段添加唯一 id（如 email1、message1），避免 querySelector 因选择器模糊导致赋值失败；
• ✅ 使用 hidden 属性（或 style="display:none"）隐藏辅助表单，防止被意外渲染或交互；
• ✅ 对空字段做兜底处理（如 || 'Not provided'），避免提交 undefined 或空白行破坏格式；
• ✅ Formspree 后台收到的数据将以 email 和 message 两个键呈现，其中 message 包含结构化文本，便于人工查阅或简单解析；
• ⚠️ 不要尝试通过 JS 动态修改 action URL 或伪造 method——Formspree 严格校验 Origin 和 Referrer，仅支持标准 POST 提交。

该方案轻量、兼容性强，无需后端代理或额外依赖，是静态网站集成 Formspree 多字段联系表单的推荐模式。