HubSpot forms on Webflow: three setups that keep tracking intact

Your site is on Webflow, your CRM is HubSpot, and every enquiry should reach HubSpot as a contact with the pages that person read first. Creating the contact is easy. Keeping that history attached is where setups quietly fail. There are three ways to connect the two, and each handles fields, styling and the tracking cookie differently.

When should you embed a HubSpot form?

Embed when marketing wants to own the form in HubSpot. HubSpot handles fields, validation and contact creation, and with the tracking code on the page it links each submission to the visitor's earlier visits. HubSpot's app for Webflow offers two embeds. The iframe is managed entirely in HubSpot, so saved changes show on the live site without republishing. The developer embed renders the form's HTML in Webflow, so you style it in the Style panel.

The trade-off is control and upkeep. The iframe keeps HubSpot's styling. The developer embed depends on your HubSpot subscription, and after a structural change in HubSpot you pull the layout again in the app and recheck every form state. Either way the form loads from HubSpot, which doesn't support self-hosting its embed code, so include it in speed checks. Place the form in a div or container, never inside a Webflow Form block.

Can a native Webflow form send leads to HubSpot?

Yes, for short forms. The app's Webflow form option uses HubSpot's non-HubSpot forms tool: once Collect data from website forms is switched on in HubSpot's settings, the tracking code captures standard HTML form submissions on your pages. Styling stays entirely in Webflow. Know the limits first:

• Only text inputs are supported: no dropdowns, radio buttons, checkboxes or text areas.
• The form needs an email input (type="email"), and hidden fields are ignored.
• Fields match single-line text properties automatically, by name or label, with no manual mapping.
• Every click on submit is recorded, so a failed validation attempt can leave a partial submission.
• Capture depends on the tracking code loading. If a browser extension blocks it, the lead never reaches HubSpot.

When is a custom Forms API submit worth it?

Choose the API when you want Webflow styling with field types the app can't map, your own validation, or a server-side submit that doesn't rely on HubSpot scripts in the browser. Your code sends the field values plus a context object to HubSpot's submit endpoint. Two parts of that context keep attribution intact: hutk, the value of the visitor's hubspotutk cookie, and the page URL and name.

POST https://api.hsforms.com/submissions/v3/integration/submit/{portalId}/{formGuid}
{
  "fields": [
    { "objectTypeId": "0-1", "name": "email", "value": "jane@example.com" },
    { "objectTypeId": "0-1", "name": "firstname", "value": "Jane" }
  ],
  "context": {
    "hutk": "<value of the hubspotutk cookie>",
    "pageUri": "https://www.example.com/contact/",
    "pageName": "Contact us"
  }
}

The endpoint accepts cross-origin requests from the browser, and HubSpot also offers a version that requires authentication. Webflow's custom code runs only HTML, CSS and JavaScript, so a server-side submit lives in a small function hosted elsewhere, with the page passing it the cookie value. Without hutk, HubSpot may not connect the contact to earlier page views. Without the page URL and name, it can't record where the submission happened.

What keeps tracking intact?

The HubSpot tracking code on every page, plus the visitor's consent. HubSpot tracks visitors anonymously with a cookie and, when they submit a form, attaches their earlier page views to the contact. Without the code, an embedded HubSpot form still collects submissions but there is no site tracking, and the Webflow form option captures nothing. In Webflow, switch on Track user activity on site in the HubSpot app's settings, or paste HubSpot's code into Site settings > Custom code > Footer code. Not both: HubSpot advises against more than one tracking code on a page.

Consent decides whether that history exists. HubSpot lists hubspotutk as an analytics cookie controlled by the consent banner. If a visitor declines, the tracking code still runs but sets no identifying cookies, so they can still become a contact, just without page views on the record. That is expected, not a broken integration. Our guide to cookie banners for small business websites covers the banner itself.

How do you test a submission end to end?

1. Publish to staging, open a private window, accept the cookie banner, browse a few pages and submit.
2. In HubSpot, check each field landed in the right property and the earlier page views appear on the contact.
3. Check the submission shows its source page. If not, the tracking code isn't firing or the API call lacks the page URL and name.
4. Repeat in a new private window, declining cookies this time. The contact should arrive without page history.
5. Test from a network that isn't excluded from your HubSpot analytics, or page visits won't be counted.

Which option should you choose?

• Marketing edits forms often, without a developer: embed the HubSpot form, using the iframe if your plan lacks the developer embed.
• A short lead form of text fields on a design-led site: the app's Webflow form option is quick and looks native.
• Dropdowns or checkboxes in your own design, or paid traffic where every lead's source matters: a Forms API submit through a small server function. More setup, most control.

Where to start

List every form on the site, the fields it collects and where each lead should land in HubSpot, then pick an option per form. If you want it set up and tested end to end, our automation and integrations service connects HubSpot to your site, or tell us about your forms.