.svg)
Introduction
If your business runs on HubSpot and your website is built on Webflow, connecting the two is not optional. It is essential.
The good news is that there are multiple ways to do it, and the right method depends on how much design control you need and how complex your lead flows are. This guide covers every approach clearly so you can pick the one that fits your setup.
We have implemented HubSpot integrations for several of our Webflow clients, so everything here comes from real project experience.
Method 1: HubSpot Form Embed
This is the simplest option. You take HubSpot's native embed code and paste it into a Webflow Embed element. The form renders on your site and submissions go directly into HubSpot.
How to set it up:
- In HubSpot, go to Marketing, then Lead Capture, then Forms
- Create or select your form and click Share
- Copy the embed code snippet
- In Webflow Designer, add an Embed element where you want the form to appear
- Paste the HubSpot embed code into the element
- Publish your Webflow site
What works well:
- Fastest to set up, typically under 10 minutes
- All HubSpot form logic works natively, including conditional fields and progressive profiling
- Submissions go directly into HubSpot with full contact property mapping
What to watch out for:
- Form styling is controlled by HubSpot, not Webflow
- Custom CSS overrides are needed to match your site design
- The HubSpot script adds some page weight
Method 2: Webflow Native Form with HubSpot Integration
This is the recommended approach for most SaaS websites and design-critical projects. You build your form entirely in Webflow for full visual control, then connect it to HubSpot via Zapier, Make, or the HubSpot API.
How to set it up:
- Build your form using Webflow's native Form element
- Name each field to match your HubSpot contact properties, for example email, firstname, company
- Connect via Zapier by setting a trigger for New Form Submission in Webflow and an action to Create or Update Contact in HubSpot
- Map your form fields to the correct HubSpot properties in Zapier
- Test with a live submission before going live
What works well:
- Full design control, your form matches your site perfectly
- No HubSpot script weight on the page
- More flexibility for complex workflows like triggering sequences, tagging contacts, or notifying your team in Slack
What to watch out for:
- Requires a Zapier or Make subscription, or custom development time
- Progressive profiling does not work natively without additional logic
- More initial setup compared to the embed method
Which Method Should You Choose
Here is a simple decision guide:
- Simple contact form with basic styling needs - Use the HubSpot embed method
- Design-critical forms on key pages like your homepage or pricing page - Use Webflow native form plus Zapier or Make
- Complex workflows with multiple sequences and conditional logic - Use Webflow native form plus Make plus the HubSpot API directly
For most startup websites, we recommend Method 2. The design quality difference on high-converting pages is significant, and the Zapier setup takes less than an hour once you know what you are doing.
Troubleshooting Common Issues
A few things that trip people up when connecting Webflow and HubSpot.
HubSpot form not submitting? Check that your Webflow site is published to a live domain, not just previewed. HubSpot forms require the published domain to work correctly.
Zapier not picking up new submissions? Verify that the Webflow form Name attribute matches exactly what Zapier expects. Always test by submitting a real form entry after setting up the Zap, not using Zapier's sample data.
Styling issues with the HubSpot embed? Use the HubSpot form editor's built-in style override settings first. For deeper customization, add CSS to your Webflow page's custom code targeting HubSpot's class structure.
Connecting HubSpot Tracking to Webflow
Beyond forms, you should also install the HubSpot tracking code site-wide on your Webflow site. This enables HubSpot analytics, live chat, and contact activity tracking across all pages.
To do this, go to Site Settings in Webflow, then Custom Code, then paste your HubSpot tracking script into the Head Code section. Once published, HubSpot will start logging page views and session data for every visitor.
This is something we set up as standard practice on all of our Webflow builds for clients using HubSpot.
Conclusion
For most business sites, the Webflow native form plus Zapier or Make integration gives the best balance of design quality and data reliability.
The HubSpot embed is a solid fallback when you need something up quickly and styling is not a priority. But for any page where conversion rate matters, building the form natively in Webflow and piping data to HubSpot through an automation tool is the better long-term setup.
If you want help with your Webflow setup or HubSpot integration, explore our Webflow development services or reach out to discuss your project.
