在外部网站上设置和样式化 HubSpot 表单

在 HubSpot 中创建表单后，您可以将其添加到 HubSpot 页面或在HubSpot以外创建的页面。如果你的内容托管在 HubSpot 之外，你可以使用以下方法添加表单：

• 通过复制嵌入代码将表单嵌入到外部页面。
• 使用表单共享链接，为你的表单提供一个独立的网页链接。

无论使用哪种方法，对表单所做的更改都会自动更新到外部网站上的实时表单。你可以在表单编辑器中或外部样式表中使用 CSS 为嵌入的 HubSpot 表单设计样式。

开始之前

• 如果你想把表单设置为原始 HTML 表单，更新后的表单编辑器中没有这个选项。只有使用传统表单编辑器创建的表单才能设置为原始HTML表单。
• 如果你要将HubSpot表单嵌入外部页面，你必须安装HubSpot 跟踪代码 来跟踪分析。了解如何安装HubSpot跟踪代码。

设计表单样式

自定义表单和表单步骤的文本、输入字段、按钮和背景。全局样式选项卡中配置的样式选项将应用于所有表单步骤。不能单独为单个表单步骤设计样式。

1. 在 HubSpot 帐户中，导航到营销 > 表单。
2. 创建一个新表单，或将鼠标悬停在现有表单上，然后单击 "编辑"。
3. 在左侧边栏菜单中，单击styles 样式图标。
4. 您可以自定义以下表单组件的样式：
   • 字段： 自定义字段，包括背景和边框。您还可以自定义标签的字体、字号和颜色，以及帮助文本、占位符和错误文本的颜色。
   • 按钮：自定义按钮的高度、圆角、背景、渐变，并为按钮添加阴影。还可以自定义按钮文本的字体、字号和颜色。
   • 段落（富文本）：自定义正文的字体、字号和颜色。
   • 标题： 自定义标题的字体和文本颜色。您可以选择为标题文本添加阴影。
   • 背景：自定义表单和表单步骤的背景。您可以选择设置背景颜色或使用图片作为背景。您可以使用AI 助手生成图像。您还可以选择为表单设置边框。
   • 进度条：自定义表单上的进度条，包括进度线的颜色和进度条的字体。

复制表单嵌入代码

复制表单嵌入代码并将其粘贴到外部页面上，即可将 HubSpot 表单嵌入外部页面。要跟踪嵌入表单的分析结果，必须在嵌入 HubSpot 表单的外部页面上安装 HubSpot跟踪代码。

访问嵌入代码：

1. 在 HubSpot 帐户中，导航到营销 > 表单。
2. 将鼠标悬停在表单上，点击编辑。
3. 在右上角，单击 "审核并更新"。
4. 在右侧面板底部，单击更新。
5. 在对话框中，单击获取嵌入代码。
6. 在 "嵌入代码"选项卡上，单击 "复制"。
7. 将嵌入代码粘贴到外部页面的 HTML 模块中。

使用共享链接共享独立表单页面

您可以使用共享链接共享表单，这将在独立网页上显示表单。 该共享链接不能隐藏或设置为私人链接。任何拥有共享链接的人都可以访问表单。

要访问共享链接，请

1. 在 HubSpot 帐户中，导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后单击 "编辑"。
3. 在右上角，单击审核和更新。
4. 在右侧面板底部，单击更新。
5. 在对话框中，单击复制共享链接。
6. 在底部，单击复制。这将把表单页面的网址复制到剪贴板。
7. 在浏览器中打开一个新窗口或标签页，然后在地址栏中粘贴表单页面的 URL 以加载它。您也可以直接与他人共享表单页面 URL，让他们访问表单。

在外部样式表中使用 CSS 为嵌入式表单设计样式

Marketing Hub 或Content Hub 专业版或企业 版账户的用户可以嵌入表单，并在外部样式表中使用 CSS 为表单设置样式。使用这种方法，您可以覆盖默认样式，对特定表单元素应用细化样式，并设置全局规则，使嵌入表单的样式保持一致。 了解有关如何使用 CSS 为嵌入表单定义自定义样式的更多信息。

访问开发人员代码：

1. 在 HubSpot 帐户中，导航到营销 > 表单。
2. 将鼠标悬停在表单上，然后单击 "编辑"。
3. 在右上角，单击审核和更新。
4. 在右侧面板底部，单击更新。
5. 在对话框中，单击获取嵌入代码。
6. 单击开发人员代码（高级）选项卡。
7. 要接受从外部更改 CSS 或 JavaScript 可能导致表单崩溃的风险，请选择 "我了解风险，请向我展示代码"复选框。
8. 在底部单击 "复制"。
9. 将表单嵌入代码添加到外部页面。嵌入表单后，您就可以在外部样式表中使用 CSS 为表单设置样式。
   • 本文列出了你可以覆盖的 CSS 变量。
   • 全局样式将覆盖所有嵌入表单的顶级样式。您还可以针对表单中的单个元素，如表单元素行、提交按钮或表单标题。