Webflow Hubspot Integration: Master the New Form Sync Feature

So, honestly, I’ve lost count of how many times I’ve seen a client’s face freeze when I mention “integrating HubSpot with Webflow.” You can practically see the thought bubble appear:

“But wait… is that going to break my site again?”

If you’ve ever tried connecting Webflow forms with HubSpot before, you know it felt like trying to fit a square peg in a round API.

A little custom code here, a messy embed there, and before you know it, your form submissions are floating somewhere between Webflow’s CMS and HubSpot’s CRM, much like postcards that never quite reach their destination.

But that was then.

Because Webflow just got a lot smarter with the new HubSpot Form Integration.

You can bid adieu to those awkward workarounds, those third-party tools, and finally enjoy a clean, direct, Webflow HubSpot CRM sync.

However, it’s important to note that the new HubSpot App for Webflow enables a one-way data flow from Webflow to HubSpot, not a full two-way sync.

And as someone who’s spent more late nights debugging webhook issues than I’d like to admit, let me tell you, this update feels like a breath of fresh, perfectly optimized air.

Decoding the chaos before the calm ~ Understanding why this integration matters!

So, one of our longtime e-commerce clients, a sustainable furniture brand, wanted a “Custom Quote Request” form that didn’t lose leads in the shuffle.

Historically, we’d glue Webflow and HubSpot together with Zapier, Make, or custom webhooks (yep, the classic late-night stack), which worked, but introduced delay, complexity, and maintenance.

Well, those days are mostly behind us.

With the rebuilt HubSpot App for Webflow, you can now launch the app directly from the Webflow Designer → Apps panel and map your native Webflow forms to HubSpot so submissions route straight into HubSpot, eliminating the need for middleware and brittle automations.

A small but important nuance to consider is that this direct path applies to Webflow-native forms (or embedded HubSpot forms you drop into Webflow). At the same time, mapped submissions are captured by Webflow first before being securely posted to HubSpot through the integration.

The app essentially leverages HubSpot’s “non-HubSpot forms” tracking system under the hood.

Advanced HubSpot form features, like conditional logic, progressive profiling, or smart fields, may still need you to use actual HubSpot embeds or more custom setups. But for most landing pages and lead-gen forms, the new app wipes out the need for Zapier chains or custom webhooks.

A word of caution, to capture non-HubSpot form submissions correctly, make sure the HubSpot tracking code is active on your Webflow site. The app can automatically enable that site tracking for you from within Webflow.

So, what actually changed?

Instead of being a cosmetic upgrade, it’s more like Webflow trying to say, “We see you, marketers. We got you, devs!”

Here’s what’s genuinely new and working in 2025;

1. Native connection sans the API drama

You can now connect HubSpot directly from the Webflow Designer → Apps panel, log in, and authorize it in a few clicks. Though, full disclosure, some users still hit the occasional “re-auth” bump that needs a reinstall, which might be a small price to pay for ditching middleware.

2. Real form mapping

You can map Webflow-native forms to HubSpot properties, including custom fields. Just match your form input names to HubSpot contact fields, and the app takes care of the rest.
However, a few complex field types (like multi-select dropdowns) can still be fussy, so test before you roll it out to a live campaign.

3. Submission sync that actually sticks

When a visitor submits a Webflow-native form, the app captures the submission inside Webflow first, then posts it straight to HubSpot. Under the hood, it uses HubSpot’s “non-HubSpot forms” tracking feature.

As pointed out earlier, it’s a one-way sync (Webflow → HubSpot), not a two-way CRM handshake. And if you’re using embedded HubSpot forms, those skip Webflow entirely and submit directly to HubSpot.

Occasional hiccups, such as Captcha mismatches, broken mappings, or expired tokens, can cause failed pushes. But when it works (and it usually does), it’s clean.

4. Built-in HubSpot tracking

You can now enable HubSpot site tracking in the app so that every visitor interaction is recorded in HubSpot. It auto-injects the HubSpot tracking code into your Webflow site. Still, we recommend verifying that it’s firing correctly via your HubSpot settings, because you don’t want to lose attribution data in your CRM.

How we set it up (and how you can too!)

Here’s the playbook we now follow at Mavlers whenever a client says, “Can we make our Webflow forms talk to HubSpot?”

Step 1: The pre-flight checklist

Before you even touch the App, make sure you’ve got:

A Webflow site (Designer access) and the ability to install apps from the Marketplace.
A HubSpot account (with at least Marketing Hub Starter permissions or higher).
For your forms plan, are you using Webflow native forms or embedding HubSpot ones? Pick your fighter early.
Your site is published or in staging because you’ll need access to Site Settings for the tracking script.

And yes, if you’re on HubSpot’s free plan, you can still use the integration; however, you’ll just miss a few of the premium styling and automation perks (the fancy stuff lives behind Marketing Pro and Enterprise).

Step 2: Installing the HubSpot App (takes 2 minutes, tops)

Inside Webflow Designer, hit the Apps icon on the left panel or head straight to the Webflow Marketplace.

Search “HubSpot,” click Install, and connect your Webflow site.

You’ll get a prompt to log into HubSpot, review permissions, and authorize the link-up.

Once done, you’ll see “HubSpot” sitting under your Site Settings → Apps & Integrations, and also in the Designer’s Apps panel.

That’s when you know the magic door’s open!

Step 3: Choose your path ~ Webflow forms or HubSpot forms

Here’s where most people overthink things. You’ve got two clear ways to integrate:

Option A: Connect Webflow forms to HubSpot

This one’s my go-to when you’ve already got forms built in Webflow and don’t want to redesign them.

In Designer:

Open your form (standard Webflow Form Block).
Launch the HubSpot App from the Apps panel.
Click “Map Webflow form to HubSpot form.”
Select your Webflow form and map each field (Email → Email, Name → First Name, etc.).
Hit save, publish, and done! From now on, submissions will go both to Webflow and HubSpot.

The form still runs through Webflow first, so submissions count toward your Webflow limit. Also, if you tweak form field names later, hop back into the app to re-map them.

You can visualize it like this:

User → Webflow form submission
↓
Webflow receives it
↓
HubSpot app pushes it straight into CRM
↓
Lead gets auto-enrolled in HubSpot workflows or lists

(Image 1: https://drive.google.com/file/d/11L3iH9DArx5B4CReSH6fHaFxhmVmKIIF/view?usp=drive_link)

Alt tag – connect webflow forms to hubspot

Option B: Embed HubSpot forms directly into Webflow

So, this one’s best if you live and breathe inside HubSpot or want its native analytics and smart field logic.

In HubSpot:

Create or pick your form.
Back in Webflow, open the HubSpot App and choose “Add existing HubSpot form.”
Pick your target section or div block.
Choose whether to keep HubSpot’s native styling (faster) or strip it down and let Webflow handle the CSS (cleaner).
Publish, refresh, smile! Your form now lives inside Webflow but talks straight to HubSpot.

That’s a direct pipeline:

User → Webflow page (HubSpot form embed)
↓
HubSpot serves the form
↓
Submission hits HubSpot instantly
↓
Data flows right into your CRM or automation workflows

(Image 2: https://drive.google.com/file/d/1yolx-R0c1YpHYOyADk1S8g9_VZo1irj2/view?usp=drive_link)

Alt tag – connect hubspot form to webflow

Step 4: Enable tracking and chatbots (because why stop at forms?)

Once your forms are talking, it’s time to enable the HubSpot tracking code in Webflow.
From the App panel, toggle “Enable site tracking.” It’ll automatically add the HubSpot tracking script to your Webflow site footer.

Now, HubSpot can see what pages people visit, what they click, and which forms they fill out, all inside your CRM timeline.

And if you want to go next-level, the Webflow–HubSpot chatbot integration is your secret weapon.
You can paste the HubSpot chat widget code into your Webflow custom code area (a paid plan is required). That means when a lead chats, the conversation and contact info sync right into HubSpot CRM.

Step 5: Test, verify, celebrate

Finally, do a quick sanity check:

Submit a test form (both Webflow → HubSpot and embedded HubSpot).
Head into HubSpot → Contacts → Recent activity to confirm the submission landed.
Check that tracking is firing, page views, clicks, and form fills should show up in Analytics.
Resize your browser and preview your forms on mobile to ensure styling stays tight.

Once all boxes are ticked, you’re officially running a Webflow–HubSpot CRM sync setup that’s elegant, automated, and entirely codeless.

What does this mean for marketers and developers?

For marketers, the Webflow → HubSpot integration removes a lot of friction as you can launch landing pages faster, connect forms directly to CRM workflows, and with HubSpot tracking enabled, you can see leads and session activity appear in HubSpot almost immediately. That’s real-time enough to trigger nurture flows or assign reps without waiting for manual exports.

For developers, it means fewer nights spent babysitting Zapier chains and less time rebuilding custom webhooks as the app reduces common failure points.

However, it’s not a guarantee of zero bugs; mapping mistakes, expired auth tokens, Captchas, or unusual field types can still cause issues, so testing remains essential.

The old “long-distance relationship” between Webflow and HubSpot is much less dramatic now, as native and embedded HubSpot forms now integrate smoothly with HubSpot.