HubSpot koppelen aan Webflow: de opties op een rij

Je website draait op Webflow en je marketing en sales werken in HubSpot. Dan wil je dat elke aanvraag via je website direct in HubSpot staat, dat je bezoekers kunt volgen en dat je formulieren er toch uitzien zoals je ze ontworpen hebt. Een HubSpot Webflow integratie regelt dat. Er zijn meerdere manieren om hem op te zetten, elk met eigen voordelen en grenzen.

Welke opties zijn er voor een HubSpot Webflow integratie?

Er zijn vier routes, van snel en standaard tot volledig op maat:

1. de officiële HubSpot-app in Webflow
2. een HubSpot-formulier insluiten via embedcode
3. een automatiseringstool zoals Make of Zapier
4. een eigen koppeling via de HubSpot API

Voor de meeste marketingwebsites is de eerste route genoeg. De andere komen in beeld als je meer nodig hebt dan formulieren en tracking.

Hoe werkt de officiële HubSpot-app?

De HubSpot-app installeer je vanuit Webflow en verbind je met je HubSpot-account. Daarmee kun je:

• bestaande Webflow-formulieren koppelen aan HubSpot, zodat inzendingen als contact binnenkomen
• HubSpot-formulieren op je pagina plaatsen en stylen met de Webflow-stijlen
• de HubSpot-trackingcode op je hele site zetten
• de HubSpot-chat toevoegen

Het grote voordeel: geen extra tool ertussen en geen code. Formulieren blijven eruitzien zoals je ze in Webflow hebt ontworpen.

Houd rekening met een paar grenzen. De koppeling van Webflow-formulieren werkt in één richting, van Webflow naar HubSpot. Inzendingen komen eerst in Webflow binnen en tellen mee voor de formulierlimiet van je Webflow-abonnement. Sommige functies, zoals HubSpot-formulieren volledig vrij stylen, vragen een hoger HubSpot-pakket. En geavanceerde HubSpot-functies zoals slimme velden en progressieve profilering werken niet met een gewoon Webflow-formulier.

Wanneer kies je voor een ingesloten HubSpot-formulier?

Je kunt ook de embedcode van een HubSpot-formulier in een embed-element op je pagina plaatsen. Dan krijg je alle HubSpot-functies: slimme velden die al bekende informatie overslaan, progressieve profilering, conditionele velden en directe aansluiting op workflows.

De keerzijde is vormgeving. Het formulier volgt de styling van HubSpot, en die laten aansluiten op je site vraagt extra werk. Kies deze route als die functies belangrijker zijn dan pixelprecieze vormgeving.

Wanneer is een automatiseringstool handig?

Met Make of Zapier vang je een Webflow-formulierinzending op en doe je daarna meerdere dingen: een contact aanmaken of bijwerken, een deal openen, een taak toewijzen aan de juiste collega en een melding sturen naar je team. Handig als je meer wilt dan alleen een contact, zonder maatwerk te laten bouwen.

Let wel op: dit is een extra schakel. Heeft de tool een storing of is je taaklimiet bereikt, dan komen leads niet door. Zorg dus voor foutmeldingen.

Wanneer heb je een koppeling via de HubSpot API nodig?

Een eigen koppeling via de API is nodig als:

• data in twee richtingen moet, bijvoorbeeld HubSpot-gegevens tonen in een klantportaal of in je Webflow CMS
• je inzendingen wilt valideren, verrijken of verdelen voordat ze in HubSpot komen
• HubSpot-data de inhoud van je site bepaalt, zoals gepersonaliseerde content voor bekende bezoekers
• je grote volumes hebt of meerdere systemen tegelijk bedient

Formulierinzendingen kunnen dan niet rechtstreeks vanuit de browser naar de beveiligde HubSpot API. Er zit altijd een server tussen, bijvoorbeeld een serverfunctie op Vercel of een backend in Supabase of Xano. Dat is meer werk, maar geeft volledige controle. Meer daarover lees je in koppeling laten maken.

Hoe zet je de basisintegratie goed op?

Voor de meeste sites volstaat dit stappenplan.

1. Bepaal wat er in HubSpot moet komen

Welke formulieren, welke velden, en wat moet er gebeuren na een inzending? Alleen een contact, of ook een deal, een taak of een e-mailreeks?

2. Maak de velden gelijk

Zorg dat de velden in je Webflow-formulier overeenkomen met de eigenschappen in HubSpot. Controleer ook of verplichte HubSpot-velden in het formulier zitten.

3. Installeer de app en koppel

Verbind beide accounts, koppel de formulieren en zet de trackingcode aan.

4. Regel toestemming

Laat je cookiebanner en de HubSpot-tracking samenwerken, zodat tracking pas start na toestemming. Zonder toestemming komen inzendingen nog steeds binnen, maar zonder paginahistorie.

5. Test op staging

Publiceer eerst naar je staging-omgeving en vul elk formulier in. Controleer in HubSpot of het contact binnenkomt met de juiste gegevens en bron. Zet het daarna pas live.

Welke fouten zien we vaak?

• Veldnamen die niet overeenkomen, waardoor data in het verkeerde veld of nergens terechtkomt.
• Formulieren die later worden aangepast zonder de koppeling opnieuw te controleren.
• Tracking zonder toestemming, of juist tracking die nooit start omdat de cookiebanner hem blokkeert.
• Niemand die monitort. Een koppeling die stil stopt, merk je pas als sales vraagt waar de leads blijven.

Wil je weten hoe dit past in het bredere plaatje van leads opvolgen, lees dan CRM koppelen aan je website.

Onze aanpak

Als Webflow Premium Partner zetten we deze koppeling regelmatig op. We beginnen met de officiële app en gaan pas verder als dat nodig is. Draait je website nog op HubSpot CMS en wil je naar Webflow, terwijl HubSpot je CRM blijft? Dan helpen we met de HubSpot-migratie. Voor de koppeling zelf, zie onze systeemkoppelingen of neem contact op.