上次更新时间： 2026年8月5日
在您的外部网站上使用HubSpot 表单来收集潜在客户，并将联系人数据自动同步到您的 HubSpot 账户。您可以在 HubSpot 中自定义表单样式，并使用表单嵌入代码将其添加到您的网站。或者使用分享链接，将独立表单发送给您的受众。
嵌入表单可确保提交内容直接同步到您的 HubSpot 账户，您可以在该账户中管理联系人、触发自动化流程并分析表单表现。例如，您可以在公司网站的产品页面上添加一个 HubSpot 表单，以收集演示请求，并通过自动发送的电子邮件进行跟进。
如果您的表单是在旧版表单编辑器中创建的，请了解如何在外部网站上设置和设计旧版表单。
开始之前
在开始使用此功能之前，请先查看在外部网站上使用表单的技术要求和注意事项。
要求
需要权限 创建或编辑表单需要“ 编辑 表单 ”权限。
- 若要跟踪嵌入表单的分析数据， 请 在外部页面上安装 HubSpot 跟踪代码。
- 在外部网站上嵌入 HubSpot 表单时，您需要将该网站域名添加到跟踪设置中。来自未添加域名的表单提交将被 标记为垃圾信息。
限制与注意事项
- 在更新后的表单编辑器中，无法将表单设置为原始 HTML 表单。只有使用旧版表单编辑器创建的表单才能设置为原始 HTML。
- 自定义表单的嵌入代码需要熟悉 JavaScript 的开发人员的协助。若需进行更高级的自定义，可使用自定义表单和 HubSpot表单 API 实现。
设置表单样式
自定义表单及表单步骤中的文本、输入字段、按钮和背景。表单样式自定义将应用于所有表单步骤，无法单独为单个表单步骤设置样式。
- 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
- 创建新表单，或将鼠标悬停在现有表单上并点击“编辑”。
- 在左侧边栏菜单中，点击“ 样式”图标。
- 在“表单样式”面板中，您可以自定义以下组件：
- 字段：自定义 字段，包括背景和边框。您还可以自定义标签的字体、字号和颜色，以及帮助文本、占位符和错误文本的颜色。
- 按钮：自定义按钮的高度、圆角、背景、渐变，并为按钮添加阴影。您还可以自定义按钮文字的字体、字号和颜色。
- 段落（富文本）：自定义正文文本的字体、字号和颜色。
- 标题：自定义 标题的字体和文字颜色。您可以选择为标题文本添加阴影。
- 背景：自定义表单及表单步骤的背景。您可以选择设置背景颜色或使用图片作为背景。您可以使用AI 助手生成图片。您还可以选择为表单设置边框。
- 进度条：自定义表单上的进度条，包括进度线的颜色和进度条的字体。
分享独立表单页面
使用分享链接可在独立页面上显示您的表单。任何拥有该分享链接的人均可访问该表单。分享链接的 URL 由系统自动生成，无法进行编辑或自定义。
要复制分享链接：
- 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
- 将鼠标悬停在表单上，然后点击“编辑”。
- 在右上角，点击“查看并更新”。
- 在右侧面板底部，点击“更新”。
- 在对话框中，点击“复制分享链接”。
- 在底部点击“复制”。这将把该页面的网址复制到剪贴板中。
- 在浏览器中打开一个新窗口或新标签页，将页面的 URL 粘贴到地址栏中以加载该页面。您也可以直接将表单页面的 URL 分享给他人，以便他们访问该表单。
复制表单嵌入代码
通过复制表单嵌入代码并将其粘贴到外部页面上，将表单嵌入到外部页面中。若要跟踪嵌入表单的分析数据，您必须在嵌入 HubSpot 表单的外部页面上安装 HubSpot跟踪代码。
要复制嵌入代码：
- 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
- 将鼠标悬停在表单上，然后点击“编辑”。
- 在右上角，点击“查看并更新”。
- 在右侧面板底部，点击“更新”。
- 在对话框中，点击“获取嵌入代码”。
- 在“嵌入代码”选项卡上，点击“复制”。
- 将嵌入代码粘贴到外部页面的 HTML 模块中。
访问表单开发者代码
需要订阅 访问表单开发代码需要Marketing Hub 或 Content Hub的专业版或 企业版订阅。
嵌入表单，并使用外部样式表中的 CSS 自定义样式。通过此方法，您可以覆盖默认样式、对特定表单元素应用精细样式，并设置全局规则以确保所有嵌入的表单样式保持一致。了解有关如何使用 CSS 为嵌入的表单定义自定义样式的更多信息。
要访问开发者代码：
- 在你的 HubSpot 帐户中，单击更多，然后导航到营销 > 表单。如果你的帐户中未显示更多，请直接导航到营销 > 表单。
- 将鼠标悬停在表单上，然后点击“编辑”。
- 在右上角，点击“查看并更新”。
- 在右侧面板底部，点击“更新”。
- 在对话框中，点击“获取嵌入代码”。
- 点击“开发者代码（高级）”选项卡。
- 若接受外部对 CSS 或 JavaScript 所做的更改可能导致表单失效的风险，请选中“我了解相关风险，显示代码”复选框。
- 在底部，点击“复制”。
- 将表单嵌入代码添加到您的外部页面中。嵌入表单后，您就可以在外部样式表中使用 CSS 对表单进行样式设置。
- 本文列出了您可以覆盖的 CSS 变量。
- 全局样式将覆盖所有嵌入表单中的顶级样式。您还可以针对表单中的单个元素进行样式设置，例如表单元素行、提交按钮或表单标题。
