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

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

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

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

请注意： 在更新的编辑器中无法将表单设置为原始HTML。只有使用传统编辑器创建的表单才能设置为原始 HTML。

设计表单样式

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

• 在 HubSpot 帐户中，导航到营销 > 表单。
• 创建一个新表单，或将鼠标悬停在现有表单上，然后单击 "编辑"。
• 在左侧单击样式图标。

• 自定义文本、输入字段或按钮时，可以使用快速字段输入样式从现有样式中进行选择。或者，也可以为表单的每个组件手动定制样式：
  • 字段： 自定义字段，包括背景和边框。您还可以自定义标签的字体、字号和颜色，以及帮助文本、占位符和错误文本的颜色。
  • 按钮：自定义按钮的高度、圆角、背景、渐变，并为按钮添加阴影。还可以自定义按钮文本的字体、字号和颜色。
  • 段落（富文本）：自定义正文的字体、字号和颜色。
  • 标题： 自定义标题的字体和文本颜色。您可以选择为标题文本添加阴影。
  • 背景：自定义表单和表单步骤的背景。您可以选择设置背景颜色或使用图片作为背景。您可以使用AI 助手生成图片。您还可以选择为表单设置边框。
  • 进度条：自定义表单上的进度条，包括进度线的颜色和进度条的字体。

添加表单嵌入代码

访问表单嵌入代码：

• 在 HubSpot 帐户中，导航到营销 > 表单。
• 将鼠标悬停在表单上，然后单击操作 > 共享。
• 单击嵌入代码选项卡。
• 在对话框中，如果要将提交表单的联系人添加到 Salesforce 营销活动，请单击将联系人添加到 Salesforce 营销活动 下拉菜单并选择一个营销活动。如果将Salesforce 活动与表单关联，表单的嵌入代码就会更改。在这种情况下，您必须将嵌入代码重新添加到外部网站。
• 单击 "复制"。
• 将嵌入代码粘贴到外部页面的 HTML 模块中。要跟踪表单的分析，必须在放置 HubSpot 表单的外部页面上安装 HubSpot跟踪代码。

创建独立表单页面

你还可以通过分享链接分享你的表单。在共享链接中，表单将以自己的 URL 显示在独立页面上。此共享链接不能隐藏或设置为私人链接。任何拥有共享链接的人都可以访问表单。

• 在 HubSpot 帐户中，导航到营销 > 表单。
• 将鼠标悬停在表单上，然后单击操作 > 共享。
• 在对话框中，单击共享链接 选项卡。
• 单击复制，将表单页面的 URL 复制到剪贴板。
• 在浏览器中打开一个新窗口或标签页，然后在地址栏中粘贴表单页面的 URL 以加载它。你也可以直接与他人共享表单页面的 URL，让他们访问表单。