Connect HubSpot with Framer Forms
Capture leads from your Framer forms and automatically create or update contacts in HubSpot using the Forms Plugin.Step 1 — Create a Legacy Private App and Get the Access Token
Before connecting HubSpot to your form, create a Legacy Private App in your HubSpot account to generate an Access Token. This token allows the Forms Plugin to securely send form submissions to HubSpot.
- Login to your HubSpot account
- Navigate to Settings → Integrations → Private Apps
- Click Create a private app
- Give your app a name (e.g., “Forms Plugin”)
- Under Scopes, ensure you have the required contact permissions
- Click Create app
- Copy the generated Access Token
Step 2 — Insert HubSpot Component Into Your Form
Select your form in the Framer canvas and insert the HubSpot component. The component connects your form to HubSpot and automatically detects the form fields in your form layout.
Step 3 — Configure HubSpot Access Token Settings
After inserting the HubSpot component, configure the Access Token settings in the component properties panel.
- Select the HubSpot Integration component in your form
- Open the properties panel on the right side
- Paste your HubSpot Access Token
Required Fields
- HubSpot Access Token — Paste the Access Token generated from your HubSpot Legacy Private App.
Step 4 — Configure Field Mapping
Map your form fields to HubSpot contact properties. The component automatically detects your form field names. You simply connect each field to the correct HubSpot contact property.
Example Mapping
| Form Field | HubSpot Property |
|---|---|
| name | firstname |
| phone | phone |
| company | company |
Step 5 — Result
When a user submits the form, their details will automatically be created or updated as a contact in HubSpot. You can then manage contacts, set up workflows, and trigger automations directly from HubSpot.
Next Steps
- Integrations Overview
- Contact Support if you need help