Website & Development
Connecting Webflow to HubSpot (and your marketing stack): getting leads out of your forms
Copy for AI
You connect Webflow to HubSpot through one of four routes: the official HubSpot app for Webflow, an embedded HubSpot form, a no-code intermediate step with Zapier or Make, or a direct connection via the HubSpot API or webhooks. The native app is far more mature since 2026 than it used to be, but it is still designed for simple lead capture. If you want reliable field mapping, deduplication and full tracking, an intermediate step is often the better choice. In this article you will read, for each route, how it works, what its limits are, and how to prevent leads from disappearing along the way or landing in your CRM without a source. If you work with a different platform or CRM, the same principles apply: read the broader approach in connecting your website to your CRM like HubSpot or Salesforce.
Does Webflow have a native HubSpot connection?
Yes, there is now an official HubSpot app in the Webflow marketplace that links your native Webflow forms directly to HubSpot. You open the app in the Webflow Designer via the Apps panel and map your form fields to HubSpot. Submissions are first captured by Webflow and then forwarded to HubSpot, technically via the mechanism for “non-HubSpot forms”. For many sites, that is enough to receive leads in an orderly way and run basic automation, without code.
The limitations, however, are real. In practice the data flow mostly runs in one direction: from Webflow to HubSpot, with no full two-way sync. Advanced HubSpot features such as conditional logic, progressive profiling or smart fields are not included. And as with any off-the-shelf connection, you depend on how robust the app is at that moment. So treat the app as a starting point, not automatically as a final solution. Test thoroughly with real submissions before you rely on it for your lead flow.
When do you choose an embedded HubSpot form?
You choose an embedded HubSpot form when you value HubSpot’s built-in functionality more than the visual control in Webflow. You build the form in HubSpot and paste the embed code into a Webflow page. The big advantage: tracking, pre-fill of known contacts, smart fields and progressive profiling work right away, because the form genuinely belongs to HubSpot.
The downside is that you give up design freedom. An embed follows HubSpot’s styling and is harder to fit seamlessly into your Webflow design than a native Webflow form. For a sharply styled landing page where every pixel counts toward conversion, that often feels like a compromise. An in-between option is a custom HTML form that you style entirely yourself in Webflow and that posts to HubSpot: more control over the look, with HubSpot’s tracking underneath. That does require a bit more technical knowledge.
How does a connection via Zapier or Make work?
With Zapier or Make you place an intermediate step between your Webflow form and HubSpot: on every new submission, the tool creates or updates the corresponding record in HubSpot. So you leave your Webflow form exactly as it is, with your own styling, and handle the pass-through outside of it. This has been the most-used route for years, precisely because you are free in how you map fields and what happens afterward.
The power lies in the logic you build around it. You can clean up fields, assign a lead to the right owner or list, send an internal notification or feed multiple systems at once from a single submission. Do bear a few things in mind. There is usually a small delay (submissions are polled periodically or pushed through via a trigger), and at high volumes the number of tasks in your subscription adds up. So always build in some form of error handling, so a failed step does not quietly let a lead disappear. As soon as leads are worth money, a lost submission is more expensive than the tool itself.
When do you move to a direct API or webhook connection?
You choose a direct connection via the HubSpot API or via webhooks when reliability, speed and control weigh more heavily than convenience. Webflow can send a form submission as a webhook to your own endpoint, where you validate the data, deduplicate it and write it away via the HubSpot API. You then get a decoupled flow with your own retry logic and an audit trail of exactly what was forwarded.
This is the route for teams with serious lead volumes, strict data-quality requirements, or a setup in which multiple systems have to stay neatly in sync. It takes more build and maintenance work, and you need someone to manage the connection. An added benefit is that you do not depend on an intermediary that can change or fail: you manage the logic yourself and know precisely what happens to each submission. The trade-off is simple: the more critical and larger your lead flow, the sooner the extra robustness of a direct connection pays for itself. For an average B2B site with a handful of forms, that is usually overkill, and the app or an intermediate step is enough. Be honest about your own situation and pick the simplest route that brings your leads in reliably.
Which route suits you?
It depends on your volume, your technical capacity and how much of HubSpot you want to use. A simple rule of thumb:
- Few forms, basic lead capture, no developer: start with the official HubSpot app or an embedded form.
- You want to keep your Webflow design and smart routing or clean-up: use Zapier or Make as an intermediate step.
- High volume, strict data quality, multiple systems in sync: go for a direct API or webhook connection.
More important than the platform debate is what you arrange underneath. Two things determine whether your connection truly delivers value. First, UTM and source pass-through: send along the UTM parameters and the page context as hidden fields, otherwise leads arrive in HubSpot without an origin and you do not know which campaign or page produced them. You can read more about correct origin measurement in our explanation of UTM parameters. Second, consent: record that someone agreed and what they ticked, so your lead processing complies with the GDPR and you do not send unsolicited emails.
And do not forget the form itself. The best connection cannot save a form with too many fields or a weak call to action. How to build a form that people actually fill in, we cover in form conversion optimization. A good connection ensures that every completed lead arrives; good form UX ensures that more are completed. You need both to turn your site into a working lead machine, as we describe in a B2B website that generates leads.
The short summary
You connect Webflow and HubSpot via the official app, an embedded form, an intermediate step with Zapier or Make, or a direct API and webhook connection. The app is the fastest starting point for simple lead capture, but it is largely one-way and limited in advanced features. For control, reliability and clean field mapping, an intermediate step or direct connection is often better. Whatever you choose: set up UTM pass-through and consent, and make sure the form itself converts. That way every lead comes in, with its source and permission, ready for follow-up. Want us to set up your Webflow site and CRM connection in a conversion-focused way? Check out our web design service or plan your free intake. For the bigger picture around a B2B site that delivers leads, start with our guide on building a B2B website.
Free website scan
Enter your website and get an automatic scan within minutes, with concrete technical and SEO improvements. No sales pitch.
We only use your details for your scan. No spam, unsubscribe anytime.