%20(1).jpg)
Webflow handles the website. HubSpot handles the CRM, marketing automation, and lead tracking. Connecting them properly means every form submission, page visit, and conversion event from your Webflow site flows into HubSpot and triggers the right workflows -without manual data entry or sync delays. If you are also comparing HubSpot against Salesforce as a CRM, see our HubSpot vs Salesforce comparison.
This guide covers every integration method, from the native Webflow app to custom API connections, with step-by-step setup, styling guidance, troubleshooting, and advanced use cases for marketing teams that want to get the most from both platforms.
Why integrate HubSpot with Webflow?
The core value is data continuity. A visitor who finds your site through a blog post, fills out a contact form, and books a demo should create a single contact record in HubSpot -with their source, page history, form data, and subsequent email interactions all attached to that record.
Without the integration, form submissions arrive in Webflow's form notification emails and need to be manually entered into HubSpot. Page visit data exists in GA4 but is not connected to contact records. Attribution becomes guesswork.
With the integration in place:
• Every Webflow form submission creates or updates a HubSpot contact automatically
• HubSpot's tracking script records which pages each contact visited before and after submitting
• Contact properties from HubSpot (lifecycle stage, deal stage, email engagement) can inform Webflow personalisation
• HubSpot workflows trigger automatically based on Webflow form submissions and page views
• Marketing attribution from UTM parameters passes correctly to HubSpot for campaign reporting
Integration methods overview
For most marketing teams, the combination of the HubSpot tracking script (for analytics and contact identification) and either the native app or embedded HubSpot forms (for lead capture) covers the full use case without custom development.
Integration setup walkthrough
Method 1: install the HubSpot tracking script
This is the foundation of every other integration. The tracking script enables HubSpot to identify known contacts, track page views, and attribute form submissions to traffic sources.
1. Get your HubSpot tracking code. In HubSpot: Settings > Tracking and Analytics > Tracking Code. Copy the JavaScript snippet.
2. Add to Webflow. In Webflow: Site Settings > Custom Code > Head Code. Paste the HubSpot script into the head code section. This ensures it loads on every page of the site.
3. Publish the Webflow site. The script will not appear on the live site until you publish.
4. Verify installation. In HubSpot, navigate to Reports > Analytics Tools > Traffic Analytics. Visit your Webflow site and confirm the session appears. Alternatively, use the HubSpot Chrome extension to verify the script is firing.
Method 2: embed HubSpot forms in Webflow
HubSpot's form embed code gives you full access to HubSpot's form logic -progressive profiling, conditional fields, and workflow triggers -while placing the form inside a Webflow layout.
5. Create the form in HubSpot. Marketing > Lead Capture > Forms. Build the form with the fields and settings you need. Set follow-up actions (workflow enrollment, notification, redirect) before embedding.
6. Get the embed code. In the form editor, click Actions > Share. Copy the JavaScript embed code.
7. Add to Webflow. In Webflow, add an Embed element to the page where the form should appear. Paste the HubSpot embed code into the embed block.
8. Style the form. HubSpot forms load with HubSpot's default styles. Add custom CSS in Webflow's page settings or site settings to override. Target HubSpot's form classes (.hs-form, .hs-input, .hs-button) in the CSS override section.
9. Test the submission. Submit a test form and verify the contact appears in HubSpot with the correct property values and that any enrolled workflows trigger correctly.
Method 3: use the native Webflow HubSpot app
Webflow's App Marketplace includes a native HubSpot integration that connects Webflow-native forms to HubSpot (webflow.com/apps, verified June 2026). This method works for teams that prefer Webflow's form builder and want to pass submissions to HubSpot without embedding HubSpot form code.
10. Install the app. In Webflow: Apps > Webflow App Marketplace > HubSpot. Connect your HubSpot account via OAuth.
11. Map form fields. After connection, map each Webflow form field to the corresponding HubSpot contact property. Field labels in Webflow do not need to match HubSpot property names exactly -the mapping interface handles the translation.
12. Configure the connection per form. Each form on your Webflow site needs to be individually mapped. Visit each page with a form and configure the field mapping.
13. Test. Submit each form and verify contacts appear in HubSpot with the correct properties.
Embedding forms and styling
Styling HubSpot forms inside Webflow requires CSS overrides. HubSpot's form stylesheet loads last and can override Webflow styles. The most reliable approach:
• Add CSS overrides in Webflow's Page Settings > Custom Code > Before </body> tag for page-specific overrides
• Use !important on critical properties (font-family, border-radius, background-color) to ensure they override HubSpot defaults
• Target .hs-form for the form wrapper, .hs-input for fields, .hs-button for the submit button, and .hs_error_rollup for error messages
• Test on mobile: HubSpot forms default to full-width stacking on small screens, which may differ from your Webflow layout expectations
Advanced features: data sync, workflows, and analytics
Syncing data to HubSpot custom properties
Webflow form fields can pass data to HubSpot custom contact properties, not just default ones. To map to a custom property, create the property in HubSpot first (Settings > Properties > Contact Properties), then reference its internal name (not the display label) in the form field mapping.
Common custom property use cases:
• Preferred service type from a form dropdown -used to trigger service-specific nurture sequences
• Company size from a form field -used to route to the correct sales rep via HubSpot workflows
• Page the form was submitted on - captured via a hidden field populated with the Webflow page URL
Setting up HubSpot workflows from Webflow form submissions
Every HubSpot form submission can enroll a contact in a workflow. The standard pattern for a Webflow-to-HubSpot lead generation setup:
14. Contact submits a Webflow form
15. HubSpot creates or updates the contact record
16. Workflow enrolls based on the form submitted (use 'Form submission' as the enrollment trigger, selecting the specific form)
17. Workflow sets lifecycle stage to Lead or Marketing Qualified Lead
18. Workflow sends a confirmation email to the contact
19. Workflow creates an internal task or sends a notification to the assigned sales rep
Behavioural tracking and contact timelines
With the tracking script installed, HubSpot logs every page visit for known contacts. A contact who downloaded a resource, visited the pricing page three times, and then submitted a demo request will have all of that history on their contact timeline.
This data is available for segmentation (create a list of contacts who visited /pricing in the last 7 days) and workflow triggers (enroll contacts in a high-intent sequence when they visit /pricing twice in a week).
To enable this for anonymous visitors who later identify themselves: ensure the tracking script is loaded on every page, not just pages with forms. Webflow's global site settings custom code section is the correct place for this.
Troubleshooting common issues
SEO and lead generation optimisation
The HubSpot-Webflow integration affects SEO in one specific way: the HubSpot tracking script adds approximately 10-30ms of load time depending on server location and script version. This is generally below the threshold that affects Core Web Vitals, but worth monitoring on pages where LCP is marginal.
Form placement for conversion. Forms placed above the fold on high-intent pages (pricing, contact, demo request) consistently outperform footer-only or sidebar forms. Webflow's visual editor makes testing form placement faster than most platforms.
UTM parameter passing. HubSpot captures UTM parameters from the URL automatically when the tracking script is loaded. Verify that your paid and organic campaigns append UTM parameters consistently, and that HubSpot's traffic source reporting matches your campaign data in GA4.
Thank you page redirects. HubSpot forms can redirect to a custom thank you page after submission. Use Webflow to build a dedicated thank you page with a conversion event fired to GA4 and any pixel you run (Meta, LinkedIn). This gives you cross-platform attribution data.
Alternatives to the native integration
Zapier. Connects Webflow form submissions to HubSpot without the native app. Useful when you need to route submissions through multiple systems (Webflow → Slack notification + HubSpot contact creation). Limitation: one-directional, subject to Zap delay (usually under 2 minutes), and adds a dependency on Zapier's uptime.
Make (formerly Integromat). More flexible than Zapier for multi-step workflows. Supports conditional logic and error handling that Zapier does not. Better for complex routing but requires more setup time.
Custom API integration. For teams that need HubSpot custom objects, two-way sync, or real-time data passing, the HubSpot API is the correct approach. This requires a developer and ongoing maintenance but gives full control over what data moves and when.
Work with Belt Creative
Belt Creative's HubSpot services and Webflow builds integrate correctly from day one -tracking script, form setup, field mapping, workflow triggers, and attribution configured before launch. We also handle custom integrations when the native app does not cover the use case.
See our work for examples of Webflow + HubSpot builds, or get in touch to discuss your integration requirements.
A note on sources
HubSpot tracking code documentation: knowledge.hubspot.com/reports/install-the-hubspot-tracking-code. Webflow App Marketplace (webflow.com/apps, verified June 2026). HubSpot Forms documentation: knowledge.hubspot.com/forms/create-forms. All feature availability and pricing verified at time of writing; confirm with official documentation before implementation.
Frequently asked questions
How long does it take to set up the HubSpot Webflow integration?
The basic integration (tracking script + form embed or native app) takes 1-3 hours for a standard Webflow site. This covers tracking script installation, form field mapping, and test submission verification. Advanced integrations with custom properties, multi-step workflows, and custom API connections take 1-5 days depending on complexity.
Does the integration cost anything beyond HubSpot and Webflow subscription fees?
The native HubSpot tracking script and form embed are included in all HubSpot plans, including free. The Webflow App Marketplace HubSpot app is free. Zapier or Make integrations require paid plans at meaningful usage volumes. Custom API integrations require developer time. No additional platform fees beyond your existing HubSpot and Webflow subscriptions for standard setups.
Can I use Webflow's native forms or do I need to use HubSpot forms?
Both work. Webflow native forms with the HubSpot native app pass submission data to HubSpot via the mapped fields. HubSpot embed forms give you HubSpot's full form logic (progressive profiling, conditional fields, dependent dropdowns) inside a Webflow layout. The native app is simpler to style. HubSpot embed forms are more capable. Choose based on your form complexity requirements.
Will the HubSpot tracking script slow down my Webflow site?
In most cases, no. The script adds 10-30ms of load time and loads asynchronously, meaning it does not block page rendering. For pages where LCP is already marginal (above 2.0s), monitor Core Web Vitals after adding the script. If you see a regression, load the script with a defer attribute rather than synchronously.
Can I pass hidden field data from Webflow to HubSpot?
Yes. Add a hidden field to your HubSpot form or Webflow form and populate it with a value using JavaScript -the current page URL, a UTM parameter from the URL bar, or any other data point you want to capture. Hidden fields are supported by both the native app integration and HubSpot form embed methods.
What happens to existing HubSpot contacts when they visit my Webflow site?
If a known contact visits your Webflow site (they have previously clicked a HubSpot email tracking link or submitted a form), HubSpot's tracking script identifies them via their cookie and logs their page visits to their contact timeline. You can use these page views as workflow triggers and segmentation criteria. Unknown visitors are tracked anonymously and become identified contacts when they submit a form.
Can I personalise Webflow content based on HubSpot contact data?
Not natively, without custom development. HubSpot's personalisation tokens work inside HubSpot emails and landing pages, not Webflow pages. To personalise Webflow content based on HubSpot contact properties, you need a custom integration using the HubSpot API to fetch contact data and JavaScript to update Webflow page content dynamically. This is achievable but requires developer involvement.
What is the best way to handle multi-step forms with HubSpot and Webflow?
HubSpot's native multi-step form feature is the simplest option: build a multi-step form in HubSpot and embed it in Webflow. For more control over the visual design of each step, use Webflow to build the form UI with custom JavaScript to submit each step's data to HubSpot via the Forms API. The latter requires development but gives full design control.
Sources: HubSpot Knowledge Base (knowledge.hubspot.com); Webflow University (university.webflow.com); Webflow App Marketplace (webflow.com/apps). All documentation verified June 2026.
