添加弹窗表单
💡 本篇你将完成：添加一个弹窗表单，并让按钮点击后打开对应表单。预计 6 分钟。
弹窗表单适合用于 Get a Quote、Contact Us、Request Sample 这类需要访客提交信息的按钮。开始前，先在后台 表单 / Forms 中创建好要使用的表单。
先确认普通表单能收信
如果通知邮箱还没设置，或者普通表单提交后收不到邮件，先不要加很多弹窗表单。先去 站点基础设置 配置通知邮箱。
先找到操作入口
操作路径： AllinCMS 工作台站点列表 → 目标站点 → 进入后台 → 主题 → 当前主题页面 → Home 或目标页面
流程总览
1后台先建表单
2确认通知邮箱
3添加 Popup Form 模块
4按钮 Target 选 Action
5选择弹窗和表单
6预览提交测试
一、添加弹窗表单模块
进入页面设计器，在模块里找到 Form，选择 Contact Form (Split)。
也可以直接在 AI 对话里输入：
添加弹窗表单
弹窗刚添加时可能是空的
添加弹窗后，如果预览里只看到一个空弹窗，先不要以为是坏了。空弹窗通常是因为还没有给弹窗绑定具体表单。
选中弹窗图层，在右侧属性面板找到 Form / Props，选择已经在后台 表单 / Forms 里创建好的表单。选择后，姓名、邮箱、留言等字段才会显示在弹窗里。
一个页面先放 1 个主要弹窗。 新手不要在同一个页面放很多弹窗，先让最重要的 Get a Quote 或 Contact Us 按钮能打开表单。
二、设置按钮弹窗动作
先确认后台 表单 里已经创建好要使用的表单。
然后选中页面里的按钮或图层，在右侧属性里设置：
| 字段 | 选择 |
|---|---|
CTA Target / Target | Action |
| 动作类型 | 对应的弹窗动作 |
| 表单 | 选择要打开的表单 |
三、选择对应表单
点击弹窗图层后，在右侧 Props 里选择具体的表单。
这里的表单必须提前在后台 表单 / Forms 中创建好。没有提前创建，就可能在下拉选项里找不到。
四、预览测试
设置完成后，打开预览页面测试：
- 点击按钮，看弹窗是否打开。
- 确认弹窗里显示的是正确表单。
- 提交一次测试内容。
- 检查表单后台或通知邮箱是否收到提交。
不测试不要上线
弹窗能打开，不代表表单一定能收到。必须自己提交一次测试。
避坑汇总
| 坑 | 后果 | 怎么避 |
|---|---|---|
| 后台没有先建表单 | 弹窗里找不到表单 | 先到 表单 创建 |
| 弹窗打开是空的 | 还没有在右侧选择 Form | 选中弹窗图层，在右侧 Props 选择表单 |
Target 没选 Action | 按钮不会打开弹窗 | 按钮动作选择 Action |
| 只添加表单没绑定按钮 | 用户点不开 | 按钮和弹窗都要设置 |
| 不测试通知邮箱 | 客户提交后收不到 | 自己提交一次测试 |
接下来
📌 站点基础设置 —— 表单通知邮件要正常收到，记得配置通知邮箱。