Så här får du ett registreringsformulär att visas när du klickar på en knapp

Du kommer att lära dig

Lär dig hur du får ett registreringsformulär att visas på din webbplats när en besökare klickar på en viss knapp. Den här guiden går igenom hur du justerar ditt formulär så att det visas på en anpassad trigger, skapar och lägger till en ny knapp på din webbplats och klistrar in ett kort kodsnippet i webbplatsens HTML så att registreringsformuläret aktiveras om du klickar på knappen. 

Om du är en utvecklare och vill skräddarsy en trigger för ditt registreringsformulär kan du gå till vår utvecklarresurs om hur du skräddarsyr en trigger för ett popup- eller undermenyformulär. 

Skapa en ny knapp 

Först skapar du 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 ska visas när du klickar på knappen, eller välj ett formulär som du redan har skapat.
2. På fliken Styles ska formulärtypen vara inställd på antingen Popup ,undermeny eller Full Page. Inbäddade formulär kan inte aktiveras när man klickar på en knapp.
3. På fliken Targeting & Behaviors väljer du Only show on custom trigger under Timing.
   
4. När du är nöjd med formulärets utformning 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"> Klicka här</button>

7. Klistra in koden i HTML-koden på den sida på din webbplats som du vill att knappen ska visas på. Den här knappen använder standardstilarna från webbplatsens mall. Om du vill anpassa knappens utseende ytterligare, kontakta din utvecklare eller en Klaviyo-partner.

Observera att om du lägger till flera knappar på din webbplats som alla 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 för att utlösa ditt registreringsformulär

Nu när du har lagt till en ny knapp på din webbplats måste du ställa in triggern så att ditt registreringsformulär visas när du klickar på den. Ställ in utlösaren genom att lägga till en liten, anpassad JavaScript-snutt 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 kodsnippet direkt under den knappkod som du lade till på din webbplats i det sista avsnittet.
3. I utdraget som du just klistrade in ersätter du FORM_ID med registreringsformulärets ID.
   • För att hitta formulär-ID, navigera tillbaka till Klaviyo och öppna formulärredigeraren för ditt registreringsformulär. Kopiera den 6-siffriga koden i slutet av URL:en och lägg till den i kodsnippet; detta är formulär-ID:t.
     
4. Den färdiga koden bör innehålla den nya knappkoden och registreringsformulärets trigger med ditt unika formulär-ID. Se till att klistra in detta på varje sida där du har lagt till knappkoden.
   • Här är ett exempel på den färdiga koden i en Shopify-sidredigerare: 
     
     

     Om du justerade knappens klass i det sista steget (dvs. du ersatte klaviyo_form_trigger med någon annan text eller lade till en siffra), 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 koden på din webbplats besöker du webbplatsen och klickar på den nya knappen. När du gör det kommer registreringsformuläret att visas. 

Har du problem? Gå till Klaviyo:s community Forum för att få vägledning från andra Klaviyo -användare. 

Ytterligare resurser

• Komma igång med registreringsformulär
• Hur man utlöser en popup eller ett undermenyformulär
• Så här väljer du inställningar för formulärinriktning och beteende
• kurs: Klaviyo produktcertifiering