Förståelse för stilar för ett registreringsformulär

Du kommer att lära dig

Lär dig hur du använder Klaviyo's registreringsformulärbyggare för att utforma ditt formulär genom att redigera de designinställningar som finns i avsnittet Styles. Stilinställningarna gäller för hela registreringsformuläret, inklusive i alla formulärets steg och i framgångsmeddelandet. 

Håll utformningen av ditt registreringsformulär enkel. Den ska vara tydlig, ren och ha 1 huvudsyfte. Dessutom vill du göra den lätt att läsa och följa. 

Innan du börjar

Innan du utformar ditt registreringsformulär ska du navigera till fliken registreringsformulär > Skapa registreringsformulär .Du kan anpassa ett färdigbyggt mall från formulärbiblioteket eller skapa ett helt nytt registreringsformulär mall. Lägg till innehåll och inmatningsblock som du vill inkludera före styling. 

Om du ska skapa ett registreringsformulär som bara kan användas i mobilen, se Grunder: Designav formulär för mobila enheter.

Typ av formulär

Överst i avsnittet Styles kan du välja en formulärtyp: popup, helsida, undermeny eller inbäddning:

• Popup-fönster visas i mitten av webbläsarens fönster. En popup är ett blickfång och används bäst för viktiga erbjudanden eller kritiska meddelanden. Popup-fönster har den högsta konverteringsfrekvensen av alla formulärtyper. 
• Flyouts glider in i webbläsarfönstret från valfri riktning. Dessa kan, precis som popup-fönster, användas för att få någon att utföra något eller omdirigera dem, men eftersom det är ett mindre påträngande alternativ kan du använda det för att samla in information om dina webbläsare på ett passivt sätt.
• Inbäddade formulär visas där du klistrar in den kodsnippet som tillhandahålls på din webbplats. Inbäddade formulär är det registreringsformulär som gör minst intrång och används vanligtvis i sidfoten på en webbplats för att samla in e-postadresser. 
• Helsidesformulär visas över hela webbläsarfönstret och samlar dina kunders fulla uppmärksamhet. Det här är formulär med hög konverteringsgrad eftersom de inte är lätta att förbise, men det gör dem också mer påträngande eftersom kunderna måste interagera med formuläret för att stänga det.
  • Överväg att använda ett helsidesformulär som en målsida för att utöka din prenumerantlista. 
• Banners visas som ett fält längst upp eller längst ner på en webbsida. De är mindre påträngande än popup-fönster eller helsidesformulär och erbjuder kontinuerlig synlighet och en mobilvänlig design som smidigt integreras med din webbplats. Du kan ställa in bannern så att den rullar med sidan eller förblir fast, lägga till innehållsblock eller indatafält direkt till bannern, eller konfigurera bannern så att när någon klickar på den så öppnas ett annat formulär från ditt Konto. 
  • Om du vill att ett annat formulär ska visas när en kund klickar på bannern klickar du på knappen i förhandsgranskningen och ställer in Åtgärd på Öppna ett annat formulär och väljer sedan det liveformulär som du vill visa. Observera att detta inte är möjligt för inbäddade formulär.

Bakgrundsbilder och sidobilder 

För att lägga till anpassade bilder till ditt registreringsformulär, använd en sidobild eller bakgrundsbild. Sidobilder visas till vänster eller höger om formulärinnehållet, medan bakgrundsbilder visas bakom formulärfälten. 

När du använder en bild i ett formulär finns det några saker du bör tänka på:

• Det finns många olika typer av bildformat att välja mellan. JPEG-filer balanserar kvalitet och storlek väl för färgglada bilder, medan PNG-filer kan hålla transparenta bilder eller logotyper snygga. 
  • Sikta på en filstorlek på 50-100 KB för sidobilder och mindre än 200 KB för bakgrundsbilder för att säkerställa högkvalitativa bilder utan att sakta ner webbplatsens laddningstider.
• Som med alla bilder som visas på webben leder större filstorlekar till långsammare laddningstider.
  • Observera att en fullbreddsbild med 72 dpi ofta är större än 1 MB och att en minskning av bildens storlek kan försämra kvaliteten. Tänk på avvägningen mellan bildkvalitet och laddningstid när du väljer bilder.
• Se till att använda en bild av någorlunda hög kvalitet för bästa resultat. 
  
  • På webben är det bäst att använda 72 dpi upplösning. För att balansera bildkvalitet och laddningshastighet bör du försöka hålla dina bilder mellan 600 och 1000 px i bredd och mindre än 2000 px i höjd för bilder i full bredd. Bilder som är mindre än e-postmeddelandets fulla bredd kan vara mindre än 600 pixlar.
    
    • Observera att om du använder ett registreringsformulär för hela sidan behöver du en större, högupplöst bild (t.ex. en minsta bredd på 1980px) för att passa det större formuläret. Tänk dock på att detta fortfarande kan påverka laddningstiden.
• Lägg till alt-text till din bild för att främja tillgängligheten för alla användare som interagerar med dina formulär. 

Eftersom registreringsformulär återges i webbläsare (till skillnad från e-post, som återges i e-postleverantörens) finns det färre rekommendationer för hur de ska formateras och justeras. Webbläsare kan återge bilder av alla typer och storlekar, så i allmänhet bör du hålla dig till högupplösta bilder, hanterbara filstorlekar och testa utseendet på varje typ av enhet. 

Lägg till en sidobild

För att lägga till en sidobild:

1. Gå till avsnittet Stilar och bläddra till inställningarna för Sidobild.
2. Välj Vänster bild eller Höger bild, beroende på var du vill att bilden ska visas.
   
3. Välj en bild. Som standard är formulär med sidobilder inställda på 780px bredd och medelstor storlek; detta kan dock justeras i avsnittet Sidobild på fliken Stilar beroende på formulärstorleken eller om du vill att bilden ska visas mindre eller större.

Observera att sidobilder ställs in på stegnivå, så att du kan ställa in separata bilder för varje steg i formuläret. Mer information om visningsalternativ för sidobilder finns i vår artikel om hur du lägger till sidobilder i registreringsformulär. 

Lägg till en bakgrundsbild

Lägga till en bakgrundsbild:

1. Aktivera inställningen Bakgrundsbild under Formulärbakgrund.
2. Ladda upp din bild med hjälp av knappen Bläddra.
3. Justera displayinställningarna så att de passar dig.
   

Om du lägger till en sido- eller bakgrundsbild i formuläret kan du förhandsgranska alla steg i formuläret, inklusive framgångsmeddelandet, genom att välja varje steg i den övre menyraden. Som standard justeras formulärets höjd baserat på innehållet och formulärfälten i varje steg, så vissa steg kan vara högre eller kortare än andra. När ditt formulär innehåller en bild kan en del av bildinnehållet klippas bort på mindre steg. För att undvika detta kan du ange en minsta höjd under Form Type i avsnittet Styles. 

Alternativ för färg och avstånd

Använd inställningarna Form Styles och indatafält Styles för att ange färger, kantfärger, utfyllnad och marginaler. Dessa inställningar kommer att gälla för alla steg i formuläret, såvida du inte tillämpar motstridiga inställningar (t.ex. för text eller färger) inom ett specifikt innehåll blocks stilinställningar.

Typsnitt och textstilar

Redigera texten (t.ex. typsnitt, storlek, färg etc.) för ditt innehållsblock (t.ex. en e-post eller ett telefonnummerfält) under indatafält Text Styles.

Redigera texten för ett visst innehåll block genom att klicka på block i förhandsgranskningen av formuläret och använda menyn Textalternativ som visas. Klaviyos formulärredigerare använder kodningsstandarden UTF-8, vilket innebär att den stöder latinska tecken, emojis, dubbla byte-tecken med mera.

Ditt registreringsformulär kan använda de webbsäkra teckensnitt som är inbyggda i Klaviyo-redaktörerna, ett av våra Klaviyo-hostade anpassade teckensnitt eller så kan du lägga till dina egna anpassade teckensnitt. Lär dig hur du använder anpassade teckensnitt i dina registreringsformulär. 

Stäng ikoner

Du kan justera storlek, färg och stil på formulärets stängningsikon (X:et i det övre högra hörnet). Klicka på X-ikonen i formulärredigeraren och justera sedan inställningarna i redigeraren till vänster. Läs mer om hur du utformar ett formulärs stängningsikon. 

Om du har valt att använda ett helsidesformulär är det enda sättet för dina kunder att avfärda formuläret att klicka på ikonen Stäng. Detta är bra för att samla deras uppmärksamhet; men se till att stängningsikonen är tydlig och synlig så att kunderna inte blir frustrerade över avbrottet i ditt helsidesformulär.

Anpassad HTML och CSS

Klaviyo's registreringsformulärsredaktör gör för närvarande inte support anpassat HTML- eller CSS-innehåll. För tips och inspiration om hur du anpassar ditt formulär med hjälp av Klaviyo:s editor, gå till communityforumet. 

Utfall

Du har nu lärt dig hur du kan justera olika stilinställningar i formulärredigeraren för att utforma ditt registreringsformulär.

Kommande steg

När du har utformat ditt registreringsformulär kan du lära dig hur du ställer in formulärets beteenden, inklusive vilka besökare som ska se formuläret och när det ska visas. Gå till vår artikel om hur du väljer formulärinriktning och beteendeinställningar.

När du har publicerat ditt registreringsformulär kan du anpassa ditt e-postmeddelande för bekräftelse av opt-in, om dubbel opt-in är aktiverat för din lista. Bygg sedan en välkomstserie för att leverera formulärets erbjudande (t.ex. en rabatt eller fri frakt på deras första beställning) och introducera nya prenumeranter till ditt varumärke.

Ytterligare resurser

• Komma igång med registreringsformulär
• Så här A/B-testar du ett registreringsformulär
• Kurs: Skapa strategiska registreringsformulär