在外部网站上设置和设计传统表单

在 HubSpot 中创建表单后，您可以将其添加到 HubSpot 页面或您在 HubSpot 外部创建的页面中。您可以通过以下任一方式，在外部（非 HubSpot 托管的）网站上共享表单：

• 将表单代码嵌入到现有页面中。
• 创建一个可链接的独立表单页面。

无论采用哪种方法，在 HubSpot 表单工具中对表单所做的更改都会自动反映到您外部网站上的实时表单中。添加表单后，您可以在表单编辑器中，或通过外部样式表中的 CSS，对外部页面上嵌入的 HubSpot 表单进行样式设置。 如果您使用的是 WordPress，请了解如何在 WordPress 文章或页面中插入表单。

请注意：本文仅适用于使用旧版编辑器创建的现有表单。建议使用更新后的表单编辑器来创建和管理表单。了解如何在外部网站上设置表单样式并进行嵌入。

开始之前

在外部页面添加表单嵌入代码时，必须将该页面的域名添加为网站域名，才能将其视为受信任的域名。否则，提交到该表单的内容也会被过滤到您的垃圾提交中。

获取表单嵌入代码

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“操作”> “分享”。
3. 在对话框中，如果您希望将提交表单的联系人添加到 Salesforce 营销活动，请点击“将联系人添加到 Salesforce 营销活动”下拉菜单 并选择一个营销活动。如果您将Salesforce 营销活动与表单关联，表单的嵌入代码将会发生变化。在这种情况下，您必须将嵌入代码重新添加到外部网站。
4. 点击“复制”。
5. 将嵌入代码粘贴到外部页面的 HTML 模块中。若要跟踪表单的分析数据，您必须在放置 HubSpot 表单的外部页面上安装 HubSpot跟踪代码。

创建独立表单页面

您还可以通过分享 链接分享表单。在分享链接中，表单将显示在具有独立 URL 的独立页面上。此分享链接无法隐藏或设为私有。任何拥有该分享链接的人都能访问该表单。

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“操作”> “分享”。
3. 在对话框中，点击“共享链接”选项卡 。
4. 点击“复制”将表单页面的 URL 复制到剪贴板。
5. 在浏览器中打开一个新窗口或新标签页，将表单页面的 URL 粘贴到地址栏中以加载该页面。您也可以直接将表单页面的 URL 分享给他人，以便他们访问该表单。
   
   

在表单编辑器中设置嵌入式表单的样式

使用 HubSpot 表单编辑器为嵌入式表单设置样式时，您可以选择使用主题，也可以应用自定义样式。

请注意：在表单编辑器中设置的主题和样式仅适用于嵌入式表单或独立表单页面。HubSpot 页面上的表单只能通过内容编辑器中的表单模块样式选项进行样式设置 。

使用主题设置表单样式

如果您希望在不编写自定义代码的情况下为旧版表单设置样式，可以将预设主题应用到嵌入式表单或 独立表单页面。这些主题除了任何全局表单样式设置之外，还会为您的表单提供更多的自定义选项。

要使用主题为表单设置样式：

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“编辑”。
3. 在表单编辑器中，点击“样式与预览”选项卡 。
4. 如果您正在编辑旧版表单，请在左侧窗格中取消选中“保留旧主题”复选框 。此操作将移除此前应用于该表单的 HubSpot 默认样式。您之前添加到表单中的任何自定义 CSS 或 JavaScript 都将不再生效。此复选框不适用于您账户中创建的任何新表单。
5. 选择一个主题。
6. 在右上角，点击 “发布”或“更新”。

使用自定义样式

您还可以对表单进行更精细的样式设置。

要应用自定义样式：

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“编辑”。
3. 在表单编辑器中点击“样式与预览”选项卡 。
   • 在左侧窗格中，点击“样式”部分。在此处，您可以配置表单字段的宽度、字体家族、字号、字体颜色以及表单按钮。这些样式是针对每个表单单独设置的，并将覆盖全局表单样式设置。
   • 自定义表单后，在右上角点击 “发布”或“更新”。

使用外部样式表中的 CSS 设置嵌入表单的样式（旧版）

如果您使用的是旧版表单，可以将表单作为原始 HTML 表单嵌入。然后，您可以通过外部样式表中的 CSS 对该嵌入式表单进行样式设置。

请注意：仅可将旧版表单设置为原始 HTML 格式。了解有关在更新后的表单编辑器中使用CSS 设置嵌入式表单样式更多信息。

要使用 CSS 对嵌入的表单进行样式设置：

1. 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后点击“编辑”。
3. 在表单编辑器中，点击“样式与预览”选项卡 。
4. 点击切换“设置为原始 HTML 表单”开关，将其 开启。表单将在您的外部页面上作为原始 HTML 元素呈现，而非显示在 iframe 中。表单上应用的任何 HubSpot 默认样式都将被移除。
5. 在右上角，点击 “发布”或“更新”。
6. 将表单嵌入代码添加到您的外部页面中。如果您已经嵌入了表单，则必须用此新的、未应用样式的版本替换现有的嵌入代码。嵌入表单后：
   
   • 您将能够通过外部样式表使用 CSS 对表单进行样式设置。
   • 您还可以修改表单嵌入代码以进行其他自定义设置。由于 HubSpot 表单是使用 JavaScript 构建的，而非 HTML，因此自定义表单嵌入代码需要寻求熟悉 JavaScript 的开发人员的帮助。