← All articles
Integration

How to Connect Webflow Forms to HubSpot Without Zapier

If you're running a Webflow site and using HubSpot as your CRM, there's a good chance your lead capture setup has a problem you don't know about yet. The most common path — connecting them through Zapier — works until it doesn't. Subscriptions lapse. Zaps silently fail. Fields map incorrectly. And your sales team never knows.

This guide walks through a cleaner approach: connecting Webflow forms directly to HubSpot, with no middleware, no subscription dependencies, and no silent failures.

Why Zapier Isn't the Answer

Zapier became the default glue layer for no-code teams because it was the easiest option available a few years ago. But it introduces real problems for production lead capture:

  • Task limits cause invisible drops. When you hit your monthly Zap task limit, submissions stop flowing — and you may not notice for days.
  • Field mapping breaks on form changes. Update a field label in Webflow and your Zap silently stops passing that data to HubSpot.
  • GDPR consent fields don't pass through. Webflow's native form + Zapier combination has no native mechanism for passing consent data to HubSpot contact records.
  • Attribution is lost. HubSpot's tracking cookie is never linked to the contact because the submission doesn't come through the native HubSpot form embed.

The Direct Integration Approach

The cleanest solution uses HubSpot's Forms API — not their embeddable form widget, and not a third-party automation tool. Instead, your Webflow form submits directly to HubSpot's API endpoint, keeping you in full control of what is sent, when, and how.

What You Need

  • A Webflow site with a published form
  • A HubSpot account (any tier)
  • Your HubSpot portal ID and form GUID (found in HubSpot → Marketing → Forms → Embed)

Step 1 — Get Your HubSpot Form ID

In HubSpot, navigate to Marketing → Forms. Create a new form (or use an existing one) that matches the fields you already have in Webflow. Under Share → Embed, copy the Portal ID and Form GUID from the embed code. You'll use both in your API call.

Step 2 — Map Your Webflow Fields

Each Webflow form input needs a name attribute that exactly matches the HubSpot field internal name. For example, a HubSpot field called "First Name" has the internal name firstname. Your Webflow input should be:

<input type="text" name="firstname" placeholder="First name">

You can find internal names in HubSpot under Settings → Properties. The internal name is shown in the property detail view.

Step 3 — Handle the Submission

Rather than letting Webflow's default form handler run, intercept the submit event with JavaScript and send the data directly to HubSpot's Forms API endpoint:

https://api.hsforms.com/submissions/v3/integration/submit/{portalId}/{formGuid}

The payload is a JSON object with a fields array containing name/value pairs, plus a context object carrying the HubSpot tracking cookie (hutk) and the page URL. Including the cookie is essential — it's what ties the submission to a known HubSpot contact and preserves attribution.

Step 4 — Pass the Consent Fields

If you're operating under GDPR, you need to include a legalConsentOptions block in your payload. This tells HubSpot exactly what the contact consented to, including the consent text they saw and when. This is something Zapier bridges will never get right automatically.

Testing Your Integration

Submit a test form on your live Webflow site. Open HubSpot and navigate to Contacts. Your test submission should appear as a new contact within seconds. Check that:

  • All field values transferred correctly
  • The original source attribution shows correctly (not "direct traffic")
  • Any workflows you've configured in HubSpot fired on the new contact
  • The consent record is attached to the contact (if applicable)

What About Maintenance?

The real advantage of a direct integration is that it has almost no ongoing maintenance surface. There's no third-party subscription that can expire or rate-limit. There are no Zap task counts to monitor. When you update your Webflow form, you update the field names — and your integration keeps working.

The one thing to watch: if you rename a HubSpot property's internal name (rare, but possible), you'll need to update the corresponding name attribute on your Webflow input. Keep a mapping doc — a simple spreadsheet works fine.


If you'd rather skip writing and maintaining the API integration yourself, Flowtusk handles all of this with a visual field mapper, automatic GDPR consent handling, and monitoring built in. But whether you build it yourself or use a tool, the direct approach is the right one.

Stop configuring. Start capturing.

Flowtusk connects your Webflow forms to HubSpot in minutes — with full field mapping, consent handling, and real attribution. No code, no Zapier.

Try Flowtusk free →