在您的外部网站上使用HubSpot 表单捕获潜在客户，并自动将联系人数据同步到您的 HubSpot 账户。你可以在 HubSpot 中设计表单样式，然后使用表单嵌入代码将其添加到你的网站。或者使用分享链接向受众发送独立表单。
嵌入表单可确保提交内容直接同步到你的 HubSpot 账户，你可以在其中管理联系人、触发自动化并分析性能。例如，您可以在公司网站的产品页面上添加 HubSpot 表单，以获取演示请求，并通过自动电子邮件进行跟进。
如果您的表单是在传统表单编辑器中创建的，请了解如何在外部网站上设置和样式化传统表单。
开始之前
在开始使用此功能之前，请查看在外部网站上使用表单的技术要求和注意事项。
技术要求
设计表单样式
自定义表单和表单步骤的文本、输入字段、按钮和背景。表单样式自定义适用于所有表单步骤。您不能单独设置单个表单步骤的样式。
- 在 HubSpot 帐户中，导航到营销 > 表单。
- 创建一个新表单，或将鼠标悬停在现有表单上，然后单击 "编辑"。
- 在左侧边栏菜单中，单击styles 样式图标。
- 在表单样式面板中，您可以自定义以下组件：
- 字段： 自定义字段，包括背景和边框。您还可以自定义标签的字体、字号和颜色，以及帮助文本、占位符和错误文本的颜色。
- 按钮：自定义按钮的高度、圆角、背景、渐变，并为按钮添加阴影。还可以自定义按钮文本的字体、字号和颜色。
- 段落（富文本）：自定义正文的字体、字号和颜色。
- 标题： 自定义标题的字体和文本颜色。您可以选择为标题文本添加阴影。
- 背景：自定义表单和表单步骤的背景。您可以选择设置背景颜色或使用图片作为背景。您可以使用AI 助手生成图片。您还可以选择为表单设置边框。
- 进度条：自定义表单上的进度条，包括进度线的颜色和进度条的字体。
共享独立表单页面
使用共享链接在独立页面上显示表单。任何拥有共享链接的人都可以访问表单。共享链接不能隐藏或设置为私人链接。
复制共享链接
- 在 HubSpot 帐户中，导航到营销 > 表单。
- 将鼠标悬停在表单上，然后单击 "编辑"。
- 在右上角，单击审核并更新。
- 在右侧面板底部，单击更新。
- 在对话框中，单击复制共享链接。
- 在底部，单击复制。这将把网页的网址复制到剪贴板。
- 在浏览器中，打开一个新窗口或标签页，然后在地址栏中粘贴页面的 URL 以加载它。您也可以直接与他人共享表单页面 URL，让他们访问表单。
复制表单嵌入代码
复制表单嵌入代码并粘贴到外部页面上，即可将表单嵌入到外部页面。要跟踪嵌入表单的分析结果，必须在嵌入 HubSpot 表单的外部页面上安装 HubSpot跟踪代码。
复制嵌入代码
- 在 HubSpot 帐户中，导航到营销 > 表单。
- 将鼠标悬停在表单上，点击编辑。
- 在右上角，单击 "审核并更新"。
- 在右侧面板底部，单击更新。
- 在对话框中，单击获取嵌入代码。
- 在 "嵌入代码"选项卡上，单击 "复制"。
- 将嵌入代码粘贴到外部页面的 HTML 模块中。
需要订阅
访问表单开发人员代码需要订阅Marketing Hub 或 Content HubProfessional 或 Enterprise。
嵌入表单并在外部样式表中使用 CSS 自定义样式。使用这种方法，您可以覆盖默认样式，对特定表单元素应用细粒度样式，并设置全局规则，使嵌入表单的样式保持一致。进一步了解如何使用 CSS 为嵌入式表单定义自定义样式。
访问开发人员代码：
- 在 HubSpot 帐户中，导航到营销 > 表单。
- 将鼠标悬停在表单上，然后单击 "编辑"。
- 在右上角，单击审核和更新。
- 在右侧面板底部，单击更新。
- 在对话框中，单击获取嵌入代码。
- 单击开发人员代码（高级）选项卡。
- 要接受从外部更改 CSS 或 JavaScript 可能导致表单崩溃的风险，请选择 "我了解风险，请向我展示代码"复选框。
- 在底部单击 "复制"。
- 将表单嵌入代码添加到外部页面。嵌入表单后，您就可以在外部样式表中使用 CSS 为表单设置样式。
- 本文列出了你可以覆盖的 CSS 变量。
- 全局样式将覆盖所有嵌入表单的顶级样式。您还可以针对表单中的单个元素，如表单元素行、提交按钮或表单标题。
Forms
.svg?height=99&width=353)