# 创建并嵌入订阅表单

Pushwoosh 让您可以灵活地为不同的注册场景创建订阅表单，自定义您收集的字段，并以模态或内联小组件的形式在您的网站上显示表单。

## 如何构建表单

要创建新的订阅表单：

1. 前往 **Audience → Subscription forms**。
2. 点击 **Create form**。

<img src="/subscription-forms-1.webp" alt="订阅表单页面，包含双重选择加入和订阅表单卡片、如何使用链接以及创建表单按钮"/>  
3. 配置表单。右侧会显示实时预览，并随着您更改设置而更新。

### 配置常规设置

配置以下字段。

> **本节中的所有字段均为必填项。**

- **内部表单名称：** 仅在 Pushwoosh 内部使用，不会向订阅者显示。例如：“时事通讯注册”。
- **显示类型：** 选择表单在您网站上的显示方式：
  - **模态弹窗：** 一种弹窗覆盖层，当您设置的 **触发器** 触发时（例如 **立即** 或几秒钟后，请参阅[设置模态弹窗时机](#set-modal-popup-timing)），它会出现在页面顶部。适用于您希望访问者注意到的时事通讯注册或促销优惠。
  - **内联嵌入：** 表单位于您的页面内容中（例如，在侧边栏或文章底部）。访问者会将其视为页面布局的一部分，而不是一个单独的弹窗。
- **隐私政策 URL：** 表单会显示一个同意复选框（“我同意隐私政策”），该复选框链接到此 URL。例如：`https://example.com/policy`。


<img src="/subscription-forms-2.webp" alt="创建订阅表单界面，包含内部表单名称、显示类型、隐私政策 URL 和表单字段配置"/>


#### 设置模态弹窗时机

仅适用于 **模态弹窗**：

1. 定义弹窗在页面上出现的时间。在 **Trigger** 下拉菜单中选择：
  - **立即** (默认)
  - 3 秒后
  - 5 秒后
  - 10 秒后
2. 在 **Frequency** 下拉菜单中选择每位访问者看到弹窗的频率：
  - **每位访问者一次** (默认)：每个设备一次
  - **每个会话一次**：每个浏览器会话一次
  - **始终**：每次访问页面时

<img src="/subscription-forms-3.webp" alt="创建订阅表单，包含模态弹窗显示类型、触发器和频率下拉菜单以及添加字段按钮"/> 

### 配置表单字段

每个表单默认包含一个 **Email** 字段（无法移除）。您最多可以再添加四个字段，总共五个。

点击 **+ First name**、**+ Last name**、**+ Phone number** 或 **+ Custom field** 来添加它们。

<Aside type="note">
来自这些内置字段的值会保存到标准 Tag 中：`first_name`、`last_name` 和 `phone`。自定义字段会将其值保存到您在 **Linked tag** 设置中选择的 Tag。
</Aside>

对于每个字段，如果访问者必须填写，请勾选 **Required**（必填字段会显示星号 `*`）。使用垃圾桶图标移除字段。

<img src="/subscription-forms-4.webp" alt="表单字段列表，包含电子邮件、名字、电话号码、姓氏、城市以及所选字段的字段配置"/>

#### 创建自定义字段

1. 在字段列表中点击 **+ Custom field**。
2. 在 **Linked tag** 下，选择将存储从此字段提交的值的 Pushwoosh Tag（例如 `birthday`）。您需要提前创建该 Tag。
3. 设置 **Field label**：访问者在输入框旁边看到的文本（例如 `出生日期`）。
4. （可选）设置 **Placeholder (optional)**：空字段内的提示文本（例如 `月/日/年`）。
5. 打开或关闭 **Required**。

<img src="/subscription-forms-7.webp" alt="自定义字段配置，包含关联的 Tag、字段标签、占位符和必填复选框"/>

### 自定义表单标签

默认情况下，所有表单文本均为英文。要将表单翻译成其他语言或更改任何措辞，请点击实时预览下方的 **Customize labels**。

<img src="/subscription-forms-16.webp" alt="自定义表单标签对话框，包含标题、按钮、隐私政策文本、隐私政策链接文本、成功消息、双重选择加入消息、电子邮件标签和电子邮件占位符字段"/>

在 **Customize form labels** 对话框中，您可以编辑：

- **标题**
- **按钮**
- **隐私政策文本**
- **隐私政策链接文本**
- **成功消息**
- **双重选择加入消息** (仅在启用双重选择加入时适用)
- 每个表单字段的 **标签** 和可选的 **占位符**

点击 **Save** 应用您的更改。更改会立即显示在实时预览中。在您保存或发布订阅表单后，已发布的表单会更新。

### 预览并保存表单

实时预览会出现在“创建订阅表单”界面的右侧，并随着您更改设置而更新。使用预览下方的 **Reset preview** 恢复默认预览状态。

<Aside type="note">
来自 **Preview** 的测试提交不会在您的项目中创建订阅者。
</Aside>

<img src="/subscription-forms-5.webp" alt="创建订阅表单，右侧有实时预览，预览下方有重置预览按钮，右上角有创建按钮"/>

完成表单配置后，点击右上角的 **Create**。

### 复制嵌入代码并添加到您的网站

<Aside type="caution" icon="setting" title="需要开发者协助">
您将需要开发团队的协助才能将嵌入代码添加到您的网站。
</Aside>

一个对话框会打开，其中包含您表单的嵌入代码。点击 **Copy code** 将代码片段复制到剪贴板。

<img src="/subscription-forms-11.webp" alt="模态表单代码对话框，包含脚本片段、在关闭 body 标签前粘贴的说明以及复制代码按钮"/>

#### 在网站何处粘贴嵌入代码

将脚本添加到应运行的页面 HTML 中。

- 对于 **模态弹窗**，通常的做法是将脚本放在结束的 `</body>` 标签之前。

- 对于 **内联嵌入**，将代码片段放在您希望表单块出现的确切标记位置。

<Aside type="tip" title="使用 CSS 自定义小组件">
您可以通过在 `pushwoosh-subscribe-widget` 元素上设置 CSS 自定义属性来覆盖您网站上的默认样式（颜色、排版、间距和模态框）。[了解更多](/zh/product/audience-data-and-segmentation/subscription-forms/customize-widget/)。
</Aside>

### 不同显示类型在您网站上的外观

这些示例展示了每种表单类型在实际页面上的显示效果。字段标签和必填标记与您在表单构建器中配置的相匹配。

<Tabs>
<TabItem label="模态弹窗">

<img src="/subscription-forms-14.webp" alt="网页上的模态时事通讯注册覆盖层，包含电子邮件、姓名、电话字段、隐私政策复选框和订阅按钮"/>

</TabItem>
<TabItem label="内联嵌入">

<img src="/subscription-forms-15.webp" alt="页面正文中的内联时事通讯注册表单，包含电子邮件、姓名、电话字段、隐私复选框和订阅按钮"/>

</TabItem>
</Tabs>

## 后续步骤

- [启用双重选择加入](/zh/product/audience-data-and-segmentation/subscription-forms/double-opt-in/)，要求在添加订阅者前进行电子邮件确认
- [自定义订阅表单小组件](/zh/product/audience-data-and-segmentation/subscription-forms/customize-widget/)，使表单与您的网站匹配
- [审查表单性能并导出订阅者](/zh/product/audience-data-and-segmentation/subscription-forms/form-analytics-and-export/)，以跟踪结果并下载订阅者数据