Een aanmeldingsformulier insluiten op je website

Wat je leert

Leer hoe je een ingesloten aanmeldingsformulier toevoegt aan een specifieke pagina of locatie op je website (zoals de voettekst), zodat bezoekers die meer over je merk willen weten zich gemakkelijk kunnen aanmelden. Het insluiten van een aanmeldingsformulier in de voettekst van je site, als aanvulling op je andere gepubliceerde formulieren, is een best practice van Klaviyo voor het optimaliseren van lijstgroei.

Om een ingesloten formulier aan je site toe te voegen, moet je het volgende doen:

1. Maak een nieuw ingesloten formulier aan in Klaviyo en pas dit aan.
2. Publiceer het formulier en kopieer vervolgens de insluitcode.
3. Voeg het formulier toe aan je site met de instructies voor jouw platform hieronder.

Voordat je van start gaat

Voordat je je aanmeldingsformulier maakt, zorg je ervoor dat de functionaliteit van het aanmeldingsformulier is ingeschakeld op je website. Hierdoor kunnen formulieren die in Klaviyo zijn gepubliceerd op je site worden weergegeven en gegevens synchroniseren met Klaviyo.

Om ingesloten formulieren te laten werken, moet je het volgende doen:

• Onsite tracking (Klaviyo.js) geïnstalleerd op je site om de functionaliteit van het aanmeldingsformulier in te schakelen.
• De embedcode van het formulier die je plaatst waar je wilt dat deze wordt weergegeven, of de formulier-ID die je toevoegt aan een appblok Klaviyo Embedded Form op Shopify.

Het plakken van de insluitcode wordt alleen gebruikt voor ingesloten formulieren. Pop-up-, fly-out-formulier en volledige pagina-formulieren vereisen niet dat je code plakt en kunnen rechtstreeks vanuit Klaviyo’s formulierbouwer worden gepubliceerd.

Met ingang van 6 december 2024: Klaviyo heeft de manier waarop weergaven worden berekend voor ingesloten formulieren verbeterd om betrokkenheid nauwkeuriger te meten. Weergaven voor ingesloten formulieren worden alleen geregistreerd wanneer het formulier zichtbaar is in de viewport van de gebruiker. Deze wijziging kan resulteren in een merkbare verandering in het aantal weergaven en een stijging van verzendpercentages, met name voor formulieren die zijn opgenomen in de voettekst van een site, omdat deze alleen worden meegeteld als een bezoeker ver genoeg naar beneden scrolt om het formulier gedeeltelijk in hun viewport te krijgen.

Een ingesloten formulier aan je site toevoegen

Als je een aanmeldingsformulier gebruikt dat wordt geleverd door Shopify, BigCommerce of WooCommerce, controleer dan of je integratie is geconfigureerd om abonnees te synchroniseren met de Klaviyo-lijst die je wilt. Je hoeft dat formulier niet te vervangen als het abonnees al naar de juiste lijst stuurt, maar je kunt wel een ingesloten Klaviyo-formulier maken om abonnees in een andere lijst te verzamelen.

Een nieuw ingesloten formulier maken en aanpassen in Klaviyo

1. Selecteer aanmeldingsformulieren in de navigatie van Klaviyo.
2. Selecteer Formulier maken. Als er een kanaalkeuze wordt weergegeven, voer je een naam in, selecteer je Web en klik je op Maken om de formulierbibliotheek te openen. In de bibliotheek kun je het volgende doen:
   • Pas een kant-en-klare template aan vanuit de formulierenbibliotheek. Open Formulierstijl en selecteer Insluiten om templates voor ingesloten formulieren te tonen. Selecteer de template die je wilt.
   • Begin met een leeg formulier door Leeg formulier maken te selecteren.
3. Stel je formulier in in het paneel dat wordt geopend:
   • Voer de naam van je formulier in of bevestig deze.
   • Kies de abonneelijst voor elk kanaal dat je formulier verzamelt.
   • Als je met een leeg formulier bent begonnen, selecteer je Insluiten als je formuliertype.
     

4. Voor een template klik je op Formulier maken. Voor een leeg formulier klik je op Opslaan en ontwerpen.
5. Gebruik de editor om je formulier op te maken en elk gewenst blok of invoerveld toe te voegen. Zie Aan de slag met aanmeldingsformulieren voor hulp bij het aanpassen van je formulieren.
   

1. Als je tevreden bent met je formulier, los je eventuele blokkerende meldingen op. Klik op Publiceren of plannen, selecteer Nu publiceren en klik vervolgens op Nu publiceren. Het formulier is gepubliceerd in Klaviyo, maar je moet het ook aan je website toevoegen zoals hieronder beschreven voordat bezoekers het kunnen zien.
2. Als het venster Je formulier is gepubliceerd! verschijnt, klik op Kopiëren om de insluitcode naar je klembord te kopiëren. Als dit venster niet verschijnt, kopieer je de code via het onderstaande pad in de editor.
   

Als je de insluitcode uit de editor wilt kopiëren, selecteer je Targeting & behavior > Display. Kopieer het fragment onder Insluitcode.

Het ingesloten formulier aan je site toevoegen

Nadat je je formulier in Klaviyo hebt gepubliceerd en de insluitcode hebt gekopieerd, volg je hieronder de instructies van je platform om het formulier toe te voegen op de plek waar je het wilt laten verschijnen (bijvoorbeeld in een themabestand of op een specifieke pagina). Voor het app-blok Klaviyo Embedded Form van Shopify gebruik je het formulier-ID uit de code in plaats van het volledige snippet.

Zoek het platform dat je gebruikt in de onderstaande lijst en ga daarna naar het artikel waarnaar eronder wordt gelinkt voor een specifiekere handleiding over hoe je het insluitformulier aan dat platform toevoegt.

Als je je platform niet ziet, bekijk dan het bullet point "Andere platforms".

• BigCommerce
  Plak voor BigCommerce de insluitcode in de bestanden van je website op de plek waar je wilt dat het verschijnt.
  • Ga naar De insluitcode toevoegen aan je BigCommerce-website.
• Shopify
  Voeg voor Shopify het appblok Klaviyo Embedded Form toe aan je pagina template en plak de formulier-ID uit de insluitcode. In <div class="klaviyo-form-ABC123"></div> is de formulier-ID bijvoorbeeld ABC123.
  • Ga naar De insluitcode toevoegen aan je Shopify-website.
• Square
  Voor Square voeg je een sectie Insluitcode toe in de Square Online-site-editor en plak je de insluitcode waar je wilt dat het formulier verschijnt.
  • Ga naar De insluitcode toevoegen aan je Square-website.
• WooCommerce
  Voor WooCommerce plak je de insluitcode in de HTML van je website.
  • Ga naar De insluitcode toevoegen aan de voettekst van je WooCommerce-website.
• Andere platformen
  Als je platform niet in de bovenstaande lijst staat, of als je een aangepaste integratie gebruikt die niet van nature integreert met Klaviyo, moet je ervoor zorgen dat er 2 codefragmenten op je site worden geplakt zodat het ingesloten formulier werkt:
  
  • Onsite tracking (ook bekend als Klaviyo.js) om de aanmeldingsformulierfunctionaliteit in te schakelen.
    • Houd er rekening mee dat veel platforms automatisch websitetracking aan je site toevoegen wanneer je deze integreert (Wix, PrestaShop, Magento 1 en 2, etc.). Controleer de integratie-instellingen van je platform in Klaviyo om te bevestigen dat deze optie is geselecteerd.
      • Als je platform geen ingebouwde Klaviyo-integratie heeft, moet je websitetracking handmatig toevoegen.
  • De insluitcode van het betreffende formulier
    • Zodra websitetracking is ingeschakeld, moet je de insluitcode van je formulier in de HTML/broncode van je site plakken op de plek waar je wilt dat het verschijnt (zoals in de voettekst).
      • Als je de insluitcode van een formulier wilt kopiëren, selecteer je Targeting & behavior > Display in de formuliereneditor en kopieer je vervolgens het fragment onder Embed code.

Volgende stappen

Nadat je je ingesloten formulier hebt gepubliceerd in Klaviyo, het hebt toegevoegd aan je site volgens de instructies van je platform en je wijzigingen hebt opgeslagen, ga je naar je website en vernieuw je de pagina.

Het ingesloten formulier moet verschijnen op de locatie die je op je site hebt gekozen.

1. Verzend het formulier met testcontactgegevens. Als het e-mailadressen verzamelt, gebruik dan een adres dat je nog niet eerder voor dit formulier hebt gebruikt.
2. Voor dubbele toestemming via e-mail bevestig je je abonnement met de bevestigingsmail. Nadat je eventuele vereiste bevestiging hebt voltooid, controleer je of je bent toegevoegd aan de abonneelijst die je voor het formulier hebt geselecteerd.

Problemen met ingesloten formulieren oplossen

Als je ingesloten formulier live is in Klaviyo, maar niet wordt weergegeven op je site, raadpleeg dan de volgende tips voor probleemoplossing:

• Wis je browsercache en laad daarna de pagina opnieuw.
• Controleer of je website goed is geïntegreerd met Klaviyo en of je site ook live is.
• Controleer of je aanmeldingsformulieren op je website hebt ingeschakeld (dit is hetzelfde als onsite tracking inschakelen).
• Zorg dat je je websitewijzigingen hebt opgeslagen nadat je de insluitcode van het formulier hebt toegevoegd of, op Shopify, de formulier-ID.
• Navigeer in de editor van het aanmeldingsformulier van Klaviyo naar het gedeelte Targeting en gedrag en controleer het volgende:
  • Controleer in het gedeelte Weergave of:
    • De insluitcode die je op je site hebt geplakt, komt overeen met de code die Klaviyo heeft geleverd, of het Shopify-appblok bevat de bijbehorende formulier-ID
    • De apparaatinstellingen in Klaviyo overeenkomen met het apparaat dat je gebruikt om het formulier te bekijken
  • Controleer in het gedeelte Targeting of:
    • Je komt de Doelgroep -instellingen van het formulier tegen
    • Het formulier is ingesteld om te worden weergegeven op de URL die je bekijkt en een van de opgegeven UTM-parameters bevat
    • Je locatie komt overeen met een van de locatiedoelgroepen die zijn ingesteld voor het formulier
    • Voor Shopify voldoet je winkelwagen aan eventuele vereisten voor winkelwageninhoud die voor het formulier zijn geconfigureerd
• Als het formulier aan nieuwe bezoekers kan worden getoond, voer je de test opnieuw uit in een nieuw incognitovenster (privévenster). Als het formulier is beperkt tot bestaande profielen, abonnees of leden van een lijst of segment, gebruik je een browser die Klaviyo herkent als een profiel dat aan die voorwaarden voldoet.
• Controleer of slechts 1 Klaviyo-account is geïntegreerd met je site. Meer informatie over integraties.

Andere mogelijke redenen waarom je formulier niet verschijnt

• Als je aangepaste CSS op je site hebt, kan dit de styling van het formulier overschrijven of het formulier verbergen. Laat je ontwikkelaar de ontwikkelaarstools van je browser gebruiken om de code van de site te inspecteren en het probleem te identificeren of neem contact op met support.
• Als je een site met een één pagina-toepassing (SPA) gebruikt, kunnen deze instellingen ervoor zorgen dat je formulier niet iedere keer wordt weergegeven. Vraag je ontwikkelaar om hulp.

Extra hulpbronnen