在外部网站上设计和嵌入 HubSpot 表单

在您的外部网站上使用HubSpot 表单捕获潜在客户，并自动将联系人数据同步到您的 HubSpot 账户。你可以在 HubSpot 中设计表单样式，然后使用表单嵌入代码将其添加到你的网站。或者使用分享链接向受众发送独立表单。

嵌入表单可确保提交内容直接同步到你的 HubSpot 账户，你可以在其中管理联系人、触发自动化并分析性能。例如，您可以在公司网站的产品页面上添加 HubSpot 表单，以获取演示请求，并通过自动电子邮件进行跟进。

如果您的表单是在传统表单编辑器中创建的，请了解如何在外部网站上设置和样式化传统表单。

开始之前

在开始使用此功能之前，请查看在外部网站上使用表单的技术要求和注意事项。

技术要求

• 在外部网站上嵌入 HubSpot 表单时，您需要在跟踪设置中添加网站域名。未添加域名的表单提交将被 标记为垃圾邮件。
• 要跟踪嵌入表单的分析结果， 你必须在外部页面上安装HubSpot 跟踪代码。
  

限制和注意事项

• 更新后的表单编辑器 无法将表单设置为原始HTML表单。只有使用传统表单编辑器创建的表单才能设置为原始 HTML 表单。
• 自定义表单的嵌入代码需要懂得 JavaScript 的开发人员的帮助。更高级的定制可通过定制表单和 HubSpot表单 API 完成。

设计表单样式

自定义表单和表单步骤的文本、输入字段、按钮和背景。表单样式自定义适用于所有表单步骤。您不能单独设置单个表单步骤的样式。

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

共享独立表单页面

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

复制共享链接

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

复制表单嵌入代码

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

复制嵌入代码

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

访问表单开发人员代码

嵌入表单并在外部样式表中使用 CSS 自定义样式。使用这种方法，您可以覆盖默认样式，对特定表单元素应用细粒度样式，并设置全局规则，使嵌入表单的样式保持一致。进一步了解如何使用 CSS 为嵌入式表单定义自定义样式。

访问开发人员代码：

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