By Mehdi HassanHow do you send a Framer form to HubSpot?
You send a Framer form to HubSpot in one of three ways: place a HubSpot-built form with Framer's HubSpot component, send a native Framer form to a webhook that forwards it to HubSpot, or use a third-party connector app from HubSpot's marketplace. The first is the simplest. The second gives you full design control, and it's the one that needs care.
Framer's help center says native forms can send submissions to email, Google Sheets or a custom webhook. HubSpot isn't a direct destination for a native form, so a native form always goes through something in between: an automation tool or a small function you host. Before you wire anything, settle what the form asks and where it sits, which our guide to calls to action and our advice on form fields cover.
Option | Design control | Attribution | Who edits fields | Best for |
|---|---|---|---|---|
HubSpot component (embed) | Styled in HubSpot | Built in | Marketing, in HubSpot | Forms that change often |
Native form, webhook, your function | Full | Full, if you pass cookie and page | Framer editor plus code | Demo and lead forms |
Native form, webhook, Zapier or Make | Full | Weak unless it posts to the form API | Framer editor plus the automation | Routing to several tools |
Marketplace connector app | Full | Depends on the app, test it | Framer editor plus the app | Teams without a developer |
When should you use a HubSpot form in Framer instead?
Use HubSpot's own form when the marketing team needs to edit fields, options and follow-ups without republishing the Framer site. You build the form in HubSpot, then place it with Framer's HubSpot component using the portal ID and form ID from HubSpot's embed code.
Framer's help center is direct about the trade-off: you place the form in Framer, but its visual and functional customization happens in HubSpot. You get HubSpot's tracking cookie handling, progressive profiling and dependent fields without extra work. You give up pixel control and add a third-party script. Framer's own HubSpot plugin in its marketplace also adds calendars, live chat and one-click tracking. Our HubSpot to Framer migration guide covers placing embeds and the tracking code in detail, so we won't repeat it here.
How do Framer form webhooks work?
A Framer form webhook sends each submission as a JSON POST to an HTTPS URL you choose, keyed by the names of the form's inputs. You add it from the form's Send To setting in the right sidebar. Framer's webhook documentation covers three details most tutorials skip.
- Signing. You can set a secret on the webhook. Framer then signs each request with an HMAC-SHA256 signature in a Framer-Signature header, which your endpoint should check before trusting the data.
- Submission ID. Each request carries a Framer-Webhook-Submission-Id header. Store it and ignore repeats.
- Retries. Your endpoint must return a 2xx status. Framer's documentation says it retries a failed delivery up to five times and doesn't follow redirects.
- Payload. The documentation describes the form's input values and nothing else: no page URL, cookies or UTMs.
The last point shapes the whole integration. Anything HubSpot needs beyond what the visitor typed has to be put into the form on the page before it's submitted.
How do you set up the Framer HubSpot integration with a webhook?
Build the destination in HubSpot first, then the endpoint, then the Framer form. The endpoint can be a serverless function you host or a catch-hook step in an automation tool, but it should end with a call to HubSpot's form submission API rather than a direct contact write.
Create the HubSpot form
Add a field for every Framer input, plus fields for UTM source, medium and campaign. Set notifications and follow-ups here.
Install HubSpot tracking
Load HubSpot's tracking code on every page, through Framer's site settings or the HubSpot plugin, so the cookie exists before anyone submits.
Add the extra inputs
Give the Framer form inputs for UTMs, page URL and the hubspotutk value, and fill them on the page. Check Framer's current form options for hidden inputs; otherwise a small code override can set them.
Build the endpoint
Verify the signature, drop repeated submission IDs, map fields, and post to HubSpot's form submission API with hutk, pageUri and pageName in the context.
Connect the webhook
Point the form's Send To webhook at your endpoint, with a secret set.
Test from a campaign link
Submit from a tagged URL after visiting a few pages, then check the contact's source, properties and page history in HubSpot.
How do you keep the HubSpot tracking cookie and UTMs intact?
Keep attribution intact by copying the hubspotutk cookie and the visit's UTM parameters into form inputs, then sending them in the form submission call. HubSpot uses the cookie to join the new contact to the browsing history its tracking code recorded.
HubSpot's cookie documentation says hubspotutk identifies the visitor, is passed with form submissions, is used to deduplicate contacts and expires after six months. It also lists HubSpot's tracking cookies as analytics cookies controlled by the cookie banner. A visitor who declines has no cookie, so the submission still creates a contact, just without page history. Send the cookie value in the API call's context, not as a regular field, and leave it out when it's empty.
UTMs need one more step, because visitors often land on one page and convert on another. Store the parameters on arrival for the session and write them into the form wherever it appears. Test this on the page with the most paid traffic, and watch for drop-off on the form itself with session recordings, as our guide to rage clicks and form abandonment explains.
Hypothetical example: the endpoint for a Framer demo form
For example, suppose a startup's Framer site has a demo form with name, work email, company size, three UTM inputs, a page URL input and a hutk input filled by a small override. The webhook points at a serverless function.
The function reads the raw body, checks the Framer-Signature header against the stored secret and returns early if the submission ID was already processed. It maps the inputs to HubSpot form fields, moves hutk, page URL and page title into the context object, and submits to the HubSpot form. It returns a 2xx only once HubSpot accepts the submission, so Framer's retries cover a temporary HubSpot error. A failed retry also posts an alert to the team's Slack channel.
Does HubSpot capture Framer forms automatically?
Don't count on it. HubSpot's non-HubSpot forms setting collects submissions from HTML forms on pages with the tracking code, but HubSpot's knowledge base excludes forms on single-page apps, forms added after the page loads and forms with JavaScript bound to the submit event.
Framer sites are rendered with React, move between pages without full reloads and submit forms with script, which runs into those exclusions. Even where a submission is picked up, you get no field mapping and hidden fields aren't collected. Treat any capture you see as a bonus, and use a webhook or an embed for every form that matters.
Which Framer forms CRM setup should you choose?
Choose a native Framer form with a webhook and your own endpoint for high-value forms like demo requests, and HubSpot's component for forms marketing edits often. Use automation tools for side effects such as alerts, and only as the main path if they post to HubSpot's form API.
If HubSpot also runs your site today, our guides to leaving HubSpot CMS while keeping the CRM and Framer vs HubSpot CMS help you decide what moves. We set this up on client sites as part of our Framer agency work and our HubSpot integration service, with a test contact checked from every traffic source before launch.
