Hoe je een aanmeldingsformulier kunt laten verschijnen als er op een knop wordt geklikt

Wat je leert

Leer hoe je een aanmeldingsformulier op je website kunt laten verschijnen als een bezoeker op een bepaalde knop klikt. Deze handleiding helpt je bij het aanpassen van je formulier zodat het wordt weergegeven op een aangepaste trigger, het maken en toevoegen van een nieuwe knop aan je site en het plakken van een kort codefragment in de HTML van je site zodat klikken op de knop het aanmeldingsformulier activeert. 

Als je een ontwikkelaar bent en je wilt een trigger op maat maken voor je aanmeldingsformulier, ga dan naar onze bron voor ontwikkelaars over hoe je een popup of fly-out formulier op maat kunt maken. 

Maak een nieuwe knop 

Maak eerst een nieuwe knop op je website die ervoor zorgt dat het aanmeldingsformulier verschijnt als erop wordt geklikt. Je moet ervoor zorgen dat je aanmeldingsformulier correct is ingesteld in Klaviyo voordat je de knop aan je site toevoegt. Om dit te doen:

1. Maak een nieuw aanmeldingsformulier dat verschijnt wanneer op de knop wordt geklikt of kies een formulier dat je al hebt gemaakt.
2. Op het tabblad Styles moet je Formuliertype ingesteld zijn op Popup, Fly-out of Volledige pagina. Ingebedde formulieren kunnen niet worden geactiveerd als er op een knop wordt geklikt.
3. Selecteer op het tabblad Targeting & Behaviors onder Timing de optie Alleen tonen bij aangepaste trigger .
   
4. Als je tevreden bent met het ontwerp en de inhoud van je formulier, klik je op Publiceren. 
5. Open vervolgens de editor voor je formulier en kies de volgende instellingen
6. Kopieer de onderstaande code:

   <knop class="klaviyo_form_trigger"> Klik hier</button>

7. Plak de code in de HTML van elke pagina op je website waarop je de knop wilt laten verschijnen. Deze knop gebruikt de standaardstijlen van je site template. Als je het uiterlijk van de knop verder wilt aanpassen, raadpleeg dan je ontwikkelaar of een Klaviyo partner.

Merk op dat als je meerdere knoppen aan je site toevoegt die elk een ander aanmeldingsformulier activeren, je een unieke naam moet gebruiken om elke knop te classificeren (bijv. klaviyo_form_trigger1, klaviyo_form_trigger2). 

Stel de knop in om je aanmeldingsformulier te activeren

Nu je een nieuwe knop aan je website hebt toegevoegd, moet je de trigger instellen zodat je aanmeldingsformulier verschijnt als erop wordt geklikt. Stel de trigger in door een klein, aangepast JavaScript-fragment aan je site toe te voegen:

1. Kopieer het onderstaande codefragment: 
   

   <script type="text/javascript"> 
    document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
   		window._klOnsite = window._klOnsite || []; 
   		window._klOnsite.push(['openForm', 'FORM_ID']);
   	});
   </script>

2. Plak het codefragment direct onder de knopcode die je in de vorige sectie aan je site hebt toegevoegd.
3. Vervang in de snippet die je zojuist hebt geplakt FORM_ID door de ID van je aanmeldingsformulier.
   • Om het formulier-ID te vinden, navigeer je terug naar Klaviyo en open je de formuliereditor voor je aanmeldingsformulier. Kopieer de 6-cijferige code aan het einde van de URL om toe te voegen aan je codefragment; dit is de Form ID.
     
4. De ingevulde code moet de nieuwe knopcode bevatten en de aanmeldingsformulier-trigger met je unieke formulier-ID. Zorg ervoor dat je deze op elke pagina plakt waar je de knopcode hebt toegevoegd.
   • Hier is een voorbeeld van de voltooide code in een Shopify pagina-editor: 
     
     

     Als je de klasse van de knop in de laatste stap hebt aangepast (bijvoorbeeld door klaviyo_form_trigger te vervangen door een andere tekst of door een getal toe te voegen), zorg er dan voor dat je deze code update gebruikt met de tekst die je hebt gebruikt. 

5. Sla de wijzigingen op.

Test je knop 

Zodra je alle wijzigingen in de code van je site hebt opgeslagen, bezoek je je site en klik je op je nieuwe knop. Als je dat doet, verschijnt het aanmeldingsformulier. 

Problemen? Ga naar Klaviyo's community Forum voor advies van andere Klaviyo gebruikers. 

Extra hulpbronnen

• Aan de slag met aanmeldingsformulieren
• Hoe je een popup of fly-out formulier op maat kunt triggeren
• Hoe je formuliertargeting en gedragsinstellingen kiest
• cursus: Klaviyo productcertificering