---
title: 如何创建订阅表格？
description: 使用订阅表格是收集网站或者社交媒体订阅者名单的极佳工具。通过 Benchmark…
url: "https://www.benchmarkedm.cn/docs/how-do-i-create-a-sign-up-form-for-my-website/"
updated: "2025-05-22"
category: 订阅表格
---

# 如何创建订阅表格？

使用订阅表格是收集网站或者社交媒体订阅者名单的极佳工具。通过 Benchmark Email 订阅表格功能，创建不同类型的订阅表格，在此篇文章中，我们会详细介绍建立订阅表格的步骤。

点击下方选择想要建立的订阅表格。

- [内嵌式订阅表格（进阶）](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#embedded)
- [内嵌式订阅表格](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#small)
- [水平排列内嵌式订阅表格](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#horizontal-form)
- [弹出式订阅表格](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#popup)
- [已经成功订阅的用户还会看到弹出式订阅表格吗？](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#once)
- [一般式订阅表格](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#classic)
- [符合 GDPR 规定的订阅表格](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#gdpr)

**开始建立订阅表格之前，请浏览以下事项：**

- **免费**试用账户每天最多可收集 75 位联络人。
- **付费**账户没有收集限制。
- 使用旧介面的客户无法使用嵌入式订阅表格（进阶）。
- 新介面嵌入式订阅表格取代原本的一般式订阅表格，功能保持相同。
- 嵌入式订阅表格，如其名称，搭配其他设计并嵌入于网页特定区域中。
- 如果您需要删除订阅表格的某一部分，打开订阅表格编辑器，并移动鼠标到特定的区域，可以看到垃圾桶图标。点击后，可以删除此部分。
- 截止 2018 年 9 月，**谷歌**服务在中国大陆仍然被封锁。由于这些限制，在中国地区访客可能无法正常使用 **reCaptcha** 验证码功能。[点击此处](https://en.wikipedia.org/wiki/Websites_blocked_in_mainland_China)了解更多详细资讯。
- **Javascript 代码订阅表格**（包含网站追踪）：更改或更新 javascript 代码订阅表格会自动同步到网站的订阅表格。
- **HTML 代码订阅表格**（包含网站追踪）更改或更新 HTML 代码订阅表格**不会**自动同步到网站的订阅表格。想要看到新更改地方，需要再次保存并发布表格，复制新的 HTML 代码，最后贴新的代码到网站。

 

###

 

##### **内嵌式订阅表格（进阶）**

以下是建立这款订阅表格的步骤：

1. 在首页总览列表中选择**「联络人」**。
2. 现在，从总览列表中点击**「订阅表格」**。
3. 然后，点击页面右上方的**「新增订阅表格」**按钮。
4. 选择内嵌式订阅表格（进阶），点击**「下一步」**。
5. 命名订阅表格名称，并选择联络人名单。然后点击**「保存及下一步」**。
6. 创建并编辑订阅表格
   - 点击左上方的「订阅设置」，可以编辑「订阅设置」讯息。
   - 将鼠标移动至订阅表格上方，点击省略号图标（3个点），可以更改订阅表格外观，或新增其他的栏位。
7. 完成后，点击**「保存及发布」**。
8. 接着系统会弹出订阅表格代码，选择代码类型，Javascript 或 HTML 代码，然后复制到网站上。

**重要事项**

- 如果您没有设定宽度像素，订阅表格宽度会填满整个宽度区域。
- 桌面上浏览订阅表格的最大宽度为 999 像素。但如果在移动设备上浏览，订阅表格会自动调整与屏幕大小一致。

**可以自定义的设定**

- 根据需求设定自定义宽度。但是，我们不建议更改宽度，系统将订阅表格的宽度默认设定为 100% 填满整个宽度区域。
- 您可以更改订阅表格的**背景**颜色，添加**框线**以及设定**圆角**大小。
- 点击订阅表格，新增**图片，文字，分隔线**，自定义**标题**，**栏位**和订阅表格**按钮**。
- 内嵌式订阅表格（进阶）可以根据自己需求增加栏位，但我们建议尽量保持简短。

 

                     ![Video Thumbnail](https://embed-fastly.wistia.com/deliveries/9d96d89bb7806f13b271ed597ef0dcac.webp?image_crop_resized=1280x720)                                                    0:58

需要设计灵感？以下是 Benchmark 提供的设计参考。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/embedded-form.png?resize=1920%2C1080&ssl=1)

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

###

 

##### **内嵌式订阅表格**

开始建立订阅表格之前，请浏览以下事项：

- 内嵌式订阅表格宽度取决于您放置订阅表格的网站。
- 内嵌式订阅表格仅能收集电子信箱，名字，姓氏。

以下是建立这款订阅表格的步骤：

1. 登入您的 [Benchmark 账户](https://ui.benchmarkemail.com/cn/Login)。
2. 在首页总览列表中选择**「联络人」**。
3. 现在，从总览列表中点击**「订阅表格」**。
4. 然后，点击页面右上方的**「新增订阅表格」**按钮。
5. 选择**内嵌式订阅表格**，点击**「下一步」**。
6. 命名订阅表格名称，并选择联络人名单。
7. 点击**「保存及下一步」**。
8. 创建并编辑订阅表格。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/1705-signup-form-name-email-and-last-name.gif?resize=1890%2C950&ssl=1)

完成后，点击**「保存及发布」**。接着系统会弹出订阅表格代码，选择 Javascript 或 HTML代码，然后复制并贴到网站上。

**可以自定义的设定**

由于内嵌式订阅表格是简易版的订阅表格，仅提供**名字**，**姓氏**，**电子信箱栏位**，也不支援图片。

- 根据需求设定自定义宽度。但是，我们不建议更改宽度，系统将订阅表格的宽度默认设定为 100% 填满整个宽度区域。
- 您可以更改订阅表格的**背景颜色，标题**以及**按钮样式**。

 

                     ![Video Thumbnail](https://embedwistia-a.akamaihd.net/deliveries/e0bf4892ab78d80ebb667349caefbd49.webp?image_crop_resized=1280x720)                                                    0:41

需要设计灵感？以下是 Benchmark 提供的设计参考。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/SMall.png?resize=1301%2C447&ssl=1)

 

###

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

##### **如何设定水平排列内嵌式订阅表格**

内嵌式订阅表格只有三组栏位，名字，姓氏和邮箱地址。这也是我们建议您更改内嵌式订阅表格代码的原因，并至少保留两组栏位。如果您需要姓氏栏位且网页设计能够兼容，可以显示这组栏位。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-01-1.png?resize=528%2C323&ssl=1)

按照以下步骤来设定**水平排列内嵌式订阅表格**。

#### **我们从订阅表格工具开始着手**

要建立水平排列订阅表格，您需要一个已建立的内嵌式订阅表格。

1. 建立好表格后，您可以点击**「保存并发布」**。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-02-1.png?resize=428%2C265&ssl=1)

1. 在弹出的窗口「**确认」**更改，点击下拉选单，选择 **HTML 代码。**
2. 点击**「复制」**选项。复制选项会选择整段代码。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-03-1.png?resize=504%2C472&ssl=1)

1. 关闭弹出窗口，点击左上方的 **Benchmark** **商标**返回导览页。

#### **操作步骤继续在代码编辑器内进行，这一部分为非强制性，您也可以使用记事本。**

1. 现在，前往**「电子邮件」**导览列。
2. 点击**「建立新电子邮件」**，然后选择**「一般电子邮件」**。
3. **非常重要的步骤**：选择**代码编辑器**。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/select-code-editor.gif?resize=960%2C540&ssl=1)

1. **命名邮件**，这封邮件用于测试，您不需要正式发送这一封邮件，*完成后，由于代码会变动，我们建议您删除这封邮件或者保留。*
2. **命名邮件**，这封邮件用于测试，您不需要正式发送这一封邮件，*完成后，由于代码会变动，我们建议您删除这封邮件或者保留。*

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-04-1.png?resize=613%2C152&ssl=1)

1. 使用先前在内嵌式订阅表格复制过来的 HTML 代码，替换掉在左边代码编辑器里现有的文字。您可以在右边看到呈现的订阅表格。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-05-1.png?resize=703%2C187&ssl=1)

**不需要担心现在所看到的邮件页尾。复制代码的时候这不会显示。**

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2019/01/tw-horizontal-form-06-1.png?resize=418%2C458&ssl=1)

1. 现在，使用键盘来搜寻栏位。如果您使用 mac ，则是按 **cmd+f**，windows 则按 **ctrl+f**。

这是我们搜寻操作的范例：

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/hs-find-fields.png?resize=1024%2C270&ssl=1)

1. 在搜寻栏输入：**fieldset** 或栏位名称（比如，名字）。如果您搜寻的是 **fieldset**，会搜寻到几个fieldset，但我们要找到的是这个：

**<fieldset class=”formbox-field**

第一个 fieldset 且后面接着 **class=**

由于它后面跟着栏位名称，您可以认出它。上面图片中栏位名称就用蓝色突出显示。

1. 现在我们可以进行编辑。在 **<fieldset** 标签**前面**，您可以添加以下开头标签（可以复制并贴上）：

**<table><tr><td>**

1. 完成后，您必须在栏位结尾处添加关闭标签：

**</td>**

确认栏位最后有使用此标签：**</fieldset>**

1. 前往下一组栏位，添加开头标签：

**<td>**

1. 如果还有一组栏位（姓氏栏位），开头添加 **<td> **标签，结尾添加 **</td> **标签。
2. 在最后一组栏位结尾添加标签：

**</td></tr></table>**

1. 现在您可以看到水平表格，最后要删除**宽度**。
2. 再次打开搜寻栏，找到宽度，我们要找到的是这个：

**width: 320px**;

找到后，从代码里面将它**删除**，**不要删除其他内容。**

以下图片是代码最终的样子：

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/hs-horizontal-code-done.png?resize=1024%2C374&ssl=1)

注意：蓝色突出显示的就是我们添加的标签。宽度也已经移除，您可以看到水平表格。

1. 表格已经设定好了！**复制**整段代码，贴到您的网站。

*如果想要更加清楚了解步骤，请观看此视频中的代码编辑器中的步骤操作：*

 

 

 

###

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

##### **弹出式订阅表格**

访客访问网站时，此类订阅表格会跳出，并覆盖在页面最上方，使页面颜色变暗。

**以下是建立这款订阅表格的步骤：**

1. **在首页总览列表中选择**「联络人」**。**
2. 现在，从总览列表中点击**「订阅表格」**。
3. 然后，点击页面右上方的**「新增订阅表格」**按钮。
4. 选择**弹出式订阅表格**，点击**「下一步」**。
5. 命名订阅表格名称，并选择联络人名单。![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/1705-signup-form-name-and-select-list.gif?resize=1024%2C504&ssl=1)
6. 点击**「保存及下一步」**。
7. 创建并编辑订阅表格
   - - 点击左上方的「订阅设置」，可以编辑「订阅设置」讯息。
     - 点击「全局设置」，可以编辑设定弹出式订阅表格。
8. 完成后，点击**「保存及发布」**。

**请注意：**

- 系统默认弹出式订阅表格宽度是 400 像素，左右间距是 40 像素。图片最大尺寸为 320 像素。如果图片填满整个页面宽度，您可以根据需求更改图片。

**可以自定义的设定**

针对弹出式订阅表格，您还可以自定义其他内容。您可以编辑「订阅成功」的讯息。记得，弹出式订阅表格是访客浏览网站时才弹出来，虽然您可以添加多组栏位，但我们建议您保持栏位简洁才能快速收集更多订阅用户。

- 您可以选择**弹窗位置**，也就是表格在页面出现的地方：「居中」为常用选项。
- 您可以设定新的**宽度**。
- 您可以新增**「****动画****」**！您的订阅表格可以选择从左侧，上方，右侧，下方滑入，展开或淡入。
- **「****延迟****」**表示是订阅表格出现的时间，可以选择 0 到 60 秒。
- 与其他类型的订阅表格相似，可以自定义颜色，框线，圆角，还可以增加**阴影**，选择**不透明度**以及**阴影大小**。
- 如果访客不想要订阅，可以关闭订阅表格。可以自定义**关闭**图标位置，颜色，图标类型，背景，边框以及其他。
- 系统默认**「****覆盖****」**设定为不透明度 70% 的黑色。「覆盖」是指订阅表格显示时的背景。您可以自定义颜色，不透明度，甚至不需要此背景，直接移除。我们建议您保留背景，让订阅表格有更加的视觉效果。
- 点击订阅表格，来新增**图片，文字，分隔线**，自定义**标题，栏位**和**订阅表格**按钮。
- 点击「订阅成功」选项，可以自定义成功订阅讯息。可以更改字体，颜色，文字以及背景。

 

                     ![Video Thumbnail](https://embedwistia-a.akamaihd.net/deliveries/fd42b6445448f06ae34002f15caf178e.webp?image_crop_resized=1280x720)                                                    1:37

需要设计灵感？以下是 Benchmark 提供的设计参考。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/popup-form.png?resize=1311%2C746&ssl=1)

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

###

 

##### **已经成功订阅的用户还会看到弹出式订阅表格吗？**

系统默认设定弹出式订阅表格只针对未订阅的访客才会显示。访客订阅后，弹出式订阅表格便不再出现。但是，如果访客清理浏览器缓存，或开启无痕模式，以及更换浏览器，弹出式订阅表格会再次出现。

**如何设定弹出式订阅表格仅显示一次？**

1. 在**「设计」**步骤，点击**「全局设置」**。
2. 然后，点击**「关闭」**选项。
3. 现在，勾选**「用户只会看到一次弹出窗口」**![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/popup-only-once.gif?resize=421%2C418&ssl=1)
4. 完成后，点击**「保存及发布」。**

如果订阅表格放置在多个页面，订阅表格一样只会弹出一次。

 

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

###

 

##### ****一般式订阅表格。****

**请注意：**

- 「一般式订阅表格」是与「内嵌式订阅表格」相似的订阅表格，且它的样式风格比较老旧。
- 目前「一般式订阅表格」已经换成「内嵌式订阅表格」。
- 您可以复制现有的「一般式订阅表格」，不能建立新的「一般式订阅表格」。
- 使用旧介面的用户才可以使用「一般式订阅表格」。

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

###

 

##### **如何设计符合 GDPR 规定的订阅表格**

新增符合 GDPR 规定的勾选方框仅需要两个步骤，请浏览下方内容。

- 在联络人名单里面编辑自定义栏位。
- 在订阅表格增加勾选方框。

**在联络人名单编辑自定义栏位**

1. 建立一组**订阅表格**使用的联络人名单。
2. 开启名单后点击  **「编辑」**选项。
3. 您可以看到名单所有栏位。拖动滑竿至**自定义栏位**，选择一组栏位来进行编辑。您可以重命名，比如，隐私权政策。
4. 更改栏位类型为**是/否**。目的是记录访客填写订阅表格的答案。

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2018/09/GDPR-Privacy-Policy-Field-.gif?resize=650%2C321&ssl=1)

 

编辑好栏位之后，开始建立符合 GDPR 规定的订阅表格。

建立**内嵌式订阅表格（进阶）**或**弹出式订阅表格**，**可以在订阅表格新增勾选方框。**

1. 建立订阅表格（您也可以使用现有的）
2. 然后，选择先前**编辑过栏位**的那组联络人名单。 在建立**订阅表格**的步骤 2，新增先前编辑过的栏位。
3. 将鼠标放置于名字和邮箱地址之间，点击三个点（省略号）新增栏位。
4. 然后点击「选择栏位」，选择您建立的自定义栏位。
5. 现在，点击返回箭头，您会看到所选择的栏位。
6. 点击此栏位。
7. 命名栏位，例如，隐私权政策（由于在联络人名单中已更改了名称，在此可自行选择）。
8. 更改类型为「勾选方框」。
9. 勾选为**必填**栏位。
10. 在「回答」的栏位输入以下代码段。*<a target=”blank” href=”https://www.yourdomain.com”><u>隐私权政策</u></a>*注意：使用您的隐私权网页替换网址 https://www.yourdomain.com

![](https://i0.wp.com/kb.benchmarkemail.com/wp-content/uploads/2015/12/gdprsignupform.gif?resize=1030%2C676&ssl=1)

继续编辑订阅表格或完成点击「保存及发布」

**重要**

- 上面第 10 点中提及的超链接，必须链接到您的网站隐私权政策。
- 使用内嵌式订阅表格不支援勾选方框，所以无法建立勾选方框。

您也可以参考以下视频，了解更多资讯：

- 内嵌式订阅表格（进阶）：仅限新介面才能使用。

 

 

[返回页首](https://kb.benchmarkemail.com/cn/how-do-i-create-a-sign-up-form-for-my-website/#top)

**重要**

如果您熟悉 CSS，可以新增自己的代码，给您的订阅表格添加其他的设计风格。

如果您有其他问题，请随时透过[电子邮件](mailto:support@benchmarkemail.com)，[线上客服](https://secure.livechatinc.com/licence/1067033/open_chat.cgi?groups=12)或致电联络我们。