HubSpot formulieren uitstellen: Render-blocking oplossen zonder pagina's te bewerken

HubSpot formulier code, de trage methode

De standaard HubSpot code voor het plaatsen van formulieren op een website ziet er als volgt uit:

<script
   type="text/javascript"
   src="//js.hsforms.net/forms/v2.js">
</script>

<script>
  hbspt.forms.create({
    portalId: '123456',
    formId: '123456'
  });
</script>

Dit resulteert in een Lighthouse waarschuwing 'Eliminate render-blocking resources'. Het HubSpot formulier blokkeert de rendering van de pagina een volle seconde. Volgens de 2025 Web Almanac serveert 87% van de pagina's nog steeds render-blocking resources. De standaard embed van HubSpot is een van de grootste boosdoeners omdat het synchroon laadt zonder defer of async attribuut.

Je eerste idee is misschien om het HubSpot script te deferren (uitstellen). Dit gaat niet werken en zal een foutmelding geven omdat hbspt.forms.create() verwacht dat het HubSpot script is geladen. Laten we dit oplossen!

HubSpot formulier code, de snelle fix

Soms is er gewoon geen tijd om door honderden pagina's te spitten en de code voor elk HubSpot formulier te herschrijven. Daarom heb ik een drop-in vervanging gemaakt voor snellere, non-render-blocking HubSpot formulieren:

Het idee is simpel. Formulieren worden aangeroepen via hbspt.forms.create. Laten we de formulieren afvangen, wachten tot de HubSpot code in de achtergrond is geladen en daarna pas het formulier script uitvoeren.

<script>
// cache hubspot forms here
var hubcache = {
    forms: [],
    letsgo: function() {
        for (var i = 0; i < hubcache.forms.length; i++) {
            // hubspot is now loaded, use the real hbspt
            hbspt.forms.create(hubcache.forms[i]);
        }
    }
};

// override hbspt while hubspot is loading
var hbspt = {
    forms: {
        create: function(c) { hubcache.forms.push(c); }
    }
};
</script>
<script
   type="text/javascript"
   defer
   src="//js.hsforms.net/forms/v2.js"
   onload="hubcache.letsgo()">
</script>

Vergeet niet om wat ruimte te reserveren voor het formulier. Omdat het de rendering niet meer blokkeert, zal het een grotere layout shift veroorzaken dan wanneer je eerder vergat om ruimte te reserveren. Stel een min-height in op de formulier container die overeenkomt met de gerenderde formulierhoogte.

Alternatief: het hsFormsOnReady patroon

De v2.js van HubSpot ondersteunt ook een ongedocumenteerde callback queue genaamd hsFormsOnReady. Als je de embed code direct beheert, is dit een schonere optie:

<script defer src="//js.hsforms.net/forms/v2.js"></script>
<script>
  (window.hsFormsOnReady = window.hsFormsOnReady || []).push(function() {
    hbspt.forms.create({
      portalId: '123456',
      formId: '123456'
    });
  });
</script>

De drop-in hack hierboven is de betere aanpak wanneer je de bestaande embed code niet op elke pagina kunt aanpassen. Het hsFormsOnReady patroon vereist dat je de embed snippet van elk formulier afzonderlijk bewerkt.

HubSpot formulier code, de correcte manier

Ik ben geen grote fan van het implementeren van dit soort hacks (hoewel ik ze wel graag schrijf). Soms zijn ze noodzakelijk omdat er simpelweg niet genoeg tijd beschikbaar is om een website te herschrijven. Neem daarom altijd PageSpeed in overweging voordat je je vastlegt aan een externe app/plugin etc. die allerlei problemen kan veroorzaken. Als je twijfelt over de implicaties voor de PageSpeed, vraag het dan aan iemand zoals ik. Wij weten het :-)

De correcte manier is om de HubSpot Forms API direct te gebruiken. Bouw je eigen HTML formulier, geef het de styling die je wilt en verstuur de data naar HubSpot met een eenvoudig POST request:

fetch(
  'https://api.hsforms.com/submissions/v3/integration/submit/PORTAL_ID/FORM_ID',
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fields: [
        { name: 'email', value: email },
        { name: 'firstname', value: firstName }
      ]
    })
  }
);

Nul JavaScript van HubSpot. Nul render-blocking. Volledige CRM-integratie. Het formulier verschijnt nog steeds in je HubSpot dashboard, triggert workflows en vult je contactendatabase. Je hebt simpelweg geen 521 KB aan HubSpot code nodig om een paar velden te versturen.

Om te bevestigen dat je fix daadwerkelijk werkt voor echte bezoekers, stel je Real User Monitoring in. Lab scores vertellen je dat het formulier niet langer blokkerend is, maar field data vertelt je of je INP en LCP daadwerkelijk zijn verbeterd.