表单多字段提交到Formspree的方法
时间：2026-01-14 11:36:42 376浏览 收藏
“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《隐藏表单提交多字段数据到 Formspree 的方法》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！
本文详解如何在 Formspree 仅支持基础字段（如 email、message）的限制下，使用前端 JavaScript 将用户填写的多个表单字段（姓名、邮箱、电话、消息）自动聚合并提交至 Formspree 后端。
Formspree 默认仅将 和
✅ 可靠脚本：精准赋值 + 换行拼接
注意关键修复点：
- 使用 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学习网公众号吧！
