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

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

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

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

如果您使用 WordPress，请学习如何 在 WordPress 帖子或页面上插入表单。

请注意：自 2024 年 5 月 16 日起，在外部页面上添加表单嵌入代码时，必须将该页面的域添加为站点域，以便将其视为可信域。否则，提交到表单的内容也会被过滤为垃圾邮件。

添加表单嵌入代码

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

创建独立的表单页面

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

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

在表单编辑器中设置嵌入表单的样式

使用 HubSpot 表单编辑器设计嵌入式表单样式时，可以使用主题或应用自己的自定义样式。

请注意：表单编辑器中设置的主题和样式只适用于嵌入式表单或独立表单页面。HubSpot页面上的表单只能使用内容编辑器中的表单模块样式选项进行样式 设置 。

为您的表格设计主题风格（遗产）

如果您想在不编写任何自定义代码的情况下设计传统表单的样式，可以将预设主题应用到嵌入式表单或独立表单页面。除了全局表单样式设置外，这些主题还能为表单添加更多自定义选项。

为您的表单设计一个主题：

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 将鼠标悬停在表单上，然后单击 "编辑"。
• 在表单编辑器中，单击 "样式和预览 "选项卡。
• 如果你正在编辑一个旧表单，请在左侧窗格中清除 "保留旧主题 "复选框。这将删除应用于该表单的 HubSpot 旧默认样式。你添加到表单的任何自定义 CSS 或 JavaScript 将不再起作用。该复选框不适用于在你的账户中创建的任何新表单。
• 选择主题。
• 在右上角单击 " 发布或更新"。

使用自定义样式

您还可以为表单设计更精细的样式。

要应用自定义样式：

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 将鼠标悬停在表单上，然后单击 "编辑"。
• 如果您正在编辑旧表单，并且您已订阅Marketing Hub入门版、 专业版 或企业 版，请单击表单编辑器中的 "样式和预览 "选项卡。
  • 在左侧窗格中，单击 样式部分。在此，您可以配置表单字段宽度、字体族、字体大小、字体颜色和表单按钮。这些样式是根据单个表单设置的，将覆盖全局表单样式设置。
  • 自定义表单后，在右上方单击 " 发布 "或 "更新"。
    
    

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

在外部样式表中使用 CSS 为嵌入式表单设置样式（传统方法）

如果你的 HubSpot 账户订阅了Marketing Hub或Content Hub Professional 或 Enterprise ，你可以将原有表单嵌入为原始 HTML 表单，然后在外部样式表中使用 CSS 对嵌入的表单进行样式设置。

请注意：您只能将传统表单设置为原始 HTML。

使用 CSS 设置嵌入式表单的样式：

• 在你的 HubSpot 帳戶中，瀏覽「行銷」>「表單」。
• 将鼠标悬停在表单上，然后单击 "编辑"。
• 在表单编辑器中，单击样式和预览 选项卡。
• 单击以打开 "设置为原始 HTML 表单 "开关。表单将以原始 HTML 元素的形式呈现在外部页面上，而不是 iframe 中，应用于表单的任何默认 HubSpot 风格都将被移除。
• 在右上角，点击 发布或更新。
• 将表单嵌入代码添加到外部页面。如果你已经嵌入了表单，你必须用这个新的、无样式的版本替换现有的嵌入代码。嵌入表单后
  
  • 您可以在外部样式表中使用 CSS 为表单设计样式。
  • 你还可以修改表单嵌入代码，对表单进行更多定制。由于 HubSpot 表单是用 JavaScript 而不是 HTML 制作的，因此定制表单嵌入代码需要懂得使用 JavaScript 的开发人员的帮助。