HubSpot integration
HubSpot is a CRM and marketing platform that captures leads from forms and tracks what they read before converting. Framer has a built-in HubSpot form component, Webflow has an official HubSpot app that maps native Webflow forms to HubSpot, and on Astro or Next.js we submit forms from a server route and load the tracking code after consent.
| Complexity | Medium |
|---|---|
| Method |
|
| Typical setup | Half a day to 2 days |
| What we do | We connect your forms with clean field mapping, add tracking behind your banner, and test that leads arrive with source and page history. |
| Category | CRM and marketing automation |
Setup by platform
How we set up HubSpot
Framer
- Native
- Embed
Framer’s built-in HubSpot component takes the portalId and formId; fields and styling are edited in HubSpot. Site-wide tracking goes in custom code. For a fully custom form design, a Framer webhook can relay to HubSpot.
Webflow
- Native
The official HubSpot app maps native Webflow form submissions to HubSpot, embeds and styles HubSpot forms in the Designer, and can turn on site tracking and the chatbot.
Astro
- API
- Embed
Our own form posts to an endpoint that submits to HubSpot’s Forms API with the hubspotutk cookie, page URL and consent fields, so the lead keeps its history. The tracking script loads async after consent.
Next.js
- API
- Embed
A server action submits the form; @hubspot/api-client handles CRM updates when we need more than a form submission. On client-side navigation we call setPath and trackPageView so page views are counted.
Use cases
What teams use it for
Demo and contact forms
Every request becomes a contact with company, source and the pages they read first.
Gated content
A download form adds the lead to a list and starts a nurture sequence.
Chat on high-intent pages
HubSpot chat or a bot on pricing and demo pages, routed to the right rep.
Before you add it
What to watch out for
Consent and GDPR
Use one banner
With another consent tool, we disable HubSpot’s banner and pass consent via its API. Declined visitors are tracked without identifying cookies.
Data layer
Keep the hubspotutk cookie with the form
Custom forms need to send the hubspotutk value and page context, or the contact arrives without its page history.
Data layer
EU hosting is set at signup
HubSpot has an EU data center. New paid accounts are placed by signup location; existing paid accounts can migrate from settings.
FAQ
Questions about HubSpot
Does HubSpot have an official Webflow app?
Yes. The HubSpot app on the Webflow Marketplace maps native Webflow forms to HubSpot, styles HubSpot form embeds and can add site tracking and chat.
Can Framer use HubSpot forms without custom code?
Yes. Framer’s built-in HubSpot component takes your portal ID and form ID. The trade-off is that fields and most styling are edited in HubSpot, not Framer.
Do we have to use HubSpot’s form design?
No. We can design the form in Framer, Webflow or code and send submissions to HubSpot, so it matches the site and still records the lead’s history.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call