跳到主要内容

添加弹窗表单

💡 本篇你将完成：添加一个弹窗表单，并让按钮点击后打开对应表单。预计 6 分钟。

弹窗表单适合用于 Get a Quote、Contact Us、Request Sample 这类需要访客提交信息的按钮。开始前，先在后台 表单 / Forms 中创建好要使用的表单；如果要改字段、下拉选项、提交按钮文案，先看 表单修改教程。

先确认普通表单能收信

如果通知邮箱还没设置，或者普通表单提交后收不到邮件，先不要加很多弹窗表单。先去 站点基础设置 配置通知邮箱。

先找到操作入口​

操作路径： AllinCMS 工作台站点列表 → 目标站点 → 进入后台 → 主题 → 当前主题页面 → Home 或目标页面

1进入目标站点后台找到要编辑的网站，点击“进入后台”
AllinCMS 工作台站点列表 - 站点卡片中的进入后台按钮被红框标出
2进入“主题”，点击“页面”在当前启用的主题卡片中点击“页面”
AllinCMS 网站后台主题列表 - 左侧主题入口和启用主题卡片中的页面按钮被红框标出
3找到 Home 或目标页面在当前主题的页面列表中找到 Home 或要修改的页面
AllinCMS 网站后台主题页面列表 - 左侧主题菜单和 Home、产品、文章等目标页面可见

流程总览​

1后台先建表单
2确认通知邮箱
3添加 Popup Form 模块
4按钮 Target 选 Action
5选择弹窗和表单
6正文文字填 #id
7预览提交测试

一、添加弹窗表单模块​

进入页面设计器，在模块里找到 Form，选择 Contact Form (Split)。

也可以直接在 AI 对话里输入：

添加弹窗表单

AllinCMS 网站后台添加弹窗表单模块 - 在模块中找到 Form 并选择 Contact Form Split，或通过 AI 指令添加弹窗表单

弹窗刚添加时可能是空的

添加弹窗后，如果预览里只看到一个空弹窗，先不要以为是坏了。空弹窗通常是因为还没有给弹窗绑定具体表单。

选中弹窗图层，在右侧属性面板找到 Form / Props，选择已经在后台 表单 / Forms 里创建好的表单。选择后，姓名、邮箱、留言等字段才会显示在弹窗里。

AllinCMS 网站后台空白弹窗表单预览 - 弹窗已经打开但表单区域没有字段，用于提示需要在右侧属性面板选择 Form

一个页面先放 1 个主要弹窗。 新手不要在同一个页面放很多弹窗，先让最重要的 Get a Quote 或 Contact Us 按钮能打开表单。

二、设置按钮弹窗动作​

先确认后台 表单 里已经创建好要使用的表单。字段内容要在 表单修改教程 里处理，这里只负责让按钮打开弹窗。

然后选中页面里的按钮或图层，在右侧属性里设置：

字段选择
CTA Target / TargetAction
动作类型对应的弹窗动作
表单选择要打开的表单

AllinCMS 网站后台按钮弹窗动作设置 - 按钮或图层属性中把 CTA Target 设置为 Action，并选择对应弹窗和表单

三、选择对应表单​

点击弹窗图层后，在右侧 Props 里选择具体的表单。

这里的表单必须提前在后台 表单 / Forms 中创建好。没有提前创建，就可能在下拉选项里找不到。

AllinCMS 网站后台弹窗图层 Props 设置 - 选中弹窗图层后在右侧属性面板选择具体表单

AllinCMS 网站后台弹窗表单选择示例 - 在右侧 Props 中选择已经创建好的表单，用于绑定弹窗提交内容

四、产品和文章正文链接唤起表单​

可以。产品详情、文章正文里的文字链接，也可以直接打开弹窗表单。前提是：这个前台页面已经有弹窗表单模块，并且弹窗有自己的 Anchor ID。

先在页面设计器里找到弹窗 ID：

  1. 打开使用这个弹窗的页面，例如 Home 或产品/文章详情模板。
  2. 点击左侧的图层 / 状态按钮，找到 Canvas states 或 Overlays。
  3. 选中 Contact Dialog Form (Modal) 这类弹窗图层。
  4. 在右侧 Props 里查看 Anchor ID，例如 contact-form-dialog。
AllinCMS 页面设计器中查找弹窗 Anchor ID - 在 Canvas states 里选中 Contact Dialog Form，并在右侧 Props 看到 contact-form-dialog

然后回到产品或文章编辑器：

  1. 选中要让客户点击的文字，例如 获取报价、联系我们、Request a Quote。
  2. 点击编辑器里的链接按钮。
  3. 链接地址填写 # 加弹窗 ID，例如：
#contact-form-dialog
  1. 保存并发布后，打开前台产品详情或文章详情页测试。
AllinCMS 产品或文章正文编辑器中给选中文字添加弹窗链接 - 链接输入框填写 #contact-form-dialog
只记住这一句

先找到弹窗的 Anchor ID，再给正文里的文字链接填写 #id。如果 ID 是 contact-form-dialog，正文链接就填 #contact-form-dialog。

如果产品详情页或文章详情页没有这个弹窗模块，点击 #contact-form-dialog 不会打开表单。先把弹窗加到对应页面或对应详情模板里，再设置正文链接。

五、预览测试​

设置完成后，打开预览页面测试：

  1. 点击按钮，看弹窗是否打开。
  2. 确认弹窗里显示的是正确表单。
  3. 如果正文里也加了 #id 链接，打开产品详情或文章详情页，点击这段文字，看弹窗是否打开。
  4. 提交一次测试内容。
  5. 检查表单后台或通知邮箱是否收到提交。
不测试不要上线

弹窗能打开，不代表表单一定能收到。必须自己提交一次测试。

避坑汇总​

坑后果怎么避
后台没有先建表单弹窗里找不到表单先到 表单 创建
弹窗打开是空的还没有在右侧选择 Form选中弹窗图层，在右侧 Props 选择表单
Target 没选 Action按钮不会打开弹窗按钮动作选择 Action
只添加表单没绑定按钮用户点不开按钮和弹窗都要设置
正文链接少写 #产品或文章里点不开弹窗链接填写 #contact-form-dialog 这种格式
当前页面没有弹窗模块#id 找不到目标先把弹窗加到对应页面或详情模板
不测试通知邮箱客户提交后收不到自己提交一次测试

接下来​

📌 站点基础设置 —— 表单通知邮件要正常收到，记得配置通知邮箱。