By Mehdi HassanFramer is a fast way for a small team to ship a polished, design-led marketing site, and it pairs well with HubSpot as the CRM. Most of the move is a normal rebuild. The part that's specific to Framer is how HubSpot forms and tracking behave inside it, and that's where attribution quietly breaks if nobody checks. This how-to focuses on that. For the overall picture of what stays in HubSpot and what moves, read our hub on leaving HubSpot CMS while keeping the CRM.
Is Framer a good fit after HubSpot CMS?
Framer is a good fit after HubSpot CMS when your team is small, design matters and the site is mostly marketing pages and a blog. It's less suited to very large content libraries or complex data relationships, where Webflow or a headless CMS with Next.js handles more.
The trade-off is speed versus structure. Framer makes it fast to design, animate and publish, and its CMS is straightforward for blogs and simple collections. Its CMS has plan-based limits on items and collections and simpler relationships than Webflow or a headless CMS, so check Framer's current plan page against your content first. Our comparison of Framer vs HubSpot CMS for B2B startups goes deeper, and the HubSpot to Webflow guide covers the main alternative.
How do you embed HubSpot forms in Framer?
You embed HubSpot forms in Framer either by pasting HubSpot's form embed code into Framer's Embed component, or by adding a small code component that loads HubSpot's forms script and renders the form directly in the page. Both use your existing form IDs, so HubSpot workflows don't change.
Method | Setup effort | Styling | Attribution reliability |
|---|---|---|---|
Embed component with HubSpot code | Low | Limited | Check carefully; see below |
Code component calling HubSpot's form script | Medium | Good, with CSS | High when the form renders in the page |
Framer native form plus integration | Low to medium | Full Framer styling | Often loses the HubSpot cookie |
Framer form to your own endpoint, then Forms API | High | Full Framer styling | High if you pass the cookie and page URL |
We default to the code component. It's a few lines of React that load HubSpot's script once and create the form inside a container, with your portal ID, form ID and region as properties editors can set. It renders in the page itself, so HubSpot sees the real page URL and the visitor's tracking cookie.
Why the embed method needs checking in Framer
Depending on how an embed is rendered, third-party HTML can end up isolated from the main page, for example in an iframe. If that happens, the form may report a page URL that isn't your page, and it may not read the HubSpot tracking cookie set on your domain. The result is a contact with no original source.
You don't need to guess. Submit a test form, open the new contact in HubSpot, and look at the conversion page and source. If the page URL is wrong or the source is missing, switch that form to a code component.
Whichever method you use, keep forms usable: visible labels, clear errors and keyboard access, as our accessible forms guide explains. If you collect health data, read our guide to HIPAA compliant forms on Webflow, Framer and Next.js first.
Where does the HubSpot tracking code go in Framer?
The HubSpot tracking code goes in Framer's site settings, in the custom code section for the head or end of body, so it loads on every page. Paste it once there rather than on individual pages, and publish to make sure it's live on the production domain.
Then check navigation. Some sites move between pages without a full browser reload, and a tracking script that only runs on load will record the first page and miss the rest. Visit four or five pages in a row, then check the visit in HubSpot. If only one page shows, add a small script that tells HubSpot about each new path and page view when the route changes.
How do you run UTM and attribution checks before launch?
You run UTM and attribution checks by submitting every form from a fresh browser session that arrived on a URL with UTM parameters, then confirming in HubSpot that the contact's original source, conversion page and page-view history are correct. Do this on staging and again on the live domain.
- Open a private browser window and land on a page using a test URL with utm_source, utm_medium and utm_campaign values.
- Browse two or three more pages so you can check page-view history.
- Submit the form with a test email address you can find later.
- In HubSpot, open the contact and check original source, the conversion page URL and the page views listed in the timeline.
- Confirm the workflow fired: owner assigned, notification sent, list membership updated.
- Repeat for every form type: demo, contact, newsletter and any gated content.
- Delete or tag the test contacts so they don't pollute reporting.
What are the steps in a HubSpot to Framer migration?
You migrate from HubSpot to Framer by auditing your pages and HubSpot connections, building in Framer, importing the blog, wiring forms and tracking, recreating redirects and testing attribution before switching the domain.
Audit
Crawl the site and list every URL, form, workflow, smart content module, CTA, chatflow and URL-based list in HubSpot.
Design and build in Framer
Build pages and CMS templates for posts, authors and tags. If you're coming from a coded site rather than HubSpot, see our guide to moving from code to a visual builder.
Import the blog
Export posts from HubSpot, clean the HTML and import into a Framer CMS collection by CSV or plugin. Re-host images and check posts against the live site.
Wire tracking and forms
Add the tracking code in site settings and place forms using the code component or embed, with existing form IDs.
Recreate redirects
Add every changed URL to Framer's redirects, including blog tag and author paths.
Test attribution
Run the UTM checks above for every form, on staging and on the live domain.
Switch DNS and monitor
Point the domain to Framer, then watch 404s, Search Console and new-contact sources for several weeks.
What can't you move from HubSpot to Framer?
You can't move HubSpot smart content, HubSpot-native page A/B tests or HubDB-driven pages to Framer as they are. Smart content only runs on HubSpot-hosted pages, and HubDB tables need to become Framer CMS collections or be rebuilt another way.
- Smart content: replace simple rules in Framer, use a personalization tool, or keep those pages on a HubSpot subdomain.
- HubDB tables: export to CSV and import into a Framer collection; check how references translate.
- Gated content and memberships: if HubSpot handles access to gated content, plan a new way to deliver it.
- Large programmatic page sets: check Framer's current CMS limits; our guide to programmatic SEO in Framer explains what's possible.
If your content model is more complex than Framer suits, the HubSpot CMS migration cost guide compares what each destination costs to build.
