全部文章

如何为 AI 生成的静态网站添加可用的联系表单

你让 AI 给网站加一个联系表单,它也认真地做出了包含姓名、邮箱和留言字段的表单。可是当你或访客点击“发送”时,什么都没发生,或者出现了错误。这不是 AI 的错,而是静态网站的基本特性。下面介绍正确的解决方法。

为什么静态表单本身无法工作

静态网站只是一些 HTML 文件,正是 AI 工具生成的那种。它背后没有运行代码的服务器来接收表单、保存数据并通过邮件发给你。表单看起来没问题,但“发送”按钮根本没有地方可以提交。要让表单真正工作,接收端必须有东西来处理它。

过去,这意味着要编写后端代码(PHP、Node 等)并维护服务器。对非技术用户来说门槛太高。现代的解决方案是表单接收端点,由它替你完成接收工作。

简单方案:表单接收端点

表单端点是一个网址,它接收表单数据、保存下来并通知你,而你不需要运行任何服务器。把表单指向这个地址,一切就能正常工作。很多托管服务都自带这个功能。在 Hostilo 上,每个网站都内置表单端点,因此不需要额外的服务。

操作步骤

1. 获取表单代码

复制一个提交到端点、并包含你网站唯一令牌的表单,形式如下:

<form action="https://hostilo.app/api_form.php" method="POST">
  <input type="hidden" name="site_token" value="你的唯一令牌">
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">发送</button>
</form>

2. 填入你的令牌

site_token 用来把留言和你的网站关联起来。已填好令牌的现成代码位于网站编辑器的“设置”标签页中。正是这一项让表单属于你。

3. 粘贴到页面中

把表单放到 HTML 中你想显示的位置,然后保存并发布。完成,表单已经上线并可以使用。

提示

如果 AI 已经帮你设计好了表单样式,可以保留原有设计。只要确保 action 指向端点,并包含隐藏的 site_token 字段即可。

留言会发到哪里?

有人填写表单后,留言会通过邮件发送给你,同时保存在你的控制面板中,即使某封邮件丢失也能查到记录。无需查看其他服务,一切都在一个地方。

垃圾信息怎么办?

公开表单会吸引垃圾机器人。好的端点会内置蜜罐(honeypot):一个人类永远不会填写、但机器人会填写的隐藏字段。一旦蜜罐被填写,提交就会被悄悄拒绝。这样可以拦截大部分自动垃圾信息,而不必用验证码打扰真实访客。

常见问题

添加可用的表单需要会写代码吗?
不需要。粘贴一段代码并填入令牌即可。无需后端、无需服务器、无需编写代码。

可以自定义表单的外观吗?
可以。表单就是普通的 HTML,你可以随意设计样式,也可以保留 AI 生成的设计。只需保留 action 地址和隐藏的令牌字段。

我会通过邮件收到留言吗?
会。留言会发送到你的邮箱,同时作为备份保存在控制面板中。

如何处理垃圾信息?
内置的蜜罐字段会自动识别并拦截大多数机器人,因此不需要验证码。

准备好让你的 AI 网站上线了吗?

粘贴 ChatGPT 或 Claude 生成的代码,点击保存,几秒钟内获得带 HTTPS 的在线链接。免费开始,无需信用卡。

免费发布你的网站

更多博客文章