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.

Eftersom det krävs tillgång till webbplatsens HTML och e-handelsplattform för att klistra in den här koden kan vårt supportteam inte erbjuda praktisk hjälp. Om du inte har en utvecklare i ditt team och inte känner dig bekväm med att lägga till koden själv kan du överväga att kontakta en Klaviyo-partner för att få hjälp.

Skapa en ny knapp

Skapa först en ny knapp på din webbplats som gör att registreringsformuläret visas när du klickar på den. Du måste se till att ditt registreringsformulär är korrekt konfigurerat i Klaviyo innan du lägger till knappen på din webbplats. För att göra det:

1. Skapa ett nytt registreringsformulär som visas när knappen klickas, eller välj ett formulär som du redan har skapat.
2. På fliken Stilar ska din Formulärtyp vara inställd på antingen Popup, flyout eller helsida. Inbäddade formulär kan inte utlösas när en knapp klickas.
3. På fliken Målgruppsinriktning och beteenden väljer du Visa endast vid anpassad utlösare under Tidpunkt.
   
4. När du är nöjd med formulärets design och innehåll klickar du på Publicera.
5. Öppna sedan redigeraren för ditt formulär och välj följande inställningar
6. Kopiera koden nedan:
   

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

7. 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.

Observera att om du lägger till flera knappar på din webbplats som var och en utlöser olika registreringsformulär måste du använda ett unikt namn för att klassificera varje knapp (t.ex. klaviyo_form_trigger1, klaviyo_form_trigger2).

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

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>

2. Klistra in kodsnippetet direkt under knappkoden som du lade till på din webbplats i förra avsnittet.
3. I kodsnutten du precis klistrade in ersätter du FORM_ID med ditt registreringsformulärs ID.
   
   • För att hitta formulär-ID: navigera tillbaka till Klaviyo och öppna formulärredigeraren för ditt registreringsformulär. Kopiera den sexsiffriga koden i slutet av webbadressen och lägg till den i din kodsnippet; detta är formulär-ID:t.
   
4. 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:
   

   Om du justerade knappens klass i det senaste steget (dvs. om du ersatte klaviyo_form_trigger med någon annan text eller lade till en siffra) ska du se till att uppdatera den här koden med den text du använde.

5. 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.