怎么给AI建站加上表单收集和数据分析功能？

照着做完，你的 AI 生成站点就能真正收到用户提交的信息，并在后台看清每天来了多少人、从哪来、有多少人填了表单。

第一步：先确认技术栈和部署位置，决定走哪条路

这一步要搞清楚你的站点是什么框架、部署在哪，因为它决定了后面表单和分析工具怎么接。打开你的项目根目录，看有没有 package.json，里面有 "next" 就是 Next.js；再看有没有 app/layout.tsx（App Router）或 pages/_app.tsx（Pages Router）。部署平台打开 vercel.com，进入你的项目，看 Settings → General 里的 Framework Preset。

如果是纯静态 HTML（AI 直接吐给你一个 index.html），后面步骤照样能走，只是代码放在 <body> 结束标签前。

第二步：用 Formspree 接表单，不用自己写后端

这一步做完，你的表单会有一个真实的接收地址，提交内容直接进你的邮箱和后台。打开 formspree.io 注册免费账号，点左上角 + New Form，Form Name 填 contact，点 Create Form。进入表单详情页的 Integration 标签，复制那串 https://formspree.io/f/xxxxxxxx 地址。

回到 AI 生成的表单代码。AI 生成的表单十有八九是假的，通常是 onSubmit={(e) => e.preventDefault()} 或者按钮 type="button"。改成正经的原生提交：

<form action="https://formspree.io/f/xxxxxxxx" method="POST">
  <input type="email" name="email" required placeholder="你的邮箱" />
  <textarea name="message" placeholder="想说的话" />
  <button type="submit">提交</button>
</form>

name 属性必须写，它决定邮件里显示的字段名。改完 git push，等 Vercel 自动部署完成。

注意：Formspree 免费版每月 50 次提交，超出后提交会被拒。做正式项目要么升级（$10/月起），要么换成 Supabase —— 建一张 leads 表，用 @supabase/supabase-js 的 insert() 写入，前端用 anon key 就行，但必须在 Supabase 后台 Authentication → Policies 里给这张表开 RLS 并加一条 INSERT 允许策略，否则写入会被静默拒绝。

第三步：真机提交一次，确认数据能落地

打开你的线上网址，填一遍表单点提交。正常跳转到 Formspree 的感谢页或原地显示成功。回 formspree.io，进入该表单的 Submissions 标签，应该能看到刚才那条记录。

如果报 404，检查 endpoint 地址末尾有没有多空格；如果报 422，说明缺少 email 这类必填字段。

第四步：接入 GA4 看访问量

打开 analytics.google.com，左下角点齿轮图标的管理 → 创建 → 媒体资源，填资源名称、时区选中国、货币选人民币。下一步选平台时选网站，填你的域名和流名称，创建后会拿到一个 G-XXXXXXXXXX 的衡量 ID，记下来。

Next.js 项目里装官方包：

npm install @next/third-parties

在 app/layout.tsx 里加：

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html lang="zh">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </html>
  )
}

部署后打开 GA4 的报告 → 实时，用手机访问你的网站，能看到「过去 30 分钟内有 1 位用户」就成功了。

注意：本地 npm run dev 跑的 localhost 也会往 GA4 发数据，会污染统计。建议只在生产环境挂这个组件，用 process.env.NODE_ENV === 'production' && <GoogleAnalytics ... /> 包一层。

第五步：把「表单提交成功」上报成转化事件

光看访问量没用，你要知道多少人真的填了。把第二步的表单改成 JS 提交：

onSubmit={async (e) => {
  e.preventDefault()
  const res = await fetch('https://formspree.io/f/xxxxxxxx', {
    method: 'POST',
    headers: { Accept: 'application/json' },
    body: new FormData(e.currentTarget),
  })
  if (res.ok) {
    window.gtag?.('event', 'generate_lead', { form_name: 'contact' })
    alert('提交成功，我们会尽快联系你')
  }
}}

注意：window.gtag 在 GA 脚本加载完成前是 undefined，必须用可选链 ?.，否则用户手速快时页面直接报错白屏。

第六步：在 GA4 后台把事件标记为转化

回 GA4，点管理 → 事件，等 24 小时左右（首次上报后通常几小时内出现）能看到 generate_lead。把它右侧的开关打开标为「转化」。之后在报告 → 互动度 → 转化里，就能看到每天有多少人提交表单，也可以按来源渠道拆开看哪个渠道的转化最好。

小结

• AI 生成的表单几乎都是假提交，必须换成真实 action 或 fetch
• Formspree 零后端最快，Supabase 更自由但要自己开 RLS 策略
• GA4 的 G- ID 和 Formspree 的 endpoint 都写死在代码里，换环境记得同步
• window.gtag?.() 的可选链不能省
• 只在生产环境挂 GA 组件，否则本地调试数据会污染报表
• 事件必须手动标为「转化」，否则不会出现在转化报表里