By Mehdi HassanHow do you connect Webflow forms to HubSpot?
You connect Webflow forms to HubSpot in one of four ways: the HubSpot app for Webflow, an embedded HubSpot form, an automation tool such as Zapier or Make, or a custom API call. For most marketing sites, the app is the right default because it keeps Webflow's form design and sends each submission to a real HubSpot form.
The options differ less in whether the lead arrives than in what arrives with it: original source, campaign, pages read and consent are what sales and marketing actually need. If you're still deciding what the form should ask and where it sits on the page, start with our guide to calls to action and our advice on how many form fields to use.
Option | Design control | Attribution | Who edits fields | Best for |
|---|---|---|---|---|
HubSpot app, native Webflow form | Full, it's your Webflow form | Good with the tracking code installed | Webflow editor, names must match | Simple lead forms with text fields |
Embedded HubSpot form | In HubSpot, or in Webflow via developer embed | Built in | Marketing, inside HubSpot | Forms that change often |
Zapier or Make | Full | Weak unless you post to the form API | Webflow editor plus the automation | Routing to several tools |
Custom API call | Full | Full, if you pass the cookie and page | A developer | Complex routing and spam rules |
Non-HubSpot forms collection | Full | Partial, fields matched by name only | Nobody, it's automatic | Simple newsletter forms |
What does the HubSpot app for Webflow do?
The HubSpot app for Webflow connects your site to a HubSpot account and, according to Webflow's help center, offers three ways to add a form: an iframe embed of a HubSpot form, a developer embed you can style in Webflow, and a native Webflow form connected to HubSpot. The native option runs on HubSpot's non-HubSpot forms script, so you turn that setting on in HubSpot and match each field's name to the HubSpot form.
The app also switches on HubSpot's site tracking and a chatbot from its settings. Webflow still documents a legacy version, which mapped an existing Webflow form field by field and posted each submission to Webflow before sending a copy to HubSpot. If your project was connected years ago, check which version you're on, because they behave differently.
Know the limits before you design the form. The native form option supports only text input fields, so dropdowns, radio buttons, checkboxes and text areas need a HubSpot embed. The developer embed requires a HubSpot Marketing Professional or Enterprise plan and forms built in HubSpot's new form editor. Check Webflow's help center for current requirements.
How do you set up the Webflow HubSpot integration step by step?
The reliable order is HubSpot first, Webflow second, testing last. Build the destination form in HubSpot so the fields, properties and follow-up actions exist before anything points at them.
Create the HubSpot form
Build it in HubSpot's new form editor with a field for every input, and set the notification, lifecycle stage and follow-up email.
Install the HubSpot app in Webflow
Add it from Webflow's Apps marketplace and authorize your HubSpot account. You need Site Admin or Designer permissions in Webflow.
Turn on tracking
Turn on activity tracking in the app's settings, or add HubSpot's tracking code site-wide, so the cookie exists before anyone submits.
Add or embed each form
For a native form, enable non-HubSpot forms in HubSpot and keep every field name matched, starting with email. For dropdowns or checkboxes, embed the HubSpot form.
Decide how UTMs reach HubSpot
The tracking code records the visit's source. To store UTMs as properties, use hidden fields in an embedded HubSpot form or a custom submission, because non-HubSpot forms ignore hidden fields.
Publish and test from a campaign link
Publish to staging, submit from a URL with UTM parameters, and check the contact's source, properties and page history.
Then test a validation error, a duplicate email and an ad-blocking browser. Our guides to the thank-you page and conversion microcopy cover what people see after the submit and when a field is wrong.
When should you embed a HubSpot form instead?
Embed a HubSpot form when the marketing team needs to change fields, options and follow-ups without touching Webflow. HubSpot's own form handles the tracking cookie, progressive profiling and dependent fields, and with the iframe embed, edits go live without a site publish.
The cost is design and speed: an iframe embed is styled in HubSpot, the developer embed needs a paid Marketing plan and a refresh whenever the form changes, and both load a third-party script that can shift the layout. On a high-traffic demo page we'd rather use a native Webflow form. On a gated asset that marketing changes monthly, the embed is fine.
Pros
- Marketers edit fields in HubSpot, with no Webflow publish for iframe embeds
- Tracking cookie, progressive profiling and dependent fields work out of the box
- One source of truth for the form's definition
Cons
- Harder to match your design without the developer embed's paid plan
- Extra script weight and possible layout shift while it loads
- Can be hidden by ad blockers, so some visitors see no form
Is Zapier or Make good for Webflow forms CRM sync?
Zapier or Make is good when one Webflow form has to feed several tools at once, such as HubSpot, a Slack channel and a spreadsheet. It's weaker when HubSpot attribution matters, because the usual HubSpot action creates or updates a contact directly rather than submitting a form.
A contact created that way has no form submission behind it, so it isn't tied to the visitor's tracking cookie, and the page history and original source don't attach. If you need both, use the automation tool's HTTP step to post to HubSpot's form submission API with the tracking cookie value, page URL and page name in the context. Webflow's form webhook comes from Webflow's servers, so the cookie only arrives if a hidden field captured it on the page.
Hypothetical example: capturing UTMs and the HubSpot cookie in a Webflow form
For example, suppose a demo form gets traffic from paid search and LinkedIn. Add hidden inputs for utm_source, utm_medium, utm_campaign and hutk with a code embed. A short footer script stores the UTM parameters on arrival, writes them into the hidden inputs on any page with the form, and copies the hubspotutk cookie into hutk if it exists.
This doesn't work with the app's native form option, because non-HubSpot forms ignore hidden fields. With Zapier, Make or custom code, send the UTMs as fields and hutk in the context of the form submission call. A visitor who arrives from an ad and converts three pages later still shows the campaign on their record.
When is a custom API integration worth it?
A custom integration is worth it when the form needs logic the app can't express: routing by company size, enrichment before the CRM write, server-side spam checks or writes to several HubSpot objects. The pattern is a Webflow form posting to a small serverless function that validates the data and submits it to HubSpot.
This is the same pattern we use on coded sites, explained in our Next.js forms integration guide. On Webflow, the extra work is owning that endpoint after launch: someone has to watch for failed submissions and update the mapping when HubSpot properties change.
Does HubSpot capture Webflow forms automatically?
HubSpot can capture some Webflow forms automatically through its non-HubSpot forms setting, which collects submissions from HTML forms on pages running the tracking code. It's the mechanism behind the app's native form option too. On its own it's a fallback, not a plan, because you can't map fields manually: HubSpot matches them by name or label, and only to single-line text properties.
HubSpot's knowledge base sets strict requirements: static HTML with an email input and a submit button, no iframe, present at page load and no JavaScript bound to the submit event. Hidden fields aren't collected, so UTMs don't come through. It suits a footer newsletter signup; for lead forms, use the app. Moving from HubSpot CMS? Our HubSpot to Webflow migration guide covers the switch, and HubSpot CMS vs Webflow covers whether to make it.
Which Webflow HubSpot integration should you choose?
Choose the HubSpot app's native form option for simple lead forms, the embed for forms marketing edits often, and custom code only for logic the app can't handle. Use automation tools for side effects like Slack alerts, not as the main path.
Whichever you pick, the site side needs the same three things: the tracking code on every page, UTMs captured into fields and a real test before launch. If you want it built and tested as part of a site, our Webflow development work and our HubSpot integration setup cover forms, tracking and field mapping together.
