让访客能联系你：做一个真实可用的联系表单

作品集网站的终极目的是让别人找到你。一个好的联系表单，是把访客变成合作机会的关键。

这一关做一个真实可用的联系表单——不只是样子好看，还要有完整的验证和反馈。

表单设计的核心原则

一个好的联系表单，需要平衡两个目标：降低用户填写门槛 和 获取足够的信息。

字段太多，用户懒得填；字段太少，你收到的信息不够用。

对于作品集的联系表单，推荐的字段组合是：

• 姓名：知道是谁联系你
• 邮箱：回复的方式
• 主题：快速了解来意（合作/咨询/其他）
• 消息内容：具体说明

这四个字段足够了。不要加"公司名称""电话号码"这些可选字段——每多一个字段，表单提交率就会下降。

表单验证的两种时机

表单验证有两种触发时机：

提交时验证：用户点击提交按钮后，才检查所有字段。缺点是用户填了很多才发现第一个字段就填错了，体验差。

实时验证（失焦时）：用户离开某个字段时（失去焦点），立刻检查这个字段。用户能即时知道哪里填错了，体验更好。

这一关用"失焦时验证"——用户填完一个字段，移到下一个字段时，立刻显示验证结果。

第一步：做联系页面

对 AI 说：

创建一个联系页面（/contact）：

- 左侧：简短的联系说明文字，加上我的邮箱、GitHub 链接等联系方式
- 右侧：联系表单，包含以下字段：
  - 姓名（必填）
  - 邮箱（必填，需要验证格式）
  - 主题（必填）
  - 消息内容（必填，多行文本框，最少 20 字）
  - 提交按钮

- 在导航栏加上"联系"链接

---

第二步：加表单验证

对 AI 说：

给联系表单加上实时验证：

- 每个字段失去焦点时验证，不符合要求就在字段下方显示红色错误提示
- 邮箱格式不对时提示"请输入有效的邮箱地址"
- 消息内容不足 20 字时提示"消息至少需要 20 个字符，当前 X 个"
- 提交时如果有未填写的必填项，自动聚焦到第一个出错的字段
- 所有字段都通过验证后，提交按钮才变成可点击状态

在表单里故意填错，看看错误提示是否正确出现。

---

第三步：做提交反馈

对 AI 说：

给表单提交加上完整的状态反馈：

- 点击提交后，按钮变成"发送中..."并禁用，防止重复提交
- 模拟一个 1.5 秒的提交过程（用 setTimeout 模拟异步）
- 提交成功后：
  - 表单消失，显示一个成功状态（绿色图标 + "消息已发送！我会在 24 小时内回复你。"）
  - 有一个"发送新消息"按钮可以重置表单
- 如果提交失败（可以模拟 30% 概率失败）：
  - 显示红色错误提示"发送失败，请稍后重试"
  - 按钮恢复可点击状态

---

关于"防止重复提交"

表单提交时，一定要禁用提交按钮，防止用户重复点击。

这是一个很容易被忽略但很重要的细节。如果用户点了提交按钮，网络慢了一点，他可能会再点一次，导致同一条消息发送两次。

实现方式：提交时把按钮的 disabled 属性设为 true，提交完成（成功或失败）后再设回 false。

---

关于邮箱格式验证

邮箱格式验证通常用正则表达式：

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const isValidEmail = emailRegex.test(email);

这个正则不是完美的（世界上没有完美的邮箱正则），但能过滤掉大多数明显错误的格式，比如"abc"或"abc@"。

你不需要自己写这段代码，告诉 AI "验证邮箱格式"，它会帮你处理。

---

通关条件

完成以下三步即可通关：

1. 联系页面可以正常访问，导航栏有链接
2. 表单验证正常工作（填错会有提示）
3. 提交后有明确的成功或失败反馈

卡住了？

• 验证逻辑复杂？让 AI 用 React Hook Form 或者简单的 useState 来管理，不需要手写复杂逻辑
• 成功状态不显示？让 AI 检查状态变量是否正确更新
• 想让表单真的能发邮件？下一章会讲 API 路由，到时候可以接入真实的邮件服务
• 提交按钮一直是禁用状态？让 AI 检查验证逻辑，确认所有字段都有值时按钮才启用