How to Integrate HubSpot Forms Into Webflow: The Best Methods in 2026

Introduction

HubSpot forms in Webflow: two ways to do it, each with different implications for your design, data flow, and user experience. This guide covers both methods clearly so you can choose the right approach for your setup.

Method 1: HubSpot Form Embed (Simple)

The simplest approach. Take HubSpot's native form embed code and paste it into a Webflow Embed element.

Steps:

1. In HubSpot, go to Marketing → Lead Capture → Forms
2. Create or select your form and click "Share"
3. Copy the embed code snippet
4. In Webflow Designer, add an Embed element where you want the form
5. Paste the HubSpot embed code
6. Publish your Webflow site

Pros:

• Easiest to set up — 10 minutes
• All HubSpot form logic (conditional fields, progressive profiling) works natively
• Submissions go directly into HubSpot with full contact property mapping

Cons:

• Form style is controlled by HubSpot, not Webflow — styling requires custom CSS overrides
• HubSpot script adds page weight
• Less seamless visual integration with your site design

Method 2: Webflow Native Form + HubSpot Integration (Recommended)

Build your form entirely in Webflow (full design control), then connect it to HubSpot via Zapier, Make, or the HubSpot API.

Steps:

1. Build your form in Webflow using the native Form element
2. Name each field in Webflow to match your HubSpot contact properties (e.g., "email", "firstname", "company")
3. Connect via Zapier: Webflow → HubSpot (map fields in Zapier)
4. Or connect via Make (formerly Integromat) for more complex workflows
5. Or build a direct API connection using HubSpot's Forms API if you want zero third-party dependencies

Pros:

• Full design control — your form looks exactly like your site
• No HubSpot script weight on the page
• More flexible for complex workflows (tag contacts, trigger sequences, notify Slack)

Cons:

• Requires Zapier/Make subscription or custom development
• More setup time
• Progressive profiling doesn't work natively (requires custom logic)

Which Method to Choose

• Simple contact form, limited styling needs: HubSpot embed
• Design-critical forms (homepage, landing pages): Webflow native + Zapier/Make
• Complex workflows (multiple sequences, conditional logic): Webflow native + Make + HubSpot API

Troubleshooting Common Issues

HubSpot form not submitting? Check that your Webflow site is published (not just previewed) — HubSpot forms require the published domain.

Zapier not picking up submissions? Verify the Webflow form "Name" attribute matches exactly what Zapier expects. Test by submitting a real form submission after setting up the Zap.

Styling issues with 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.

Conclusion

For most business sites, the Webflow native form + Zapier/HubSpot integration gives the best combination of design quality and data reliability. The HubSpot embed is fine for quick setup when styling isn't a priority.

See our Webflow portfolio to see the types of sites we build. Explore our Webflow services.