A HubSpot Webflow integration lives or dies on one HubSpot rule: its non-HubSpot forms tool "does not collect information from any hidden fields" (HubSpot Knowledge Base, October 2026). That is the path most Webflow sites use, and hidden fields are where most teams keep UTM values and ad click IDs. The form submits, the contact appears, the success message shows, and the paid campaign gets no credit.
This guide is for a team whose site runs on Webflow and whose CRM is HubSpot: the four form paths, the plan each needs, where the tracking code goes, and the launch test that proves attribution survives. Every limit comes from HubSpot's or Webflow's own documentation, opened on 5 November 2026.
Four ways to connect, and what each one keeps
If the whole site is moving off HubSpot's CMS, our HubSpot to Webflow migration guide covers exports, redirects and the cutover. Here the site is already in Webflow, and the choice comes down to what each path does with data that is not a plain text box.
| Path | HubSpot plan | Styled in | Dropdowns and checkboxes | Hidden UTM fields | Main risk |
|---|---|---|---|---|---|
| Native Webflow form, captured by the tracking code | Any, including free | Webflow Designer | Do not map | Not collected | Partial and duplicate submissions |
| HubSpot iframe embed | Any | HubSpot style editor | Yes | Page scripts cannot reach the iframe | Form looks foreign to the site |
| HubSpot developer code embed via the app | Marketing Hub Professional or Enterprise | Webflow Designer | Yes | Set by HubSpot from the page URL | External CSS can break the form |
| Native form posted to the Forms API by a server handler | Any; private app scopes vary | Webflow Designer | Yes, any property type | Yes, set server-side | Needs a developer and a host for the handler |
Sources: Webflow Apps, HubSpot app listing; HubSpot Knowledge Base, non-HubSpot forms and external forms; Webflow Blog, April and September 2026; HubSpot Developers, Forms API v3
Native capture is the default. Webflow's HubSpot app, now in its second version, connects native forms through HubSpot's non-HubSpot forms feature. Nothing changes in the Designer. Webflow's April 2026 guide states the cost: dropdowns, radio buttons and checkboxes do not reach the CRM.
The iframe embed suits complex forms. Marketers edit the form in HubSpot without a Webflow publish. The trade: scripts on the parent page cannot reach into the iframe (Webflow Blog, September 2026).
The developer embed is the middle path. HubSpot generates the form and the app lets you style it in Webflow. HubSpot asks you to accept that external CSS or JavaScript changes may break it.
The Forms API is the path for paid media. A native Webflow form posts to a small server handler, which sends HubSpot the fields, the visitor's hubspotutk cookie, the page URL and the UTM values. Any property type is accepted.
What each path costs to run
Webflow. The free Starter plan allows 50 form submissions per site and does not include custom code, so the tracking code cannot be installed. Basic, at $15 a month billed yearly, lifts submissions to unlimited. Premium, at $25 a month billed yearly, adds the CMS, which you need if campaign pages are built from a Collection (Webflow pricing, read November 2026).
HubSpot. Native capture and the iframe embed work on any HubSpot plan. The developer embed, styled in Webflow, needs Marketing Hub Professional, listed from $890 a month, or Enterprise, from $3,600 a month billed annually. The Webflow app listing repeats the requirement for its new form editor features.
The handler. Webflow's September 2026 tutorial runs it on Webflow Cloud with a HubSpot private app token stored as an environment variable. The token is tied to the user who created it, so removing that user breaks every call; we would create it under a shared admin login.
If the team already pays for Marketing Hub Professional, the developer embed is usually the cheapest route. If not, the Forms API costs developer time once rather than an upgrade every month.
The tracking code: one copy, on every page
Every path except a pure API call depends on HubSpot's tracking code. It lets HubSpot recognise the site, track form submissions and load features such as live chat.
Where it goes. HubSpot says to paste it just before the closing body tag, which in Webflow means Site settings, Custom code, Footer code. Webflow's April 2026 guide says Head code. Both work; what matters is that there is exactly one, because if several load, only the first fires. That is a real risk where someone pasted the snippet by hand and later installed the app.
Add the domain. Submissions from embedded HubSpot forms on a domain that is not listed in HubSpot's tracking settings are marked as spam, per HubSpot's external forms article. Webflow's April guide adds that accounts created after November 2022 must also list the domain under Privacy and Consent.
Check it after publishing. Search the live page source for hs-script-loader. If it appears twice, fix that first.
Forms that keep attribution intact
HubSpot defines Original Traffic Source as the first known web source through which a contact interacted with your business. On a Webflow site, that link is a cookie.
| Cookie | What it holds | Lifetime | What breaks it |
|---|---|---|---|
| hubspotutk | An opaque ID for the visitor, passed on form submission and used to deduplicate contacts | Six months | Tracking code missing, consent declined, ad blocker |
| __hstc | First, last and current visit timestamps and session number | Six months | Same as above |
Source: HubSpot Knowledge Base, cookies set in your visitor's browser by HubSpot, September 2026
UTMs live in the URL, not the form. Webflow's tutorial notes that HubSpot captures the UTM parameters in the URL at the moment of submission. If an ad lands on a tagged page and the visitor clicks through to a clean-URL demo page, they are gone. Carry them forward on internal links, or store them on first landing and read them back at submit.
Hidden fields only work on two paths. Native capture ignores them. The iframe embed cannot be filled by a page script. That leaves the developer embed, where HubSpot reads the page, and the Forms API, where your handler sends the values as fields. If paid media is a meaningful share of pipeline, this decides the path.
Send the cookie with API submissions. HubSpot's submission endpoint accepts a context object with hutk, pageUri, pageName and ipAddress. Without hutk, HubSpot still creates or matches the contact by email, but it cannot attach the earlier page views. Webflow's tutorial adds that HubSpot does not backfill that history later.
Consent changes the timeline, not the contact. Submissions from visitors who declined tracking still reach HubSpot, without page view history (Webflow Blog, April 2026). HubSpot adds that an ad blocker can block its tracking cookies too. Our post on the analytics stack for a four-week site build covers consent mode for the rest of the tags.
Which path for which form
Most B2B sites have four or five kinds of form. They do not all need the same path.
| Form | Typical fields | Path we would start with | Why |
|---|---|---|---|
| Newsletter sign-up | Email only | Native capture | Text only, low value per lead, no styling cost |
| Contact form | Name, email, message | Native capture or developer embed | Text fields map; a message box needs checking |
| Demo request | Email, company size dropdown, role, consent | Developer embed or Forms API | Dropdowns and consent must reach the CRM |
| Gated content download | Email, company, role | Developer embed | HubSpot handles the follow-up email and lists |
| Paid campaign landing pages | Email plus UTMs and click IDs | Forms API | Only path that sets hidden values server-side |
Source: Octo Agency, based on the field limits in HubSpot's and Webflow's documentation
Our web form conversion statistics cover field counts and multi-step forms; every field you add is one more that has to map.
Spam protection needs a plan. HubSpot's API returns FORM_HAS_RECAPTCHA_ENABLED when CAPTCHA is turned on in the HubSpot form, so API submissions to that form fail. Webflow's tutorial checks a honeypot or reCAPTCHA token in the handler instead.
When a HubSpot Webflow integration drops or doubles submissions
The worst failures are the ones where the form still says thank you, and marketing finds the gap a month later.
| Symptom in HubSpot | Likely cause | Fix |
|---|---|---|
| Every submission appears twice under two form names | Native capture and the app or API both active; Webflow's wf-form- ID prefix | Turn off non-HubSpot capture for that domain, then audit the forms list |
| Field data in the submission but not on the contact | Field name does not match a property's internal name | Rename the Webflow field to the exact internal name |
| Contact has no page views | No hutk: consent declined, script blocked, or code not published | Check consent setup and the published source |
| Original source shows direct traffic for paid leads | UTMs lost between landing page and form page | Carry parameters forward; use the API or developer embed |
| API returns 400 with FORM_HAS_RECAPTCHA_ENABLED | CAPTCHA on in the HubSpot form | Move spam checks into the handler |
Sources: HubSpot Knowledge Base, non-HubSpot forms; HubSpot Developers, Forms API v3; Webflow Blog, April and September 2026
Name the forms. Duplicate form names break mapping, per Webflow's April guide. A footer newsletter form copied to every page under one name is the usual culprit.
Match the internal names. HubSpot maps native fields automatically, first by field name against property internal name, then by label. Names are case-sensitive in practice: "Email" and "first_name" miss; "email" and "firstname" hit.
Mind the cap. An agency running several client sites through one portal shares the 10,000-form limit.
A launch test that proves it works
Before any media spend, we would run this test on the published site, not on staging.
- Open a fresh private window. Testing several leads from one browser makes HubSpot match them all to the same cookie, as Webflow's tutorial warns.
- Arrive from a URL with utm_source, utm_medium and utm_campaign, browse two pages, then submit with a new email address.
- In HubSpot, open the contact. Check that the page views are on the timeline, the original source matches the tagged link, and every field, including dropdowns and consent, is on the record.
- Check the forms list for a second, unexpected form receiving the same submission.
- Repeat with cookies declined and confirm the contact still arrives.
- Delete the test contacts before handover.
Repeat it whenever a form changes.
What this means for a team connecting Webflow to HubSpot
Treat the HubSpot Webflow integration as a decision about each form, not a single setting. Native capture is fine for a newsletter. A demo request with dropdowns needs an embed or the API, and anything fed by paid media needs a path that keeps UTM values. Our comparison of Webflow vs HubSpot CMS covers the earlier question of whether the CRM should host the site at all.
We build marketing sites in Webflow, so we would scope the form paths and the launch test as part of the build, not after it. Our marketing websites service page explains how we scope a Webflow build for a team that keeps HubSpot as its CRM.
