How to Embed HubSpot Forms in Webflow (Native vs Custom)

There are two clean ways to embed a HubSpot form in Webflow. The native embed drops HubSpot's official <script> and form ID into a Webflow Embed element — fastest to ship, but styling fights HubSpot's own CSS. The custom form uses a Webflow-built form that posts to HubSpot via the Forms API — full design control, but you own the submission, validation, and tracking yourself. Pick native when you want speed and reliable attribution; pick custom when design matters more than setup time.

Native embed vs custom HubSpot form in Webflow: which should I use?

The fastest path is the native HubSpot embed. In HubSpot you create the form, copy the embed code (a small script plus your portal ID and form ID), and paste it into a Webflow Embed element where you want the form to appear. HubSpot renders the form, handles validation, fires its own analytics, and the submission lands in your CRM with no extra wiring. That last part matters: native embeds carry HubSpot's tracking cookie and hutk token automatically, so contact attribution and lifecycle stages stay accurate.

The trade-off is styling. HubSpot ships its own form CSS, so a raw embed rarely matches your Webflow design out of the box. You can override it, but you're styling someone else's markup.

The custom route means you build the form in Webflow's native form builder, capture the fields yourself, and send them to HubSpot's Forms API on submit (usually through a small bit of JavaScript or a tool like Make/Zapier). You get pixel-perfect design, but you take on validation, error states, spam protection, and — most importantly — passing the hutk cookie so HubSpot can still attribute the lead.

For a deeper look at the same trade-off on WordPress, see the HubSpot forms on WordPress playbook.

How do I embed a native HubSpot form in Webflow step by step?

The native embed takes about five minutes:

1. In HubSpot, go to Marketing → Forms, build or open your form, and click Share → Embed.
2. Copy the full embed snippet. It contains the loader script (js.hsforms.net) and a hbspt.forms.create({...}) call with your portalId, formId, and region.
3. In the Webflow Designer, drag an Embed element to the spot where the form should sit.
4. Paste the snippet, save, and publish — the form will not render inside the Designer canvas, only on the live or staging site.

A few things that trip people up. The Embed element has a code limit, so very long snippets can get cut — paste only the form code, not your whole tracking setup. Put HubSpot's main tracking script (hs-scripts.js) once in Project Settings → Custom Code → Head, not inside the form embed. And always test on the published .webflow.io staging URL before going live, because the Designer preview will look empty.

How do I style a HubSpot form to match my Webflow design?

You style a native HubSpot form with custom CSS that targets HubSpot's class names, added in Webflow's page or site custom code. HubSpot wraps every form in predictable classes — .hs-form, .hs-input, .hs-button, .hs-error-msgs — and you write rules against those. Because HubSpot's own stylesheet is specific, you often need to match or raise specificity (scope your selectors under the form's container, or use !important sparingly on stubborn properties like background and border).

A reliable pattern: wrap the Embed element in a Webflow div with a class like hs-wrap, then write rules such as .hs-wrap .hs-input { ... }. This keeps your overrides scoped and easy to maintain. Match your design tokens — font family, border radius, brand color, focus ring — so the form reads as part of the page, not a bolted-on widget.

If you find yourself fighting HubSpot's CSS for hours, that's the signal to switch to the custom route, where the markup is yours from the start. The honest rule: native gets you most of the look in a fraction of the time; the last bit of polish is where custom starts to pay off.

Native embed vs custom form: the trade-offs

The pattern most B2B teams land on: native embed for high-intent forms (demo, contact, pricing) where attribution and HubSpot features matter most, and a custom form only where a specific design demands it.

How do I keep tracking and attribution working with a custom form?

The piece people forget is the HubSpot tracking cookie, named hubspotutk. When a visitor browses your site, HubSpot's tracking script sets this cookie. The native embed reads it automatically and ties the submission to that visitor's full session history — pages viewed, original source, campaign. A custom form bypasses all of that unless you send the cookie yourself.

To keep attribution intact with a custom Webflow form, read the hubspotutk cookie value in JavaScript on submit and include it in your Forms API request body as the hutk context field, along with pageUri and pageName. Skip this and HubSpot still creates the contact, but the lead arrives with no source, no session, and no first-touch — which quietly breaks every report that depends on attribution.

Also confirm HubSpot's main tracking script is loaded site-wide (Project Settings → Custom Code → Head), or the cookie is never set in the first place. For why this kind of measurement plumbing matters before you trust any number, see the analytics consent and tracking playbook.

A note on whether Webflow is the right home for the form

Plenty of B2B teams outgrow Webflow's form layer once they need real design control, fast pages, and clean tracking — at which point the form, the tracking, and the page all live in code you own. That's the direction a lot of modern marketing sites take: a Next.js and React stack where a HubSpot form is just a component, styling is yours by default, and the hutk handoff is a few lines you control. We build that way at Greeto, and AI handles the repetitive wiring while a human reviews every form before it ships — see how we build websites with Claude Code. If you're weighing a platform move, the WordPress-to-Next.js migration guide covers the same decision for a different starting point.

FAQ

Why doesn't my HubSpot form show up in the Webflow Designer?

HubSpot forms render through JavaScript that only runs on the published site, not inside the Webflow Designer canvas or the Designer's preview. This is normal. Save your changes, publish to your .webflow.io staging domain, and view the form there. If it still doesn't appear, check that you pasted the complete embed snippet and that your portal ID and form ID are correct.

Can I style a native HubSpot form to match my brand in Webflow?

Yes. Add custom CSS in Webflow targeting HubSpot's class names — .hs-form, .hs-input, .hs-button, .hs-error-msgs — scoped under a wrapper div so your overrides stay contained. You'll often need higher specificity than HubSpot's own stylesheet. If matching the brand exactly takes too long, a custom Webflow form that posts to HubSpot gives you full control instead.

Will a custom Webflow form still track HubSpot attribution?

Only if you pass the tracking cookie yourself. Read the hubspotutk cookie on submit and include it as the hutk field in your Forms API request, along with pageUri and pageName. Without that step, HubSpot creates the contact but loses the source, session history, and first-touch attribution that reports depend on.

Is the native embed or the custom form better for B2B lead forms?

For most B2B forms — demo, contact, pricing — the native embed is better because attribution, smart fields, and progressive profiling work automatically and need no maintenance. Choose a custom form only when a specific design requirement can't be met by overriding HubSpot's CSS, and accept that you'll own validation, spam protection, and the tracking handoff.

Do I need HubSpot's tracking script if I only use embedded forms?

Yes, install it once site-wide in Project Settings → Custom Code → Head. The tracking script sets the hubspotutk cookie that links form submissions to a visitor's full session. Without it, even native embeds capture the lead but lose source and session context, so your attribution reports go blank.