在外部网站上设置和样式化 HubSpot 表单（传统表单）

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

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

无论使用哪种方法，在 HubSpot 表单工具中对表单所做的更改都会自动反映到外部网站上的实时表单中。添加表单后，你可以通过表单编辑器或外部样式表中的 CSS 在外部页面上设置嵌入 HubSpot 表单的样式。

如果您使用的是 WordPress，请学习如何在 WordPress 帖子或页面上插入表单。

请注意：建议使用更新后的表单编辑器创建和管理表单。本文仅供使用旧版编辑器创建的现有表单参考。了解有关在外部网站上设置表单样式的更多信息。

添加表单嵌入代码

请注意：自 2024 年 5 月 16 日起，在外部页面上添加表单嵌入代码时，必须将该页面的域添加为站点域，以便作为可信域处理。否则，提交的表单也将被过滤为垃圾邮件。

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 的开发人员的帮助。