嵌入托管表单
将 Zalify 表单嵌入页脚、侧栏或落地页，复用列表订阅和线索追踪流程。
托管内嵌表单直接显示在页面指定位置，而不是弹出。它与弹窗共用编辑器、列表收集和线索追踪，区别在于显示方式。
内嵌表单与弹窗
| 项目 | 弹窗 | 内嵌表单 |
|---|---|---|
| 位置 | 居中浮层或角落卡片 | 指定页面容器 |
| 样式隔离 | Shadow DOM | 默认不隔离，页面 CSS 直接生效 |
| 加载时机 | 首次 show_popup | 首次 display_form |
| 运行时 | popup.js | form.js |
必须设置为内嵌形式
在 Zalify 编辑器中选择 inline，使表单编译为 surface: "form"（display: { mode: "inline" }）。编译为 modal 或 corner 的弹窗不能直接走内嵌显示路径。
开始前
- 已创建并设置为 inline 的表单。
- 如需收集订阅，准备客户列表。
- 页面上有可通过 CSS 选择器定位的稳定容器。
添加挂载位置
在需要显示的位置加入：
<div id="zalify-footer-signup"></div>
配置 display_form 操作
在 Zalify 中配置：
{
"type": "display_form",
"params": {
"form_id": "clniphba00xwkok1qmkyip597",
"selector": "#zalify-footer-signup",
"mode": "replace"
}
}
form_id： 必填，要展示的表单。selector： 必填，挂载容器的 CSS 选择器。mode： 可选，replace（默认）、append或prepend。shadow： 可选，默认false；需要样式隔离时设为true。
支持客户端渲染页面
运行时会短暂等待选择器出现，因此也能挂载到 React、Vue 等框架动态生成的容器。
加载流程
首次执行 display_form 时：
1
从 https://cdn.zalify.com 按需加载 form.js。
2
从 https://app.zalify.com/api/v1/forms/<wid>/<form_id> 获取文档。
3
按指定 mode 将 HTML 挂载到容器。
4
使用与弹窗相同的提交机制连接字段。
使用页面样式
默认没有 Shadow DOM，主题 CSS 可直接影响表单，使它融入页面。如已有样式干扰布局，可设置 shadow: true 隔离。
收集线索
与弹窗表单共用提交流程：
- 标准字段包括
email、phone、firstName、lastName、language、emailMarketingConsent、smsMarketingConsent。其他字段不参与标准联系人映射；原始提交载荷保存在 Submission 中。 - 订阅时包含
subscribe: { list_id, email_marketing_consent }，可加入列表并接续自动化流程。 - 提交时先触发
form_submitted，POST 到https://reach.zalify.com/v1/public/unisubmit，收到2xx后触发lead。 data-zalify-form-state按idle → submitting → success | error更新，可据此设置 CSS。
事件和状态详见弹窗表单说明。
授权与测试
- 配置
consentRequired=true后，授权前不会渲染或提交。此前的display_form调用进入队列，授权后处理，见授权配置。 - 预览模式
?zalify-preview=true会跳过授权限制，便于内部测试。
内容安全策略
如启用 CSP，请允许 script-src https://cdn.zalify.com，确保 form.js 能加载。