Connecting Webflow to HubSpot: Full Custom Form Integration

Webflow is great for visually creating stunning websites.
HubSpot is a powerhouse when it comes to CRM, lead tracking, and marketing automation.
So how do you get them to work together seamlessly?

‍

If you use Webflow for your website and HubSpot for lead management, here's how you can fully integrate your custom Webflow forms with HubSpot without relying solely on embed codes or off-the-shelf solutions.

‍

What does "Full Custom Form Integration" mean?

Full integration means:

• Your Webflow form retains its original style, design, and structure
• Submit forms directly to HubSpot, to your CRM
• You can trigger workflows, tagging, and automation in HubSpot from any message
• No third-party form UI required (unlike the basic HubSpot built-in form)

Basically: the form looks and acts like Webflow, but works like HubSpot behind the scenes.

‍

Methods for connecting Webflow to HubSpot

‍

Option 1: Zapier or Make (code-free integration)
Use Zapier or Make (Integromat) to track form submissions in Webflow.

‍

When a new form arrives, automatically send data to HubSpot CRM.

Pros:

No coding required

Easy setup

Can be mapped to custom fields in HubSpot

‍

Cons:

Slight latency (a few seconds)

Zapier/Make pricing may apply

‍

Option 2: Custom code with HubSpot Forms API

If you need full control or want to eliminate middlemen:

• Use Webflow’s native form
• Write a custom JavaScript snippet that:
• Captures form data on submission
• Sends it to HubSpot via the Forms API
• Redirects the user or displays a thank you message

‍

Pros:

Faster

Works exactly how you want

No monthly fees like Zapier

‍

Cons:

Requires JavaScript knowledge

Requires testing/debugging for borderline cases

‍

Key form fields for mapping

When integrating, make sure you’re passing the correct data to HubSpot. Common fields include:

• Full name
• Email
• Phone number
• Company
• Message / Project description
• Source URL (optional, to track where they came from)

You can also:

• Add hidden tracking fields (e.g. utm_source, campaign_id)
• Trigger HubSpot workflows after a form is submitted

‍

Pro tips for a smooth integration

Always test your form before publishing it (with real and fake data).

Use HubSpot’s API key or private app token securely if you’re using custom code.

Keep thank you pages or confirmation messages clear so users know it worked.

Make sure your form is GDPR or privacy compliant, if applicable.

Consider logging submissions in both Webflow and HubSpot (redundancy is helpful).

‍

Why not just use HubSpot’s Embed code?

You can embed a HubSpot form directly into Webflow using the embed component. But:

• Doesn’t blend easily with your site’s style
• Less design flexibility
• Limited interaction/animation control
• Can feel “off-brand” or generic

Using Webflow’s native forms + API integration = custom UI + powerful backend.

‍

If you’re serious about lead management, form submission tracking, and follow-up automation, connecting Webflow to HubSpot is a game-changer. And if you do it right, you don't have to compromise on design or data.