Så här utlöser du att ett registreringsformulär visas när du klickar på en knapp

Du kommer att lära dig

Lär dig hur du utlöser att ett registreringsformulär visas på din webbplats när en besökare klickar på en viss knapp. I den här guiden får du hjälp med att justera formuläret så att det visas vid en anpassad utlösare, skapa och lägga till en ny knapp på din webbplats och klistra in ett kort kodsnippet i webbplatsens HTML så att ett klick på knappen utlöser registreringsformuläret.

Om du är utvecklare och vill specialkoda en utlösare för ditt registreringsformulär kan du gå till vår utvecklarresurs om hur du specialutlöser ett popup- eller flyout-formulär.

Innan du börjar ska du se till att Klaviyo JavaScript på webbplatsen (Klaviyo.js) är installerat på varje sida där du lägger till knappen. Bekräfta att registreringsformulär är aktiverade på din webbplats.

Skapa en ny knapp

This content requires Functional cookies to be enabled.

Update Cookie Settings

Innan du lägger till en ny knapp på din webbplats ska du konfigurera ditt registreringsformulär i Klaviyo:

1. Skapa ett nytt registreringsformulär som visas när knappen klickas, eller välj ett formulär som du redan har skapat.
2. Välj Redigera stilar i formulärredigeraren. Ställ in Formulärtyp på Popup, flyout, helsida eller banner. Inbäddade formulär kan inte utlösas när du klickar på en knapp.
3. Välj Inriktning och beteende > Visning. Under Tidpunkt ställer du in Visa formulär på Endast vid en anpassad utlösare.

Anpassade utlösare kringgår formulärets regler för inriktning, enhet och frekvens. Om du behöver begränsa vem som kan öppna formuläret kan du tillämpa de villkoren på webbplatsens knapp eller anpassade kod.

1. När du är nöjd med formulärets design och innehåll klickar du på Publicera eller schemalägg, väljer alternativet Publicera nu och klickar sedan på Publicera nu för att publicera formuläret.
2. Kopiera koden nedan:

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

1. Klistra in koden i HTML-koden på valfri sida på din webbplats där du vill att knappen ska visas. Den här knappen använder standardstilarna från webbplatsens mall. Om du vill anpassa knappens utseende ytterligare kan du rådfråga din utvecklare eller en Klaviyo-partner.

Om du lägger till flera knappar på samma sida, ge varje knapp ett unikt klassnamn (t.ex. klaviyo_form_trigger1, klaviyo_form_trigger2), även om de öppnar samma registreringsformulär. JavaScript-kodsnutten nedan kopplas bara till den första knappen med en matchande klass. Lägg till en matchande kodsnutt för varje knapp.

Ställ in knappen så att den utlöser ditt registreringsformulär

This content requires Functional cookies to be enabled.

Update Cookie Settings

Nu när du har lagt till en ny knapp på din webbplats behöver du härnäst konfigurera utlösaren så att ditt registreringsformulär visas när du klickar på den. Konfigurera utlösaren genom att lägga till ett litet anpassat JavaScript-kodavsnitt på din webbplats:

1. Kopiera kodsnippet nedan:

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

1. Klistra in kodsnippetet direkt under knappkoden som du lade till på din webbplats i förra avsnittet.
2. I kodsnutten du precis klistrade in ersätter du FORM_ID med ditt registreringsformulärs ID.
   • Om du vill hitta ditt formulär-ID går du tillbaka till Klaviyo och öppnar formuläredigeraren för ditt registreringsformulär. Kopiera ID:t direkt efter /forms/ i webbadressen. ID:t kan innehålla bokstäver och siffror. Behåll exakt samma versaler/gemener som visas när du ersätter FORM_ID i din kodsnutt.
     

3. Den färdiga koden ska innehålla den nya knappkoden och registreringsformulärets utlösare med ditt unika formulär-ID. Se till att klistra in detta på varje sida där du lade till knappkoden.
   • Här är ett exempel på den färdiga koden i en sidredigerare i Shopify:
     

1. Spara dina ändringar.

Testa din knapp

När du har sparat alla ändringar i din webbplats kod går du till din webbplats och klickar på din nya knapp. När du gör det visas registreringsformuläret.

Har du problem? Gå till Klaviyos Community Forum för vägledning från andra Klaviyo-användare.

Ytterligare resurser