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.

Voordat je begint, controleer of Klaviyo's onsite JavaScript (Klaviyo.js) is geïnstalleerd op elke pagina waar je de knop toevoegt. Controleer of aanmeldingsformulieren zijn ingeschakeld op je website.

Nieuwe knop maken

This content requires Functional cookies to be enabled.

Update Cookie Settings

Voordat je een nieuwe knop aan je website toevoegt, stel je je aanmeldingsformulier in Klaviyo in:

1. Maak een nieuw aanmeldingsformulier dat verschijnt wanneer er op de knop wordt geklikt, of kies een formulier dat je al hebt gemaakt.
2. Selecteer Stijlen bewerken in de formuliereditor. Stel Formuliertype in op Pop-up, fly-out-formulier, volledige pagina of banner. Ingesloten formulieren kunnen niet worden geactiveerd wanneer er op een knop wordt geklikt.
3. Selecteer Targeting en gedrag > Weergave. Stel onder Timing Formulier weergeven in op Alleen op een aangepaste trigger.

Aangepaste triggers omzeilen de targeting-, apparaat- en frequentieregels van het formulier. Als je wilt beperken wie het formulier kan openen, pas je die voorwaarden toe op de knop of aangepaste code van je website.

1. Als je tevreden bent met het ontwerp en de content van je formulier, klik je op Publiceren of plannen, selecteer je de optie Nu publiceren en klik je vervolgens op Nu publiceren om het formulier live te zetten.
2. 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.

Als je meerdere knoppen aan dezelfde pagina toevoegt, geef je elke knop een unieke klassenaam (bijv. klaviyo_form_trigger1, klaviyo_form_trigger2), zelfs als ze hetzelfde aanmeldingsformulier openen. Het JavaScript-fragment hieronder wordt alleen gekoppeld aan de eerste knop met een overeenkomende klasse. Voeg voor elke knop een overeenkomend fragment toe.

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.
   • Ga om je formulier-ID te vinden terug naar Klaviyo en open de formuliereditor voor je aanmeldingsformulier. Kopieer de ID direct na /forms/ in de URL. De ID kan letters en cijfers bevatten; behoud de hoofdletters en kleine letters precies zoals weergegeven wanneer je FORM_ID vervangt in je snippet.
     

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