By Mehdi HassanWebflow is the most common destination we see for B2B teams leaving HubSpot's website tools. It gives marketers visual control and a capable CMS, and it plays well with HubSpot as a CRM. The work splits into the move itself and the rewiring that keeps leads flowing. This guide covers the Webflow-specific details; for the bigger picture of what moves and what stays, start with our hub on leaving HubSpot CMS while keeping the CRM.
What does a HubSpot to Webflow migration involve?
A HubSpot to Webflow migration involves five pieces of work: rebuilding the design in Webflow, moving the blog into the Webflow CMS, reconnecting HubSpot forms and tracking, recreating redirects, and deciding which pages stay in HubSpot. There's no converter from HubSpot themes to Webflow, so the site itself is always rebuilt.
That rebuild is usually an opportunity, not a cost to minimise. HubSpot themes are built from modules and HubL templates; Webflow is built from classes, components and CMS templates. Copying the old layout pixel for pixel into a new tool tends to waste what Webflow does well. If you're still deciding whether Webflow is the right destination, our comparison of HubSpot CMS vs Webflow and the HubSpot to Framer guide will help.
How do you export a HubSpot blog to Webflow?
You export a HubSpot blog to Webflow by pulling posts from HubSpot's export tool or its Blog Posts API, cleaning the HTML, and importing them into a Webflow CMS collection by CSV or through the Webflow Data API. Authors and tags become their own collections, linked with reference fields.
HubSpot blog item | Webflow CMS | Notes |
|---|---|---|
Post title, slug, body | Blog Posts collection fields | Body goes into a rich text field |
Meta description | Plain text field bound to SEO settings | Don't lose it in the import |
Featured image | Image field | Re-hosted on Webflow's CDN |
Author | Authors collection, reference field | Import authors first |
Tags | Tags collection, multi-reference field | Tag page URLs will change |
Publish date | Date field | Keeps post order and dates visible |
Images inside the post body | Rich text images | Fix after CSV import or use the API |
Two Webflow details catch people out. First, Webflow's CSV import turns images inside rich text into placeholders, so posts with inline images need those images reinserted or imported through the API instead. Second, Webflow CMS item pages live at one level, such as /blog/post-name, so HubSpot's /blog/tag/name and /blog/author/name pages need new paths and redirects. Our guide to migrating a WordPress blog to Webflow CMS covers the same collection setup in more detail.
How do you add HubSpot forms in Webflow?
You add HubSpot forms in Webflow by pasting HubSpot's form embed code into a Webflow Embed element where the form should appear. Use the existing form IDs, so every workflow, list and notification connected to each form keeps working without changes in HubSpot.
- Embed code (simplest). Copy the embed code from the HubSpot form editor into an Embed element. Style it with CSS in the same embed or in site-wide code.
- Webflow native forms plus integration. Build forms in Webflow and send submissions to HubSpot through an integration. Check the Webflow apps marketplace for HubSpot's current app, and test that submissions keep the visitor's source.
- Collected forms. With the tracking code installed, HubSpot can capture submissions from plain HTML forms. It suits simple newsletter forms more than lead forms with routing.
For lead forms we usually keep HubSpot embeds, because routing, consent fields and progressive profiling stay inside HubSpot. If forms collect sensitive data, read our guide to HIPAA compliant forms on Webflow, Framer and Next.js, and make sure whichever method you pick meets the basics in our accessible forms guide.
Where do you put the HubSpot tracking code in Webflow?
Put the HubSpot tracking code in Webflow's site settings, under custom code, in the head or before the closing body tag, so it loads on every page including CMS templates. Site-wide custom code requires a paid Webflow site plan, so set the plan up before launch day.
Once it's live, check three things. Page views should appear in HubSpot for each page you visit, chatflows should show on the right URLs, and if you replace HubSpot's cookie banner with another consent tool, the tracking code should wait for consent. Then submit a form with UTM parameters in a fresh browser and confirm the new contact's original source in HubSpot.
Which landing pages should stay in HubSpot?
Landing pages that should stay in HubSpot are the ones that depend on smart content, HubSpot A/B tests or a campaign that's running right now. Moving them mid-campaign risks breaking tracking links in ads and emails for little gain.
Pros
- Campaign teams keep building pages without touching Webflow
- Smart content and HubSpot tests keep working
- Ad and email URLs stay unchanged during live campaigns
Cons
- You need a HubSpot plan that still includes landing pages
- Two templates to keep on brand
- Two places to manage SEO settings and redirects
A common pattern is to connect a subdomain, such as go.yourdomain.com, to HubSpot for campaign pages and point the main domain to Webflow. Rebuild the HubSpot landing page template to match the new Webflow design so visitors don't notice the switch. If you'd rather bring everything into Webflow, the reverse question is covered in our guide to when moving into HubSpot CMS makes sense.
How do you migrate from HubSpot to Webflow step by step?
You migrate from HubSpot to Webflow by auditing first, building and importing next, then rewiring HubSpot and redirects, and testing every form before the domain switch. Here's the order we follow.
Audit pages, forms and integrations
Crawl the site, list every URL, every form and its workflows, smart content modules, CTAs and chatflows.
Design and build in Webflow
Build components and CMS templates for pages, posts, authors and tags.
Import the blog
Import authors and tags, then posts. Fix rich-text images and check twenty posts against the live site.
Add tracking and forms
Install the tracking code sitewide and embed HubSpot forms using the existing form IDs.
Recreate redirects
Add every changed URL to Webflow's 301 redirects, using pattern redirects for tag and author paths. HubSpot's redirect tool stops applying once it no longer hosts the domain.
Test end to end
Submit each form with UTM parameters, check contacts, sources, workflows and notifications, and click every CTA.
Switch DNS and monitor
Point the domain to Webflow, then watch 404s, Search Console and new-contact sources for several weeks.
Hypothetical example: tag pages that change path
For example, suppose a HubSpot blog has 30 tag pages at /blog/tag/name, and some rank for long-tail searches. In Webflow, the Tags collection lives at /tags/name.
Rather than adding 30 redirects by hand, the team adds one pattern redirect in Webflow from /blog/tag/(.*) to /tags/%1. They then crawl the old tag URLs from the saved list and confirm each one returns a single 301 to the right Webflow page. Author pages get the same treatment.
