Connecting HubSpot and Webflow: Blog, Forms, CRM

Short answer: HubSpot and Webflow can be connected. You attach forms and tracking through embedding or form mapping, and blog posts reach the Webflow CMS collection through the HubSpot API or an automation. Depending on your editorial process, moving the whole blog to Webflow can also make sense. It is important to decide beforehand where the blog will be written in future and where the leads should go.

What can be connected

Webflow and HubSpot are two separate systems. You can connect four things: forms, tracking, blog posts and CRM data. Each connection has its own technology and its own limits.

• Forms: Enquiries from the Webflow website land as contacts in HubSpot.
• Tracking: The HubSpot tracking code assigns visits and form submissions to a contact.
• Blog: Posts from HubSpot appear on the Webflow website, or the blog moves over completely.
• CRM data: Fields, lifecycle stages and responsibilities are handed over cleanly.

For the general connection between website and CRM, see our guide Connecting website and CRM. This guide covers only the combination of HubSpot and Webflow.

Showing a HubSpot blog in Webflow

There are three ways. Which one fits depends on where your team wants to write.

Option A: API and automation into the CMS collection

The HubSpot API returns blog posts through its endpoint for listing posts, with fields such as title, slug, content, summary, publish date, featured image and author ID. Access works with a bearer token. One quirk from the documentation: the field authorName names the user who last published the post, not the blog author. For the author you need the author ID and the separate authors endpoint.

On the Webflow side you create posts as CMS items through the Data API v2. The token needs the cms:write permission, each item needs at least a name and a slug, and up to 100 items fit in one request. New items are drafts by default until you release and publish them. If the rate limit is reached, the API responds with status 429. These details matter because an automation can stop unnoticed at exactly such points.

Option B: Migrate the blog to Webflow

The blog moves over completely. Afterwards the team writes in the Webflow CMS, and HubSpot stays for CRM, forms and email. This is the cleanest solution if nobody needs to publish in HubSpot any more. It is a real migration project though, more on that below.

Option C: Keep the blog in HubSpot and embed it

The blog stays in HubSpot and is linked or shown as a teaser list on the Webflow site. This is the fastest to set up. But you maintain two systems, and design and navigation have to match. Also check whether the blog runs on its own subdomain or in a directory of your main domain, because that affects how search engines attribute it.

Careful with real-time promises A connection via API or automation usually runs at intervals. Whether and how fast a post appears on the Webflow site after publishing in HubSpot depends on the implementation and should be tested before you rely on it.

Forms and lead handover

Forms are the most common connection and the one with the most pitfalls.

Embedding HubSpot forms

You copy the form's embed code from HubSpot and paste it into a code element on the Webflow page. According to the HubSpot documentation, you need the HubSpot tracking code on the page so that analytics data for the form is captured. The page's domain must also be added as a trusted domain, otherwise submissions are marked as spam. Customizing the form code with CSS requires a Marketing Hub or Content Hub Professional or Enterprise subscription.

Connecting Webflow forms to HubSpot

Alternatively, the form stays a Webflow form and the data goes to HubSpot. Webflow offers a native mapping of form fields to HubSpot fields for this. According to a partner description, this feature was initially available to Enterprise customers only, so check beforehand whether you can use it on your plan. Every form needs a unique name, and forms must be republished after setup. In addition, HubSpot can capture simple HTML forms with its “non-HubSpot forms” feature. Restrictions apply there: only single-line text fields are mapped, hidden fields are not collected, and the form must not sit in an iframe or a single-page app.

Tracking, UTM, consent

The tracking code should only load after consent, otherwise you risk a data protection violation. HubSpot's own documentation on non-HubSpot forms does not address consent requirements. We explain the rules in the guide Tracking and consent under TDDDG. UTM parameters help attribute leads to a campaign. For improving the form itself, see the article Optimize inquiry forms. This text does not replace legal advice.

CRM connection in detail

The data flow matters more than the technology. Decide which form fields go into which HubSpot properties and who gets the lead afterwards.

With non-HubSpot forms, data is written only to single-line text fields and matched automatically by field name or label. Manual mapping is not possible there. For complex forms with select fields, mapping through the native connection or an embedded HubSpot form is therefore usually the better choice.

Preparing the blog migration for SEO

When the blog moves, URLs often change. Then preparation decides how well visibility is preserved. Nobody can guarantee it.

Redirects, URL structure, metadata

For changed URLs, Google recommends permanent redirects (301 or 308) from every old address to its matching new one, without chains and not all to the home page. According to Google, redirects should generally stay in place for at least a year. Rankings can fluctuate for a while after the move, and for smaller sites it often takes a few weeks until most pages have moved. For the basics, see our guide CMS migration checklist and the article Website relaunch without losing rankings.

Checklist: blog migration from HubSpot to Webflow

• Export all blog URLs and create a mapping table from old to new.
• Decide whether the URL structure stays the same and justify any differences.
• Carry over title, meta description, slug and date for each post.
• Carry over images including alt text and check file names.
• Map authors, categories and tags in the Webflow CMS.
• Update internal links in the text to the new URLs.
• Set up 301 redirects and test them with samples.
• Submit the new sitemap in Google Search Console.
• Check canonical tags so no duplicate content arises.
• After go-live, watch error pages and traffic for several weeks.

Common pitfalls

Duplicate content

If the same post runs in HubSpot and in Webflow, duplicates arise. For duplicate pages Google recommends redirects or the rel=canonical element, and using the preferred URL in all internal links. So decide which version is the “real” one.

Image management

Images from HubSpot sit on HubSpot servers. If they are only linked, your site depends on a third-party system. Better is an import into the Webflow media library with alt text.

Maintaining automations

Automations break quietly. An expired token, a changed field or a reached rate limit is enough. Plan error notifications and decide who is responsible. Also check whether the post text from HubSpot displays cleanly in the Webflow rich text after the transfer.

Which agency sets this up reliably?

Criteria

• The agency first asks about editorial process and data flow, not about the tool.
• It explains the options with pros and cons, even when a simple solution is enough.
• It backs technical statements with the current HubSpot and Webflow documentation.
• It does not promise real-time sync without having tested it.
• It says who monitors the automation after go-live.

Webwavers as an option

Webwavers is one of seven Webflow Premium Partners in Germany and delivers web development with Webflow, as well as with WordPress, TYPO3 and headless. Whether and how a HubSpot connection makes sense for your project, we clarify together with you in the initial conversation. Where something does not fit Webflow, we say so openly.

Process and costs

1. Clarify requirements: where is content written, which leads, which fields?
2. Choose an option: API, migration or embedding.
3. Set up the technology: access, fields, mapping, consent.
4. Test: test entries, test forms, error cases.
5. Go-live and monitoring: check redirects, activate error notifications.

Costs depend mainly on the option and on the number of posts and forms. A flat number would be unreliable. The only binding figures we can name are the confirmed starting values: web development from €5,000 net, Care maintenance plan from €500 per month net. What your connection costs, we clarify in the initial conversation.

Related guides: Client area on your website and Landing page for a product launch.

How we approach this at Webwavers

Webwavers was founded in 2021, has offices in Günzburg and Munich and works across Germany. We are one of seven Webflow Premium Partners in Germany. You can find web development and platform topics on our pages about web development and Webflow agency.

Frequently asked questions

Which agency reliably sets up showing a HubSpot blog on a Webflow website?

Look for agencies that clarify editorial process and data flow before the tool and explain several options. They should back technical statements with current documentation. Webwavers clarifies this with you in the initial conversation.

Can HubSpot be connected to Webflow?

Yes. Forms can be embedded or mapped, the HubSpot tracking code can be added, and blog posts can reach the Webflow CMS collection through the API or an automation. Whether a native connection is available on your Webflow plan is something you should check first.

How do I embed HubSpot forms in Webflow?

You copy the embed code from HubSpot and paste it into a code element. The HubSpot tracking code should run on the page, and the domain must be registered as trusted, otherwise submissions count as spam.

How does migrating a blog from HubSpot to Webflow work?

You export the posts, create them in the Webflow CMS, carry over metadata and images, and set up 301 redirects from the old to the new URLs. Afterwards you submit a new sitemap and monitor the site.

What does connecting HubSpot to Webflow cost?

It depends on the option, the number of posts and forms. At Webwavers, web development starts from €5,000 net, and we clarify the price for your connection in the initial conversation.

Conclusion

HubSpot and Webflow work well together when you decide beforehand where content is written and where leads go. The technology is rarely the problem, the upkeep afterwards is. If you want to talk it through with us, book a free initial conversation. Afterwards you get an honest assessment, even if Webwavers is not the right partner.

Sources

• HubSpot: Set up and style your form on an external site
• HubSpot: Use non-HubSpot forms
• HubSpot Developers: CMS Blog Posts API
• Webflow Developers: Create CMS items (Data API v2)
• Tenten: Webflow HubSpot forms integration
• Google Search Central: Site moves with URL changes
• Google Search Central: Consolidate duplicate URLs