HubSpot Webflow Integration

Your website lives in HubSpot CMS or WordPress. Every new landing page waits in a developer queue. A campaign that should go live this week goes live next month. The site has become the bottleneck for your marketing team.

Here's the thing: HubSpot is very good at being your system of record. Contacts, lifecycle stages, workflows, lead scoring and reporting all belong there. It doesn't have to be your website builder too. Webflow takes over the website. HubSpot keeps the pipeline.

That's what we engineer. Overflow builds your website in Webflow and connects it to HubSpot, so forms, tracking, chat and attribution keep working. Coming from HubSpot CMS or WordPress? We migrate the site and protect your SEO equity and existing integrations along the way.

• Publish and launch campaigns without waiting for developers.
• Send every lead into HubSpot complete and attributed.
• Keep the workflows your sales team already uses.

Let's talk or see how we migrate.

Why B2B teams split the stack: Webflow for the website, HubSpot for the pipeline

Most B2B sites on HubSpot CMS or WordPress started with a sensible idea: one platform for everything. Over time, that one platform starts to set the limits. Templates get rigid. Every layout change needs a developer. Marketing works around the CMS instead of with it.

• The old way: one platform does the website, the CRM and the automation. The CMS decides what marketing can ship, and every template change goes into a dev ticket.
• The Overflow way: each tool does the job it's best at. Webflow runs the website. HubSpot runs the pipeline. A clean, documented connection sits in between.

Webflow's job: the website

Webflow gives you visual building, a modular Webflow CMS, reusable components and a design system. Your team builds new pages and campaign variants from approved blocks, on its own, without breaking the brand.

HubSpot's job: the pipeline

HubSpot keeps doing what it already does for you: contacts, lifecycle stages, workflows, email nurture, sales handoff and reporting. Nothing changes for sales. They see the same records, the same properties and the same notifications.

Thinking about leaving HubSpot altogether?

Plenty of teams start searching for HubSpot alternatives when the friction is really on the website side: rigid templates, slow page builds, design that's hard to change. If your contacts, workflows and reporting work for sales, replacing the CRM is a much bigger project than replacing the website. So we ask one question first: is the problem the CRM or the publishing layer? If it's the publishing layer, keep HubSpot and move the site. If you're on another CRM or planning a switch, we also connect Webflow to Salesforce.

Who this is for

B2B marketing leads and founders on HubSpot CMS or WordPress who want a faster website, but don't want to rebuild a CRM setup that works. The trigger is usually a rebrand, a funding round, new service lines or markets, or organic traffic that has gone flat.

Where it needs a plan

Webflow doesn't replace every HubSpot CMS feature. If you rely heavily on HubSpot-native landing pages, smart content or memberships, those need a decision before you move: rebuild in Webflow, keep in HubSpot or drop. We cover how we handle that in the method and migration sections below.

What a Webflow HubSpot integration connects

The official HubSpot app in the Webflow Marketplace connects forms, site tracking, chat and HubSpot file assets without custom code. Webflow's own HubSpot integration guide also covers Code Embed elements and the APIs for setups the app doesn't handle. Most real projects combine two of these.

Forms

You either keep native Webflow forms and map them to HubSpot, or embed HubSpot forms inside Webflow. According to the Webflow Help Center, the current app offers three form paths: an iframe embed, a developer embed you style in Webflow, and native Webflow form mapping. Embedded HubSpot forms submit straight to HubSpot. Mapped native forms keep your Webflow design, post to Webflow first and are then sent to HubSpot. Read more on Webflow forms.

Tracking

The HubSpot tracking code records page views, form submissions and sessions. That means a contact record in HubSpot shows which pages a lead visited before converting, so sales walks into the first call with context.

Chat and meetings

HubSpot chatbots, chatflows and meeting schedulers can be added through the app or with Code Embed elements, on one page or site-wide.

Assets

Approved files from your HubSpot file library can be inserted into Webflow pages without leaving the Designer.

Beyond the app: the HubSpot API

Yes, HubSpot has an API, and so does Webflow. When the app isn't enough, for example when HubSpot data has to flow back into Webflow CMS items or a form needs custom logic before it reaches the CRM, the HubSpot Forms or Contacts API gives full control. It costs development time and upkeep, so we only use it when the data flow needs it. See how we approach Webflow integrations in general.

One requirement to know

The tracking code and other HubSpot scripts are custom code. Webflow makes custom code available on any paid Site plan and on the Core, Growth, Agency and Freelancer Workspace plans. A free Starter site can't load the HubSpot tracking code.

What you get when Overflow connects Webflow and HubSpot

You don't get "an app installed". You get a connection that's mapped, tested and documented, so your team knows exactly where every lead goes.

Map every form before we build

We list every form on the site, the event it represents (demo request, download, newsletter, event signup), the HubSpot properties it should fill and who owns the follow-up. It's the same rule we use for any Webflow integration: map the trigger, fields, permissions, destination, failure handling and owner before installing anything.

Match fields to the right HubSpot properties

Fields are matched on HubSpot's internal property names, such as firstname, company and jobtitle, not on the labels people see. Every form gets a unique name, because Webflow's documentation warns that two forms with the same name can break the mapping or send duplicate submissions. Every field gets a label. A wrong match doesn't always throw an error: the field simply arrives empty in HubSpot. We design that risk out.

Plan for what happens when something fails

Most setups only plan the happy path. We decide upfront what happens when a submission doesn't reach HubSpot: where the backup record lives, who gets notified and who checks it. With native mapping, submissions post to Webflow first, so there's a record in Webflow to fall back on. For other methods we agree the safety net in the plan.

Track visitors and respect consent

We install the HubSpot tracking code, add your Webflow domain to HubSpot's tracking settings and set up cookie consent. Webflow's integration guide notes that HubSpot tracking uses cookies, so GDPR and CCPA consent has to be part of the setup, not an afterthought.

See which campaigns create pipeline

Hidden fields or app settings pass UTM and source data into HubSpot, so marketing can tie a contact back to the campaign that brought them in. We only promise the attribution the chosen method actually supports, and we tell you upfront where the limits are.

Reuse one form across CMS templates

Events, services and resources usually live in CMS collections. We build one reusable form component into those CMS templates, mapped correctly to HubSpot, with hidden fields that tell you which page the lead came from. Getting a HubSpot form to work across collection pages is a recurring question in the HubSpot Community, so we solve it in the build.

Test it on the live site

We send test submissions from the published site, check the HubSpot submission logs and confirm your workflows trigger as they should.

Hand it over to marketing

Documentation, live training and video walkthroughs, so your team can add or change forms without a developer. We aim to create ownership, not dependency.

What usually breaks, and how we prevent it

These are the issues that come up again and again in Webflow and HubSpot setups. Each one has a fix in our checklist.

• Empty fields in HubSpot: a field matched to a display label instead of the internal property name. We map on internal names and test every field.
• Missing or doubled submissions: two forms with the same name. Every form gets a unique name.
• Field types that don't map: dropdowns, checkboxes or text areas on a native mapped form. We move those forms to a developer embed or Code Embed.
• No page views on contact records: the tracking code isn't loading, the site is on a free plan or the Webflow domain is missing from HubSpot's tracking settings. We check all three before launch.
• Every CMS page reports as the same form: no page context passed. Hidden fields fix it.
• A form stops matching after an edit: renaming a form or changing fields later means the mapping needs a check. Our handover docs show marketing how to do that.

Which Webflow HubSpot connection method fits your setup?

The right method depends on your HubSpot plan, how much design control you need and how complex your forms are. Our rule: use the least complex method that meets the requirements.

• Native Webflow form mapping (HubSpot app). Best for: simple contact and newsletter forms. HubSpot plan: lower tiers. Design control: full, it's a Webflow form. Limits: one-way, from Webflow to HubSpot. In the current app, only text input fields are supported, so dropdowns, checkboxes and text areas need another method.
• HubSpot iframe embed (HubSpot app). Best for: forms marketing wants to manage fully in HubSpot. HubSpot plan: any plan with forms. Design control: none in Webflow. Limits: changes in HubSpot appear on the live site without republishing, but you can't style the form in Webflow.
• HubSpot developer embed (HubSpot app). Best for: HubSpot forms that must look like the rest of your site. HubSpot plan: Marketing Professional or Enterprise. Design control: high, the form renders as HTML you style in Webflow. Limits: only forms built in HubSpot's new Form Editor, and structure changes need a refresh in Webflow.
• HubSpot HTML form in a Code Embed. Best for: conditional logic, progressive profiling and multi-step forms that the app may not render correctly. HubSpot plan: depends on the features you use. Design control: through CSS. Limits: more custom code to maintain.
• Capture non-HubSpot forms (tracking code). Best for: a fallback. HubSpot plan: any. Design control: full. Limits: no field mapping, every value lands in single-line text properties, and an account can connect up to 10,000 unique non-HubSpot forms.
• Zapier, Make or n8n. Best for: data that has to reach more than one tool. HubSpot plan: any. Design control: full. Limits: cost per task and one more system to maintain.
• HubSpot Forms or Contacts API. Best for: custom logic and two-way data. HubSpot plan: depends on the endpoints. Design control: full. Limits: development time and ongoing upkeep.

Match the method to how your team works

A method table only gets you halfway. The better question is who will touch the forms after launch. These are the patterns we see most:

• Marketing edits forms in HubSpot every week: an iframe or developer embed, so changes don't wait for a Webflow publish.
• Design matters and forms are short: native mapping, so the form is just another Webflow component.
• Demo forms with qualifying questions or multiple steps: a developer embed or Code Embed, because native mapping only handles text inputs.
• Leads also go to a second tool: an automation layer such as Zapier, Make or n8n, with an owner who watches it.
• The website needs HubSpot data back: the API, because the app only syncs one way.

Do you need Webflow Enterprise? No.

You'll still read that the Webflow HubSpot integration is Enterprise-only. That was true for the older HubSpot forms integration. According to the Webflow Help Center, since 29 August 2023 you can connect a Webflow site to HubSpot with the HubSpot app, which runs on regular paid site plans.

How we choose

We pick the method during strategy, based on your data flow, your HubSpot plan and your forms. Not on habit. Often that's native mapping for simple forms and a developer embed or Code Embed for the ones with logic.

Moving from HubSpot CMS or WordPress to Webflow without losing rankings or leads

The biggest worry we hear: "What if we lose our rankings, or leads stop coming in the week we launch?" Fair question. A migration touches both your SEO equity and your lead flow. So we plan for both before anything moves.

What we protect

• URLs: every old URL mapped to its new one, with 301 redirects in Webflow.
• Search signals: metadata, schema markup and internal links carried over and checked.
• Lead flow: every form and tracking point rebuilt and mapped to the same HubSpot forms and properties, so your workflows keep firing.

HubSpot stays untouched

Contacts, lists, workflows and reporting stay in HubSpot. Only the publishing layer moves.

Plan what HubSpot CMS did before

Blog posts, landing pages and HubSpot-specific modules are mapped to Webflow CMS collections and page templates before launch. Anything that should stay in HubSpot, such as a gated area or smart content, gets an explicit decision in the plan.

How fast it can go

We migrated Nedcargo from WordPress to Webflow in 4 weeks. Our typical builds take six to eight weeks. Your timeline depends on your site, so we agree it after discovery, not before.

More on how we approach it: Webflow migration, WordPress to Webflow migration, Webflow vs WordPress and our Webflow SEO services.

How we deliver your Webflow HubSpot integration

We use the same six-step process as every B2B Webflow agency project we run, with the HubSpot connection built into each step.

1. Strategy and discovery. We audit your current site, content and HubSpot setup: forms, properties, workflows and tracking. Then we write the migration plan and the data flow plan.
2. Scalable design system. We design in Figma, including form components and their states: default, error and success.
3. Webflow development. We build the CMS, the components and the HubSpot connection with the method chosen in strategy.
4. Content migration. We move content, set up redirects and handle technical SEO, with SEO and AI Search built in from the start.
5. Quality assurance. Test submissions, HubSpot logs, consent behaviour and performance, all checked on the live site.
6. Handover to marketing. Documentation, training and support, so your team runs the site without us.

Cost and timing are agreed upfront. Communication is fast. One client put it this way: "they keep their promises."

Proof from B2B teams we've built for

We don't have a HubSpot-specific case to show you here yet. What we can show is how we build and migrate B2B websites in Webflow.

• Nedcargo: migrated from WordPress to Webflow in 4 weeks, with 98+ Lighthouse performance.
• BlinkLab: 7 weeks from strategy to launch, built for its next growth phase after a $17.5M raise.
• Aumatics: 300%+ marketing ROI and 8+ new high-ticket clients.
• A multi-product group going international: 4 weeks from kick-off to launch, with a 95+ performance score.

"Communication was always smooth and fast, the quality of their work was excellent." Marketing Manager, Informer Group

"Communication is excellent, and they keep their promises, something we cannot always say about other online marketing agencies." Quinten van der Kraaij

Who does the work

Overflow is an official Certified Webflow Partner. Jort Steinebach is a Certified Webflow Developer who has built 40+ Webflow sites and leads development, design systems and CMS architecture. Niels Voshol covers strategy, SEO and AI Search, across 40+ B2B projects.

Yes, we're a small team. That's the point. The two senior specialists you talk to are the two who do the work, with no handoff to juniors. Read more about us or browse our client cases.

What does a Webflow HubSpot integration cost?

We don't publish a price list, because no two HubSpot setups are the same. What we do is scope it properly and agree a fixed price before we start.

What drives the scope

• Forms and templates: how many forms, and how many CMS templates they live in.
• Method: native mapping is lighter than a developer embed, and both are lighter than a custom API setup.
• Context: a connection on an existing Webflow site, or part of a full build or migration.
• Consent and attribution: how much source and campaign data you need in HubSpot.
• Languages and markets: forms and tracking across multiple locales with Webflow localization.

Third-party costs you own

• A paid Webflow Site plan or Workspace plan, needed for custom code such as the tracking code.
• Your HubSpot plan. The developer embed needs Marketing Professional or Enterprise.
• Optional automation fees if you use Zapier or Make.

You get a fixed scope with cost and timing agreed upfront. No funnies, no surprises. Let's talk about your setup.

Webflow HubSpot integration FAQ

Do I need Webflow Enterprise to connect HubSpot?

No. The HubSpot app works on paid Webflow site plans; only the older forms integration was Enterprise-only. The tracking code is custom code, so you do need a paid Site or Workspace plan.

Which HubSpot plan do I need?

Basic form mapping and tracking work on lower tiers, while styled developer embeds need Marketing Professional or Enterprise. What you can do with workflows and email automation depends on your Marketing Hub tier.

Is the Webflow HubSpot sync two-way?

No. Form data flows one way, from Webflow to HubSpot; embedded HubSpot forms submit straight to HubSpot. Pulling HubSpot data back into the Webflow CMS needs a custom API or automation setup.

Does HubSpot have an API I can use with Webflow?

Yes. The HubSpot Forms and Contacts APIs give full control over custom logic and two-way data, at the cost of development time and upkeep. We use them only when the app or an embed can't do the job.

Can I keep using HubSpot workflows, lead scoring and reporting?

Yes. They run on the contacts and submissions that arrive in HubSpot, and we map your forms to the same properties so existing workflows keep triggering.

Can I keep some pages in HubSpot after moving to Webflow?

Yes, if there's a reason to, such as smart content or a gated area. We decide page by page in the migration plan whether to rebuild in Webflow, keep in HubSpot or drop.

Why do Webflow form fields arrive empty in HubSpot?

Usually a field is matched to a display label instead of the internal property name, or there are duplicate form names or missing field labels. Unsupported field types in native mapping cause it too. We catch all of this in QA.

Does HubSpot tracking on Webflow work with GDPR?

HubSpot tracking uses cookies, so your site needs a consent setup and an updated privacy policy. We configure tracking to respect consent; for the legal side, check with your own advisor.

Can HubSpot forms work on Webflow CMS collection pages?

Yes. You place a correctly mapped form component in the collection template and use hidden fields to pass page context, such as the event name.

How long does a Webflow HubSpot integration take?

It depends on the number of forms, the method and whether it's part of a full build or migration. Our typical builds take six to eight weeks, and we agree your timeline after discovery.

Do you only connect the forms, or the whole stack?

We can connect HubSpot to an existing Webflow site, but most clients have us build or migrate the site and engineer the connection as part of it. That way forms, templates and tracking are designed together.

Do you also connect Webflow to Salesforce?

Yes. See our Webflow Salesforce integration page, or read how we approach Webflow integrations in general.

Ready to keep HubSpot and give marketing a faster website?

Your website shouldn't be the reason a campaign ships late. Keep HubSpot as the system your sales team trusts. Move the website to Webflow, where marketing builds and publishes on its own. We engineer the connection so every lead lands in HubSpot complete, attributed and ready for your workflows.

Let's talk.

Also want to be cited in ChatGPT, Gemini, Perplexity and AI Overviews? Start with an AEO audit to see where your brand stands in AI answers today.