How to integrate HubSpot forms with Webflow for lead generation

If you’re trying to get more leads from your website, chances are you’ll end up dealing with forms. HubSpot has some of the best tools for tracking and nurturing those leads. Webflow is a popular website builder that looks great and doesn’t require coding. The catch? Getting HubSpot forms working smoothly in Webflow is trickier than the marketing sites let on.

This guide is for marketers, founders, and anyone tasked with hooking up HubSpot forms in Webflow—without losing half a day to forums or support tickets. Let’s skip the theory and get to the nuts and bolts.

Why bother integrating HubSpot forms into Webflow?

Here’s the real deal:

  • HubSpot forms let you automatically capture, segment, and follow up with leads
  • Webflow makes it easy to build and update your site, but its built-in forms don’t connect directly to HubSpot
  • You want form submissions to land in HubSpot, not your inbox or yet another spreadsheet

You’re here because you want to cut out manual lead entry, actually use your CRM, and not fight your website every time you need a new form.

The Basics: Your Integration Options

There are a few ways to get HubSpot forms into Webflow. Each comes with trade-offs:

  1. Embed HubSpot forms directly
    Quick and reliable. You lose some design control, but it just works.

  2. Use third-party connectors (like Zapier, Make, or native integrations)
    More flexible, but adds cost and complexity. Good for special cases, but usually overkill.

  3. Custom code/API workarounds
    Only do this if you love headaches or need something ultra-custom.

Most people should just embed HubSpot forms directly. It’s not as pretty, but it’s solid. If you absolutely need forms that look like your exact Webflow design, you’ll need to get creative (and keep reading).

Step 1: Build Your Form in HubSpot

First, you need an actual form in HubSpot. Don’t skip this—if you use the wrong kind of form, you’ll waste time.

How to do it:

  • Log in to your HubSpot account
  • Go to Marketing > Lead Capture > Forms
  • Click Create form
  • Choose your form type
    (Regular forms are fine; pop-ups and slide-ins can get wonky in Webflow)
  • Add your fields, set up notifications, and tweak settings
  • Save the form

Pro tip: Name your form clearly (like “Contact - Webflow 2024”) so you can find it later. HubSpot accounts get messy fast.

Step 2: Grab the Embed Code from HubSpot

Once your form’s set up, you need the code snippet to put into Webflow.

  • In HubSpot, go to the Actions menu (top right) for your form
  • Click Embed code
  • Copy the provided <script> code

Don’t try to use the “Share” URL or any other method. You need the actual embed code, or it won’t show up in Webflow.

Step 3: Add the HubSpot Form to Webflow

Now, hop over to your Webflow project. This is the part where folks usually get tripped up.

Where you can place your form:

  • On a specific page: Good for contact or download pages
  • Inside a template: For site-wide lead magnets
  • In a popup/modal: If you like to interrupt your visitors (sometimes it works!)

How to embed:

  1. Open your page in the Webflow Designer
  2. Drag an Embed element (from the “Add” panel > Components > Embed) onto the page where you want the form
  3. Paste the HubSpot embed code
  4. Publish your site (the form won’t show up in preview mode)

Heads up: The form might not look exactly like the rest of your site. HubSpot forms come with their own styles that can clash with your Webflow design.

Step 4: Style the Form (If You Care Enough)

Here’s the honest truth: you don’t get pixel-perfect control over embedded HubSpot forms. If you need the form to look exactly like your Webflow styles, you’ve got a few options, each with drawbacks:

  1. Tweak HubSpot’s form styles
  2. In HubSpot, you can change some colors and fonts, but it’s limited.

  3. Good enough for most people.

  4. Override styles with custom CSS

  5. Add custom CSS in Webflow to override HubSpot’s defaults.
  6. This only works if you know CSS, and even then, it’s fiddly.

  7. HubSpot sometimes changes class names, so your fixes might break later.

  8. Use Webflow’s native forms and send submissions to HubSpot via Zapier or Make

  9. This way, you control the look 100%.
  10. Downside: More moving parts, more things to break, and a monthly bill.

My take: Most sites should accept the slightly-off look and move on. If your brand police won’t allow that, use Webflow forms plus Zapier, but be ready for more setup and troubleshooting.

Step 5: Test Everything

This sounds obvious, but most people skip it and end up with dead leads.

  • Publish your site (not just preview)
  • Submit the form with a test email
  • Check HubSpot: Did the lead show up? Did notifications fire?
  • Double-check any automated workflows or follow-ups

Real-world gotchas: - Some ad blockers block HubSpot forms—test in a private window - Forms might look fine but not submit if you’ve got conflicting scripts - If you’re using cookies/consent banners, make sure they don’t block the form loading

What if you want to use Webflow’s native forms?

There are workarounds to send Webflow form submissions into HubSpot, but let’s be clear: it’s more work.

How it’s usually done:

  • Use a connector like Zapier, Make, or even custom code to catch Webflow form submissions and push them to HubSpot via API
  • Set up the connector to map Webflow fields to HubSpot properties
  • Test like crazy—these automations sometimes fail silently

When is this worth it? - Your designers care deeply about matching the site’s style - You want to do things HubSpot forms just can’t (multi-step forms, file uploads, logic) - You’re collecting sensitive info and want more control over data handling

What to watch out for: - Zapier and others cost money (usually per submission) - More steps mean more stuff to break - You lose some of HubSpot’s built-in tracking (like source attribution)

Common Problems and How to Avoid Them

  • Form not showing up at all?
  • Make sure you’re embedding the code on a published page, not just in preview.

  • Double-check that you copied the full script, not just a link or a chunk.

  • Form looks broken or ugly?

  • HubSpot’s styles may clash with your theme. Tweak HubSpot’s form settings or layer on mild CSS overrides.

  • Submissions not appearing in HubSpot?

  • Test with a real (not fake) email.
  • Check that the HubSpot form isn’t set to “internal only.”

  • If using Zapier, check the task history for errors.

  • Double submissions or weird behavior?

  • Don’t put multiple forms with the same embed code on one page.
  • Avoid nesting forms inside popups unless you test thoroughly.

Pro Tips for Better Lead Gen

  • Shorter forms convert better. Only ask for what you really need.
  • Use HubSpot’s follow-up emails. Set them up to respond instantly.
  • Track your conversions. Add UTM parameters and check HubSpot’s analytics.
  • Don’t obsess over design. A slightly mismatched form that works beats a perfect-looking one that doesn’t collect leads.

Keep It Simple (and Iterate)

Getting HubSpot forms into Webflow isn’t rocket science, but it can get messy if you overthink it. Start with the basic embed method—see if it meets your needs. If your team needs more control or better branding, then look into custom styling or connectors, but know what you’re signing up for.

Forms are just the start—what matters is what you do with those leads. Get your setup working, monitor it, and tweak as you go. Don’t let integration headaches stop you from collecting leads and actually following up.