Zo integreer je HubSpot & Webflow

Als je ervoor hebt gekozen om je website op Webflow te bouwen en te hosten, maar je wel HubSpot-formulieren wilt blijven gebruiken en beide systemen met elkaar wilt koppelen, vraag je je misschien af wat de beste aanpak is. In dit artikel bekijken we de beste manieren om Webflow met HubSpot te integreren, zodat je het meeste uit beide tools haalt.

Optie 1: de Webflow Enterprise-integratie met HubSpot

Helaas is de 'officiële' integratie met HubSpot op dit moment alleen beschikbaar als je de enterpriseversie van Webflow afneemt. Die integratie is vrij eenvoudig en werkt meteen, maar wat als je geen Webflow Enterprise-abonnement wilt of nodig hebt, alleen omdat je de HubSpot-integratie nodig hebt?

Optie 2: gebruik formulieren die niet van HubSpot zijn

HubSpot heeft een configuratieoptie waarmee je inzendingen van formulieren die niet van HubSpot zijn kunt bijhouden op een website waarop de HubSpot-trackingcode is geïnstalleerd. Hiervoor moet deze optie in je HubSpot-instellingen onder Formulieren zijn ingeschakeld.

Zodra dit is ingeschakeld, verzamelt HubSpot de gegevens uit het formulier, mits de HubSpot-trackingcode is geïnstalleerd op de website en de pagina waar het formulier staat. Hieraan zitten enkele voorwaarden en beperkingen, die HubSpot in dit artikel beschrijft. Om formulierinzendingen in HubSpot te kunnen verzamelen, moet je formulier:

• een statisch HTML-formulier zijn.
• in HTML-<form>-tags staan.
• niet in een <iframe> staan.
• een invoerveld voor e-mail hebben.

Misschien heb je hier hulp van een developer nodig als je er niet zeker van bent. Zodra dit is ingesteld, verschijnt een Webflow-formulier na verzending in het formulierenoverzicht in HubSpot. Let op: je ziet hier mogelijk ongebruikelijke formuliernamen, omdat de naam van het formulier uit de CSS-code van de website wordt overgenomen.

De tool herkent formulieren op je website aan de CSS-selector van het formulier. Dat betekent dat als je formulier de CSS-ID "gform_7." heeft, dit in je formulierendashboard verschijnt als "#gform_7." Zodra een formulier in de tool voor formulieren die niet van HubSpot zijn verschijnt, kun je het een andere naam geven, zodat jij en je team het makkelijk herkennen.

Het voordeel van optie 2 is dat je de formulierbouwer van Webflow gebruikt en je formulieren precies naar wens opmaakt, zonder HubSpot-formulieren te hoeven insluiten die er anders uit kunnen zien en extra JavaScript-code vereisen.

Het nadeel van deze optie is dat je formulieren die niet van HubSpot zijn, niet kunt gebruiken als event-triggers voor Google Ads. Dat is niet essentieel, maar als je formulierinzendingen in HubSpot als event wilt gebruiken om terug te koppelen naar Google Ads, moet het een HubSpot-formulier zijn. Dat is wat vervelend.

Optie 3: gebruik ingesloten HubSpot-formulieren

De derde optie is de gebruikelijke insluitoptie van HubSpot voor je HubSpot-formulieren. Dit is eenvoudig: je kopieert de embedcode van het HubSpot-formulier en plakt die op je pagina in de Webflow Designer. Dat doe je met de embedfunctie van Webflow.

Hier is een video uit de kennisbank van Webflow over de embedcode. Als je een Core-, Growth-, Agency- of Freelancer-Workspace hebt, of als je site een actief Site plan heeft, kun je het element Embed gebruiken.

Hieronder staat een voorbeeld van een HubSpot-formulierembedcode. Die vind je in HubSpot door op het formulier te klikken en vervolgens op delen.

Een mogelijk nadeel van deze manier om HubSpot-formulieren met Webflow te integreren is dat je formulier er anders uit kan zien dan de formulieren op Webflow. Je kunt in HubSpot wel instellen dat alle opmaak wordt verwijderd, maar het is dan best wat gedoe om CSS-stijlen te maken en toe te passen op alle onderdelen van het formulier, zodat ze overeenkomen met je Webflow-formulieren.

Samenvatting

HubSpot en Webflow werken niet zo soepel samen als sommige andere tools, maar het is nog steeds vrij eenvoudig te configureren. De functie voor formulieren die niet van HubSpot zijn is erg handig om je Webflow-formulieren met HubSpot te integreren, al mis je dan wat functionaliteit. Het beste scenario is je HubSpot-formulier insluiten en de opmaak laten aansluiten op je website. Daar heb je mogelijk de hulp van een webdeveloper bij nodig.