如何为网站添加联系表单（并确保能收到消息）

要添加一个真正好用的联系表单，就做一个简短的表单（姓名、邮箱、留言），把它提交到一个服务器路由，由服务器校验输入内容，把留言保存到数据库，然后通过邮件服务商使用一个机密的 API 密钥向你发送通知。加上隐藏的蜜罐字段和频率限制，就能拦截大部分垃圾信息；显示清晰的成功提示；并在已发布的网站上完整地测试一遍。先保存、再发邮件才是关键：即使邮件出了问题，你仍然保留着这条咨询。

你的选择

如果你的网站已经有后端和数据库——用 AI 应用生成器做的应用通常都有——那么最后一种方案最可靠，而且能让咨询始终保存在你看得到的地方。

一个好的联系表单应包含什么

• 尽可能少的字段。 姓名、邮箱、留言。只有在你会按类别分配时，才添加主题下拉菜单（“销售”“支持”“其他”）。
• 每个字段上方都有清晰的标签，而不只是会消失的占位文字。
• 有帮助的校验提示：“请输入有效的邮箱地址”，显示在对应字段旁边。
• 成功状态，说明接下来会发生什么：“谢谢，我们会在一个工作日内回复。”
• 隐私说明，说明你将如何使用这些信息，并链接到你的隐私政策。
• 备用联系方式，例如你的邮箱或电话，供更喜欢这种方式的人使用。

示例提示词

基础表单：

在联系页面添加一个联系表单，包含姓名、邮箱和留言（全部必填，留言最多 2,000 个字符）。提交到一个服务器路由，该路由校验输入内容，将其保存到 contact_messages 表中并记录接收时间，然后显示成功提示：“谢谢，我们会在一个工作日内回复。”在字段旁边内联显示错误信息。确保在手机上使用体验良好。

邮件通知：

当联系留言保存后，使用 Resend 向 hello@example.com 发送一封通知邮件，密钥存放在 RESEND_API_KEY 中。将回复地址（reply-to）设为发件人的邮箱，以便我直接回复。如果发送失败，保留已保存的留言，并记录错误日志，但不要暴露密钥。

垃圾信息防护：

为联系表单添加垃圾信息防护：一个必须保持为空的隐藏蜜罐字段，服务器端限制每个 IP 每小时最多 5 次提交，并拒绝包含超过 3 个链接的留言。对于蜜罐字段被填写的提交，静默丢弃，但仍然显示成功提示。

收件箱：

添加一个受密码保护的管理页面，按最新在前的顺序列出联系留言，每条留言带有“已处理”复选框，并提供筛选未处理留言的功能。

分步操作

1. 决定留言发到哪里：谁接收通知，谁负责回复。
2. 构建表单，包含上面的字段、无障碍标签，以及适合移动端的输入框（使用 email 输入类型，这样手机会显示正确的键盘）。
3. 创建服务器路由。它检查必填字段、邮箱格式和长度限制。永远不要只依赖浏览器端的校验。
4. 先保存到数据库。 参见如何为应用添加数据库。
5. 设置邮件服务商。 创建账号，验证你的发件域名，并把 API 密钥存为机密。如何从应用发送邮件详细介绍了域名设置（SPF、DKIM）。
6. 保存后，由服务器发送通知。 使用已验证的域名作为发件人，并把访客的地址设为回复地址——不要把访客的地址作为“发件人”，否则很可能会被当作伪造发件而遭到拒绝。
7. 可选地自动回复访客，但内容要简短；如果对垃圾邮件地址发送自动回复，可能会损害你的发件信誉。
8. 添加垃圾信息防护：蜜罐、频率限制，必要时再加验证码式检查。
9. 在已发布的网站上测试：提交一条留言，检查数据库，检查你的收件箱和垃圾邮件文件夹，并点击回复。

防止垃圾信息

联系表单在上线几天内就会吸引机器人。请从最不打扰用户到最打扰用户的顺序，逐层设置防御：

1. 蜜罐字段。 对人隐藏的字段；机器人会去填写它。它不会给真实访客带来任何麻烦。
2. 服务器端频率限制。 限制同一地址在一段时间内能发送的留言数量。
3. 内容规则。 拒绝塞满链接的留言，或留言字段为空或超长的留言。
4. 验证码式检查，例如 Cloudflare Turnstile 或 Google reCAPTCHA。令牌必须在你的服务器上验证；只在浏览器中运行的检查可以被绕过。

常见错误

• 没有发送成功却显示“已发送！”。 界面在服务器响应之前或无论响应如何都显示成功。务必等待服务器确认。
• 只发邮件，不存数据库。 一个配置错误的密钥，就可能让咨询在几周内悄无声息地消失。
• API 密钥放在前端代码中。 任何人都可以用它以你的名义发送邮件。
• 发件域名未验证。 通知会进入垃圾邮件，或者根本收不到。
• 用访客的邮箱作为“发件人”。 应改用回复地址（reply-to）。
• 没有长度限制。 机器人会粘贴大段大段的文字。
• 从不在正式网站上测试。 预览环境和正式环境的密钥与域名往往不同。

检查清单

• 表单简短，标签可见，错误提示清晰
• 服务器端校验和长度限制
• 每条留言都保存到数据库
• 通知邮件从已验证的域名发送，并设置了回复地址
• 邮件 API 密钥只存放在服务端机密中
• 已设置蜜罐和频率限制
• 只有在服务器确认后才显示成功提示
• 隐私说明链接到你的隐私政策
• 在已发布的网站上完整测试过，包括垃圾邮件文件夹

Mythex 中的联系表单

在 Mythex 中，你可以通过聊天完成整个过程。在同一条提示中同时要求表单和数据库（或输入 /database），使提交内容被持久保存。Mythex 没有内置的邮件发送产品，因此对于通知，你需要接入 Resend、SendGrid 或 Postmark 等服务商，通过 /secrets 或项目设置添加其密钥，并要求智能体从服务器端发送。参见从你的应用发送邮件。在依赖它之前，请先在预览中对表单运行应用测试（/test），然后发布并在正式网址上测试。

联系表单是大多数小型企业网站和落地页的关键部分。上线前请查看安全检查清单。

常见问题