Hoe je een aanmeldingsformulier kunt activeren dat verschijnt wanneer er op een knop wordt geklikt

Wat je leert

Ontdek hoe je een aanmeldingsformulier op je website kunt laten verschijnen wanneer een bezoeker op een bepaalde knop klikt. In deze gids laten we je zien hoe je je formulier zo aanpast dat het wordt weergegeven bij een aangepaste trigger, hoe je een nieuwe knop maakt en toevoegt aan je site, en hoe je een kort codefragment in de HTML van je site plakt zodat het aanmeldingsformulier wordt geactiveerd wanneer je op de knop klikt.

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

Nieuwe knop maken

This content requires Functional cookies to be enabled.

Update Cookie Settings

Maak eerst een nieuwe knop op je website die het aanmeldingsformulier laat verschijnen wanneer je erop klikt. Je moet ervoor zorgen dat je aanmeldingsformulier correct is ingesteld in Klaviyo voordat je de knop aan je site toevoegt. Doe het volgende:

1. Maak een nieuw aanmeldingsformulier dat verschijnt wanneer er op de knop wordt geklikt, of kies een formulier dat je al hebt gemaakt.
2. Op het tabblad Stijlen moet je Formuliertype zijn ingesteld op Popup, fly-out-formulier of volledige pagina. Ingesloten formulieren kunnen niet worden geactiveerd wanneer er op een knop wordt geklikt.
3. Selecteer op het tabblad Targeting & Behaviors onder Timingde optie Alleen weergeven bij aangepaste trigger.
   

4. Als je tevreden bent met het ontwerp en de content 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:

<button class="klaviyo_form_trigger">Click here</button>

1. Plak de code in de HTML van elke pagina op je website waar je wilt dat de knop verschijnt. Deze knop gebruikt de standaardstijlen uit de template van je site. Als je de look van de knop verder wilt aanpassen, raadpleeg dan je developer of een Klaviyo-partner.

Houd er rekening mee dat als je meerdere knoppen aan je site toevoegt die elk verschillende aanmeldingsformulieren 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

This content requires Functional cookies to be enabled.

Update Cookie Settings

Nu je een nieuwe knop aan je website hebt toegevoegd, moet je vervolgens de trigger instellen zodat je aanmeldingsformulier verschijnt wanneer 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>

1. Plak het codefragment direct onder de knopcode die je in de vorige sectie aan je site hebt toegevoegd.
2. Vervang in het fragment dat je net hebt geplakt FORM_ID door de ID van je aanmeldingsformulier.
   • Om de formulier-ID te vinden, ga je terug naar Klaviyo en open je de formulier-editor voor je aanmeldingsformulier. Kopieer de code van 6 cijfers aan het einde van de URL om toe te voegen aan je codefragment; dit is de formulier-ID.
     

3. De voltooide code moet de nieuwe buttoncode bevatten, en de trigger voor het aanmeldingsformulier met je unieke formulier-ID. Zorg ervoor dat je dit plakt op elke pagina waar je de buttoncode hebt toegevoegd.
   • Hier is een voorbeeld van de voltooide code in een Shopify-paginabewerker:
     

1. Sla de wijzigingen op.

Test je knop

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

Problemen? Ga naar Klaviyo’s Community Forum voor begeleiding van andere Klaviyo-gebruikers.

Extra hulpbronnen