# Formspree 联系表单配置指南

## ✅ 已完成内容

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

---

## 🔧 配置步骤（5 分钟）

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

1. 访问 [https://formspree.io/](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 行：

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

替换为您的实际表单 ID：

```javascript
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. 自定义重定向页面

提交后跳转到指定页面：

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

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

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

### 3. 添加更多字段

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

```html
<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
- [ ] 测试提交
- [ ] 验证邮件接收

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