By Vlad Levun, co-founder of Waves Creative · Updated October 10, 2026
In this article
A Webflow HubSpot integration has two parts: HubSpot's tracking code on every page, and a form path that sends leads into HubSpot. Use HubSpot embedded forms for direct contact sync, or use native Webflow forms sent to HubSpot when design control matters more.
Key takeaways
Webflow's Apps Marketplace includes an official, Webflow-approved HubSpot app. It embeds HubSpot forms, maps native Webflow form submissions to HubSpot and adds HubSpot tracking without custom code. Menu and setting names in both tools change over time, so this guide describes each path in general terms, not exact button labels. Check Webflow Help and the HubSpot Knowledge Base for the current steps. This guide is for marketers and site owners who run a Webflow site and a HubSpot CRM. It does not cover HubSpot's own CMS or Salesforce and Pipedrive connections, and it is not legal advice on consent.
You need edit access, suitable plans and an agreed lead definition. Settle these before you build anything.
Follow these five steps in order so tracking and forms do not conflict:
Install tracking first, so every later form submission is tied to the visitor's history.
In HubSpot, open your account settings and find the tracking code section. Copy the code. In Webflow, open your site settings, go to the site-wide custom code area and paste the code into the head or footer field. Publish the site, then check that the code loads on the live domain.
If you use the Webflow HubSpot app, the app can add tracking for you. Choose one method, either the app or the pasted code, so the script does not load twice.
The tracking code identifies returning visitors, records page views and ties form submissions to a contact's activity history in HubSpot. Without it, you get a name and an email with no context.
Where the law requires it, gate the script behind your consent banner. It should load only after the visitor accepts.
Use embedded HubSpot forms for sales-critical forms. Use native Webflow forms where design control matters most and the field set is simple.
Option A: HubSpot embedded form. Build the form in HubSpot, copy its embed code and paste it into an Embed element in Webflow, or place it through the HubSpot app.
Option B: Webflow native form. Build the form in the Webflow Designer for full design control, then send submissions to HubSpot. The HubSpot app can map native form submissions. Other routes are an automation tool such as Zapier or Make, or custom code using the HubSpot developer APIs.
| Factor | Embedded HubSpot form | Native Webflow form |
|---|---|---|
| Sync to HubSpot | Direct | Via the app, Zapier, Make or API |
| Design control | Needs CSS work | Full, in the Designer |
| Upkeep | Changes made in HubSpot | Connector and mapping to maintain |
How to choose. Pick Option A when the form feeds sales routing or will change often in HubSpot. Pick Option B when the form is short, sits on a design-led page and the HubSpot app can map it. The tradeoff: embeds put fewer moving parts between form and CRM, while native forms keep the page consistent but add a mapping layer. Retest after any form or property change.
Every form field must match a HubSpot contact property. Otherwise its data has nowhere to go.
A field called "Company Name" in Webflow does not match automatically when the HubSpot property has a different internal name, such as company. HubSpot's default contact properties use internal names like firstname, lastname, email and company. Map each field explicitly, and check the internal property name in HubSpot, not only the visible label.
Create custom properties for anything sales needs to qualify a lead, such as company size, region or main interest. Use dropdowns instead of free text where you can, so reports stay clean.
Then add hidden fields for source data. These include UTM parameters (the tags on campaign links that name the source, medium and campaign) and the page URL. For example, create custom properties utm_source, utm_medium and utm_campaign, give the hidden fields the same names and fill them from the URL with a small script. A link ending in ?utm_source=linkedin&utm_medium=paid_social then writes both values to the contact. With these fields, your pipeline report shows which campaigns and pages produce leads, not only how many leads arrived.
Give every submission a lifecycle stage, an owner and a next action in HubSpot. A lifecycle stage is HubSpot's label for where a contact sits in your funnel, such as lead or customer.
We explored this structure in our Arcline CRM concept study. It shows a homepage evaluation flow that leads to one demo action, with conversion events planned from the start.
Test on the published site, not only in preview, and confirm that the lead reaches HubSpot with every field filled in.
yourdomain.com/demo?utm_source=test&utm_medium=qa, and a test email address.We run this live-domain check as part of QA on the Webflow sites we build, because only the published site shows what consent tools, redirects and custom code do to a form.
Plan your conversion events from day one: form submission, thank-you page view and booking link click.
Worked example. A demo form serves buyers in the US and Germany. This example uses a HubSpot embedded form, and the HubSpot script loads only after consent, so a visitor who declines may not see the form at all. Use a consent-independent loading setup for embedded forms, or a native Webflow form as a fallback. A workflow sets the lifecycle stage to lead and assigns an owner by region. Count conversions from HubSpot submissions, not only from analytics, so these leads stay in your pipeline report.
When an integration breaks, check these in order.
To recap: tracking first, one form method per form, explicit field mapping, routing for every lead, then a live test. Start with your highest-value form.
Get help when your setup has grown beyond one form on one page. Typical signs are several forms in several languages, routing rules for a sales team, consent requirements across markets, or leads that are already going missing.
For FBA, we rewrote the positioning and copy, redesigned the site architecture and rebuilt the multilingual marketing site in Webflow with SEO setup and conversion tracking. See more of our work in our case studies.
Waves Creative is a two-person, senior-led studio in Warsaw, co-founded by Vlad Levun and Maria Fedosenko. We join your team and handle brand, website and marketing end to end, and you work directly with the founders.
We design and build Webflow sites, covering design, Webflow development, CMS setup and QA. On a Webflow HubSpot integration, that means building the forms and tracking in Webflow, connecting them to HubSpot and testing on the live site. After launch we stay on for SEO, campaigns and site improvements.
We do not guarantee specific revenue, rankings or conversion numbers. We commit to structure: clear positioning, a deliberate CTA hierarchy and tracking, so you can measure and improve your results.
Book a 30-minute call to walk through your setup, or request a proposal if your scope is already clear.
How we checked this. Plans, prices, limits and platform features come from the vendors' official pages, checked on October 10, 2026: Webflow pricing, Webflow hosting, Webflow: legacy Editor FAQ, Webflow: legacy Editor deprecation, Webflow: HubSpot app, Webflow: Salesforce integration. We use only facts we could find on those pages, and we update this article when a vendor changes them. Spotted an error or an outdated price? Email hello@wavescreative.co and we will correct it.
About the author. Vlad Levun is co-founder of Waves Creative, a senior studio in Warsaw that joins growing companies' teams and handles brand, website and marketing end to end. Waves designs and builds client websites on Webflow, from design and development to CMS set-up and QA.
We review your homepage and key pages and send back a prioritised list of fixes.