zyuas.com/FORMSPREE_SETUP.md

Formspree 联系表单配置指南

✅ 已完成内容

• ✅ 移除 EmailJS 依赖
• ✅ 切换到 Formspree（更简单）
• ✅ 无需配置邮箱连接
• ✅ 无需模板变量

---

🔧 配置步骤（5 分钟）

第 1 步：注册 Formspree（2 分钟）

1. 访问 https://formspree.io/
2. 点击 "Get Started" 或 "Sign Up"
3. 使用邮箱免费注册
4. 验证邮箱

第 2 步：创建表单（2 分钟）

1. 登录后进入 Dashboard
2. 点击 "+ New Form"
3. 填写表单名称（如：联系表单）
4. 选择 "Send emails to" → 输入接收邮箱 zhanyuhangkong@163.com
5. 点击 "Create Form"

第 3 步：获取表单 ID（1 分钟）

1. 创建成功后，会看到表单 URL
2. 格式类似：https://formspree.io/f/xnqkzoqw
3. 复制最后的 ID（如 xnqkzoqw）

第 4 步：配置代码

打开 src/view/ContactUs/Index.vue，找到第 212 行：

formspreeUrl: 'https://formspree.io/f/YOUR_FORMSPREE_ID'

替换为您的实际表单 ID：

formspreeUrl: 'https://formspree.io/f/xnqkzoqw'  // 您的实际 ID

---

📊 Formspree 免费额度

项目	免费额度	说明
邮件发送	50 封/月	足够小型企业
存储	100 条提交	可在后台查看
功能	基础功能	包含所有必需功能

升级方案

如需要更多额度：

• Silver: $10/月 - 1000 封邮件
• Gold: $25/月 - 2500 封邮件
• 企业定制方案

---

🎯 测试步骤

1. 配置表单 ID 后保存代码
2. 重启开发服务器（如需要）
3. 访问联系我们页面
4. 填写表单并提交
5. 查看邮箱是否收到邮件

---

📧 邮件内容

提交后，您会在邮箱收到如下格式的邮件：

From: 联系人姓名 <联系人邮箱>
Reply-To: 联系人邮箱

姓名：张三
电话：13800138000
邮箱：zhangsan@example.com
企业：某某公司
主题：产品咨询
留言：我对你们的产品很感兴趣...

---

🔒 安全特性

Formspree 自带保护

• ✅ 垃圾邮件过滤
• ✅ 重复提交检测
• ✅ HTTPS 加密传输

建议添加（可选）

• Google reCAPTCHA（防止机器人）
• 邮箱域名白名单
• 提交频率限制

---

⚙️ 高级功能

1. 自定义重定向页面

提交后跳转到指定页面：

formData: {
  ...
  _next: 'https://yourwebsite.com/thanks'
}

2. 启用 AJAX 模式（已启用）

代码已使用 AJAX 提交，无需页面刷新。

3. 添加更多字段

在表单中添加新字段，Formspree 会自动接收：

<input name="custom_field" v-model="formData.customField">

---

⚠️ 常见问题

Q1: 收不到邮件？

A: 检查：

1. 垃圾邮件文件夹
2. Formspree Dashboard 的提交记录
3. 邮箱是否正确配置

Q2: 提交失败？

A: 检查：

1. 表单 ID 是否正确
2. 网络连接
3. 浏览器控制台错误

Q3: 如何查看提交的表单？

A: 登录 Formspree Dashboard → 选择表单 → 查看 "Submissions"

---

📞 技术支持

• Formspree 文档：https://help.formspree.io/
• 状态页面：https://status.formspree.io/

---

✅ 配置检查清单

• 注册 Formspree 账号
• 创建新表单
• 配置接收邮箱
• 复制表单 ID
• 替换代码中的表单 ID
• 测试提交
• 验证邮件接收

完成以上步骤后，联系表单即可正常工作！