Hoe u webflow-native formulieren aan HubSpot koppelt en na indiening doorstuurt

Webflow + HubSpot = match made in heaven... totdat je formulier niet goed doorverwijst!

Als je je afvraagt hoe je je eigen Webflow-formulier kunt koppelen aan HubSpot CRM en nog steeds gebruikers omleiden naar een /success pagina of een aangepaste URL (zoals een Google Drive-bestand of landingspagina), dan ben je op de juiste plek.

Laten we dit voor eens en altijd oplossen — netjes, professioneel en met enige stijl

‍

Het probleem: native forms + HubSpot-app

Wanneer u een webflow-native formulier koppelt aan HubSpot met behulp van de HubSpot-app voor Webflow, merk je misschien op:

• Inzendingen gaan naar HubSpot.
• Het Webflow-succesbericht wordt niet weergegeven.
• Geen automatische doorverwijzing naar uw /succes pagina of aangepaste link.

‍

Frustrerend, toch?

Dit gebeurt omdat het Webflow-formulier een normale serverreactie verwacht, maar de HubSpot-app dit anders vastlegt. Webflow blijft hangen zoals... „Is het formulier wel verzonden?”

‍

De oplossing: een klein aangepast script

Maak je geen zorgen: je hebt geen Zapier nodig, geen plug-ins van derden en geen zwaar werk.

Het enige dat u nodig hebt, is een klein, elegant JavaScript-fragment om de successtatus handmatig te activeren en gebruikers om te leiden.

• Werkt met meerdere formulieren.
• Respecteert de eigen succesboodschap van Webflow.
• Verwijst door naar waar je maar wilt — /succes pagina of aangepaste URL.

‍

Hier is het kopiëren en plakken van JavaScript

Plak dit script in je Webflow Pagina-instellingen → Aangepaste code → Voordien </body> tag:

<script>
document.addEventListener('DOMContentLoaded', function() {
 var formIDs = ['#wf-form-MVPForm', '#wf-form-mvpchecklistform2']; // Replace with your real form IDs

 formIDs.forEach(function(id) {
   var form = document.querySelector(id);

   if (form) {
     form.addEventListener('submit', function(e) {
       e.preventDefault(); // Stop Webflow's default behavior

       // Let HubSpot capture the form submission
       setTimeout(function() {
         var successWrapper = form.querySelector('.w-form-done');
         var formWrapper = form.querySelector('.w-form');

         if (successWrapper && formWrapper) {
           formWrapper.style.display = 'none';
           successWrapper.style.display = 'block';
         }

         // Redirect after a short pause
         setTimeout(function() {
           window.location.href = 'https://yourcustomlink.com'; // <-- Replace with your custom URL
         }, 300);
       }, 500);
     });
   }
 });
});
</script>

‍

Tip van een pro: vervang de formulier-ID's en URL door uw werkelijke waarden.

‍

Stapsgewijze samenvatting

1. Koppel je Webflow-formulier aan HubSpot via de HubSpot Webflow-app.
2. Voeg een aangepast succesbericht toe aan uw formulierblok (standaard Webflow).
3. Plak het bovenstaande JavaScript in de Before van de pagina </body> sectie.
4. Publiceer je site.
5. Vier het — gebruikers dienen in, HubSpot legt de gegevens vast en je omleiding werkt.

‍

Extra tips van professionals

• Meerdere formulieren? U kunt eenvoudig meer formulier-ID's aan de array toevoegen.
• Wil je de doorverwijzing wat langer uitstellen? Wijzig de 300 binnenin Timeout instellen.
• Wil je een soepelere UX? Toon een „Loading...” -spinner tijdens de doorverwijzing (eenvoudig toe te voegen).

‍

Hulp nodig? Laten we praten!

Als deze handleiding je heeft geholpen om je Webflow + HubSpot-formulierintegratie te herstellen, geweldig! Maar als je nog steeds een beetje vastzit, of gewoon wilt dat het gedaan wordt - Perfect zonder de stress...

Je kunt plan een gratis gesprek met ons team — geen druk, alleen vriendelijk advies, tips van experts en een stappenplan om uw formulieren (en uw CRM) precies te laten werken zoals u dat wilt.

Laten we uw Webflow-project niet te stoppen maken.

‍