首先，你需要从 HubSpot 获取两个唯一标识符：portalId 和 formId。它们将你在 HubSpot 中的表单与 Framer 中的表单组件连接起来。

1. 前往 HubSpot 网站，并在你的营销仪表板中打开一个现有表单或创建一个新的表单。

2. 点击表单编辑器右上角的“嵌入”按钮。

3. 弹出窗口中会显示嵌入代码。在此代码中复制你的 portalId 和 formId。

添加 HubSpot 组件

准备好表单 ID 后，切换到你的 Framer 项目以添加 HubSpot 组件。该组件允许你直观地在网站上放置和管理表单。

1. 在 Framer 中打开你的项目。

2. 在编辑器左侧的插入面板中，向下滚动至“表单”部分。

3. 选择 HubSpot，然后将该组件拖放到画布上的任意页面中。

现在组件已放置完成，你需要使用之前复制的 ID 将其链接到 HubSpot 表单。

1. 在页面上选择 HubSpot 组件。

2. 在右侧的属性面板中，你会看到 portalId 和 formId 的输入字段。

3. 将你的值粘贴到对应的字段中以连接表单。

在 HubSpot 中自定义表单

虽然你可以在 Framer 中放置表单，但所有视觉和功能上的自定义都必须在 HubSpot 内完成。使用 HubSpot 的表单编辑器来调整字段、样式和行为，以确保表单在外观和体验上与你的品牌保持一致。

在添加表单并将其链接到 HubSpot 后，是时候检查你的工作成果了。确保一切显示和功能正常后再上线。

完成设置的步骤如下：

1. 使用 Framer 的预览模式测试表单的布局和功能。

2. 当你满意后，点击“发布”以将更新后的网站上线，并开始收集提交内容。

使用 Framer 原生表单解决方案

如果你不想使用 HubSpot，Framer 还提供了一个功能强大的内置表单系统。这些表单高度可定制，并自带多种集成和安全功能。

使用 Framer 原生表单，你可以：

• 创建灵活的表单，支持 10 多种输入类型，适用于不同的使用场景。

• 设计交互式表单状态（例如：成功、错误、加载中），以提升用户体验。

• 选择数据提交方式——通过电子邮件、Google Sheets 或自定义 Webhook。

• 启用内置的垃圾邮件防护和速率限制，以提高安全性。

有关设置原生表单的详细步骤，请查看 本文。

Framer 中使用 HubSpot 的常见用例

将 HubSpot 表单集成到你的 Framer 网站中，可以帮助你简化沟通流程、收集洞察信息并更有效地组织数据。以下是一些最常见的使用场景：

• 联系表单：通过嵌入“联系我们”表单，让用户可以轻松联系你的团队。占位符文本可以帮助访客提供相关信息。

• 支持请求：通过结构化的 HubSpot 表单集中管理和处理 incoming 支持问题。

• 反馈收集：通过捕获用户对产品的想法和建议更好地了解他们，并利用这些洞察优先开发新功能或进行改进。

如果在设置过程中遇到任何问题或需要进一步帮助，请随时通过我们的 联系页面 与我们联系。