Webflow HubSpot Integration: What It Actually Takes to Make It Work
- Start with the native HubSpot app and the tracking code in site-wide Head Code. That covers most teams on day one.
- Set up HubSpot properties before you build forms, so every field lands in the right place.
- Capture UTMs on landing and pass them on every form submit. Without that, paid leads show up as Direct Traffic.
- Webflow’s native forms submit without a page reload, so tracking events need a GTM or JavaScript trigger.
- Move to Make, Zapier or the HubSpot Forms API only when you need routing, multi-step forms or a second system.
- Give one person ownership of the whole integration and review it every quarter.
There are three ways to connect Webflow and HubSpot: the native HubSpot app, embedded HubSpot forms, or Webflow forms sent to HubSpot through Make, Zapier or the API. For most B2B SaaS teams, the native app plus UTM capture is the right start and takes only an afternoon. The part teams skip is field mapping and attribution.
That’s what this guide focuses on: how to connect the two, which HubSpot properties to set up first, how to stop paid leads showing up as Direct Traffic, and what breaks after launch.
What Does a Webflow HubSpot Integration Need?
Three layers on top of the basic connection. In our projects, we see most teams stop at the tracking code and an embedded form, then wonder why HubSpot data is incomplete or attribution is wrong. These three layers fix that:
Layer 1: Data Architecture
Every form field needs to land in the right HubSpot property. If properties aren’t set up in advance, or field names drift between pages, your contact records get too messy to segment or automate.
Layer 2: Tracking and Attribution
Knowing someone converted isn’t enough. You need to know which campaign, channel, page and piece of content got them there. That’s what makes marketing spend defensible, and it’s where most integrations quietly fail.
Layer 3: Workflow Logic
A form submit is the start of a process. Decide before launch who gets notified, which lifecycle stage the contact enters, and whether they go to nurture or straight to sales. Otherwise leads pile up with nowhere to go.
How Do You Connect Webflow and HubSpot?
Install the HubSpot app, add the HubSpot tracking code site-wide, and decide whether your forms stay native to Webflow or are embedded from HubSpot. The table below helps you pick.
The Native HubSpot App (The Easiest Starting Point)
HubSpot has a native Webflow app, available in the Webflow Apps marketplace. It’s the simplest way to connect the two and doesn’t need a developer. Once installed, it sends Webflow form submissions to HubSpot, creates contacts and lets you enroll them in basic workflows.
It’s a good fit for smaller teams that want a reliable start. The trade-off is flexibility: you can’t customize attribution fields or capture UTMs without extra setup.
Choosing Your Full Integration Strategy
Once you need more than the basics, pick based on how much control you need:
| Approach | How It Works | Best For |
|---|---|---|
| Native HubSpot App | One-click install, syncs Webflow forms to HubSpot natively | Fast setup, smaller teams, limited customization needed |
| Embedded HubSpot Forms | HubSpot form iFrame placed inside a Webflow element | Native automation triggers, teams comfortable with HubSpot's form styling |
| Webflow Forms + Make or Zapier | Webflow handles the UI; middleware routes data to HubSpot | Full design control with moderate automation complexity |
| Custom API Integration | Form submits directly to HubSpot Forms API via JavaScript | Full control over UX, attribution data, and routing logic |
For most growing B2B SaaS teams: start with the native app or embedded HubSpot forms, then add attribution and routing as your reporting needs grow. Don’t over-engineer on day one, but build something you won’t have to replace.
Getting Tracking Right Site-Wide
Put the HubSpot tracking script in Webflow’s Project Settings → Custom Code → Head Code, not page by page. That way HubSpot tracks every visit, builds a timeline per contact, and records the source before anyone fills in a form. Skip this and you lose first-touch attribution.
How Do You Map Webflow Form Fields to HubSpot Properties?
Before any form goes live, give every field a matching HubSpot property. It’s a marketing decision more than a technical one: what do you need to segment leads, what does sales need before a first call, and what drives your automation?
For every field, define:
- What information it captures and why it matters.
- The exact HubSpot contact property it should populate.
- Whether it’s visible to the visitor or hidden (capturing source data automatically).
- Whether it’s required or optional and what that means for data completeness.
The most common mistake is building forms first and mapping later. Fields without a matching property end up as messy free text, or get lost.
How Do You Track Attribution From Webflow to HubSpot?
Capture UTMs on every visit, store them in HubSpot properties through hidden form fields, and record the page where each form was submitted. Then your HubSpot reports can show which campaigns create MQLs, which content leads to pipeline, and which channels bring leads that close, not just form fills.
What “good attribution” actually requires:
HubSpot gives you first and last touch by default. For B2B SaaS, where buyers visit several times over weeks before converting, you also need the touches in between. That means consistent UTMs on every campaign, stored in contact properties so they outlast the first visit.
The UTM persistence problem:
UTMs disappear from the URL as soon as a visitor clicks to another page. So a lead who came from a LinkedIn ad and converted three pages later shows up in HubSpot as Direct Traffic. The fix is a small script that saves UTMs on landing and adds them to hidden fields when the form submits. Our guide to Webflow form tracking with GTM shows the setup.
Page-level intent signals:
A demo request from the pricing page is a different conversation than one from a blog post. Capture the submission URL in a hidden field, so sales sees the context and marketing sees which pages convert.
HubSpot vs. Google Analytics:
They’ll never match exactly: different attribution models, cookie windows and script timing. Don’t try to reconcile them. Let HubSpot own leads and pipeline, and GA4 own traffic and engagement.
What Does a Good Integration Give Your Marketing Team?
Four things you’ll notice quickly:
- Faster campaigns: new landing pages go live in Webflow without a developer and connect straight to the right HubSpot workflows.
- Better leads, not just more: forms that capture role and company size let HubSpot score leads, so sales only sees the ones that meet the bar.
- Personalized follow up: accurate properties let you send different nurture emails by industry, company size or lifecycle stage. For on-page personalization, use Webflow Optimize.
- Attribution you can defend: HubSpot can show which channels and campaigns contributed to closed revenue, not just form fills.
When Do You Need More Than the Native App?
When you need any of the following. The native app and a standard embed can’t do these on their own:
- Multi-step qualification forms - progressive forms that qualify leads without overwhelming them, routing to different workflows based on answers.
- UTM persistence across page navigations - ensuring campaign data follows the visitor to wherever they convert on the site.
- Progressive profiling - showing different form fields to returning visitors so HubSpot records fill in over time, not all at once.
- Multi-system routing - leads that need to reach both HubSpot and a secondary tool (Salesforce, Intercom, etc.) simultaneously based on conditions.
- Behavioral conversion events - tracking actions like video views, scroll depth on pricing pages, or CTA engagement as HubSpot events that contribute to lead scoring.
None of these require rebuilding the integration. A good team adds them on top of what already works.
Zapier, Make or the HubSpot API: Which Should You Use?
Make if you need conditional routing or a second system, Zapier for simple field-to-field syncs, and the HubSpot Forms API if a developer or agency is building it. Here’s how they compare:
| Tool | Best For | Limitations |
|---|---|---|
| Native HubSpot App | Fast setup, no technical resource needed | Limited field customization and attribution logic |
| Zapier | Simple field-to-field mapping, fast to launch | Limited conditional logic, higher cost at volume |
| Make | Complex multi-step workflows, conditional routing | Steeper learning curve |
| HubSpot Forms API (direct) | Full control, cleanest and most reliable data | Requires developer time to implement |
| n8n (self-hosted) | Technical teams wanting full data ownership | Requires infrastructure to manage |
Want to skip Zapier altogether? Use the native HubSpot app for simple syncs, or send forms straight to the HubSpot Forms API.
Which HubSpot Properties Should a SaaS Team Set Up First?
These eight, before any form goes live. Adding them later means rework:
- Lead Source (custom dropdown): Beyond HubSpot’s default source tracking, a custom dropdown lets your team define a source taxonomy that matches your actual channel mix.
- UTM Source, Medium, Campaign: Dedicated text properties for storing UTM data passed through hidden fields - essential for campaign attribution.
- First Conversion Page: The URL where the contact submitted their first form, showing which page originally converted them.
- Last Conversion Page: The most recent submission page, showing where re-engaged or returning leads are converting.
- Product Interest: A multi-checkbox or dropdown indicating which product lines, features, or use cases the lead engaged with.
- Company Size (self-reported): Separate from enriched data, this captures what the visitor actually said about their company, which matters for qualification.
- ICP Score: A numeric or label field populated automatically by workflow logic based on role, company size, and industry, used to prioritize sales outreach.
- Campaign Name (custom): A text field for storing the specific campaign a lead came from, beyond what HubSpot captures natively.
Set these up once, and every workflow, report and contact record becomes more useful.
What Breaks a Webflow HubSpot Integration?
Five things, and all of them are avoidable:
Treating the integration as a one-time setup:
Site updates, HubSpot changes and team turnover all cause drift. An integration that worked at launch can be quietly broken six months later. Review it every quarter.
Skipping attribution from the start:
“We’ll add UTM tracking later” usually means never. Every form submit without source data is a permanent gap in your reports.
Over-engineering the form:
Long forms convert worse. Ask only what you need for routing and qualification, and fill in the rest later with progressive profiling.
No single owner for the integration:
When marketing builds the forms, a developer handles the scripts and someone else runs HubSpot, field mapping drifts and nobody notices. Give one person the whole integration.
Building automation before validating data:
Lead scoring, lifecycle workflows and nurture all depend on clean data. Check that fields and UTMs fill in correctly before you build logic on top.
The Bottom Line
Done properly, every campaign adds attribution data, every mapped form sharpens your segments, and every quarter you can answer the questions that matter: which channels create revenue, and which campaigns moved deals. Teams that stop at “tracking code in, form embedded” spend the next two years arguing about why HubSpot numbers don’t match reality.
Need it set up right the first time? Our Webflow development team sets up HubSpot integrations, including attribution and routing.
Frequently Asked Questions
Not for the basics. A marketer can install the native HubSpot app and sync Webflow forms. For UTM capture, multi-step forms, API submissions or complex routing, bring in a developer or a Webflow agency that has done HubSpot integrations before.
The native app sends Webflow’s own forms to HubSpot, so you keep Webflow’s design. An embedded HubSpot form is HubSpot’s form placed inside your Webflow page: it triggers HubSpot workflows more reliably and supports progressive profiling, but you’re limited to HubSpot’s styling.
Because the UTMs aren’t being saved. They disappear when the visitor moves to another page, so by the time they submit a form, HubSpot can’t see the source. Fix it with a script that stores UTMs on landing and adds them to hidden form fields on submit.
Check three things: that HubSpot registers the form submission (look under Forms), that your enrollment criteria match the incoming data, and that the contact isn’t blocked from re-enrolling. Test with a fresh email address and check the contact timeline.
Every quarter, and after any big change: a redesign, new forms, a HubSpot portal change, new UTM naming or a new owner. Small mapping errors quietly add up to reports nobody trusts.
