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

Du kommer att lära dig

Läs mer om hur du använder Klaviyos verktyg för att skapa registreringsformulär för att utforma ditt formulär genom att redigera designinställningarna som finns i avsnittet Stilar. Stilinställningarna gäller i hela ditt registreringsformulär, inklusive i alla formulärets steg och i dess framgångsmeddelande.

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

Innan du börjar

Innan du utformar ditt registreringsformulär går du till fliken Registreringsformulär > Skapa registreringsformulär. Du kan anpassa en färdig mall från formulärbiblioteket eller skapa en helt ny mall för registreringsformulär. Lägg till valfritt innehåll och inmatningsblock som du vill inkludera innan du börjar utforma.

Om du bygger ett registreringsformulär endast för mobil, se grunderna: design av mobilformulär.

Formulärtyper

Överst i avsnittet Stilar kan du välja en formulärtyp: popup, helsida, flyout eller inbäddat:

• Popup-fönster visas i mitten av webbläsarfönstret. Ett popup-fönster fångar uppmärksamheten och används bäst för viktiga erbjudanden eller kritiska budskap. Popup-fönster har den högsta konverteringsfrekvensen av alla formulärtyper.
• Utfällbara fönster glider in i webbläsarfönstret från valfri riktning som du väljer. Dessa kan, precis som popup-fönster, användas för att få någon att genomfö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äsarbesökare på ett passivt sätt.
• Inbäddade formulär visas där du klistrar in det angivna kodsnippet på din webbplats. Inbäddade formulär är det minst påträngande registreringsformuläret och används vanligtvis i sidfoten på en webbplats för att samla in e-postadresser.
• Helsides -formulär visas över hela webbläsarfönstret och fångar dina kunders fulla uppmärksamhet. Dessa formulär har ofta hög konverteringsgrad eftersom de inte kan förbises, men de upplevs också som mer påträngande eftersom besökare måste interagera med formuläret för att stänga det.
  • Överväg att använda ett helsidesformulär som målsida för att utöka din prenumerantlista.
• Banderoller visas som en rad längst upp eller längst ner på en webbsida. De är mindre påträngande än popup-fönster eller helsidesformulär och ger kontinuerlig synlighet och en mobilvänlig design som integreras smidigt med din webbplats. Du kan ställa in att banderollen ska rulla med sidan eller vara fast, lägga till innehållsblock eller indatafält direkt i banderollen, eller konfigurera banderollen så att när någon klickar på den så utlöses att ett annat formulär från ditt konto öppnas.
  • Om du vill att ett annat formulär ska visas när en kund klickar på bannern klickar du på knappen i förhandsvisningen och ställer in Åtgärd på Öppna ett annat formulär, och väljer sedan det liveformulär du vill visa. Observera att detta inte är möjligt för inbäddade formulär.

Bakgrundsbilder och sidobilder

Om du vill lägga till anpassade bilder i ditt registreringsformulär kan du använda en sidobild eller en 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 att tänka på:

• Det finns många typer av bildformat att välja mellan. JPEG-bilder balanserar kvalitet och storlek bra för färgstarka bilder, medan PNG-bilder kan få transparenta bilder eller logotyper att se skarpa ut.
  • Sikta på en filstorlek på 50–100 KB för sidobilder och under 200 KB för bakgrundsbilder för att säkerställa högkvalitativa bilder utan att göra webbplatsens laddningstider långsammare.
• Precis som med alla bilder som visas på webben leder större filstorlekar till långsammare laddningstider.
  • Observera att en bild i full bredd vid 72 dpi ofta är större än 1 MB, och att om du minskar bildens storlek kan det minska kvaliteten. Tänk på avvägningen mellan bildkvalitet och laddningstid när du väljer bilder.
• Se till att använda en bild av tillräckligt hög kvalitet för bästa resultat.
  
  • På webben är det bästa praxis att använda en upplösning på 72 dpi. För att balansera bildkvalitet och inläsningshastighet kan du försöka hålla dina bilder mellan 600 och 1 000 px i bredd, och under 2 000 px i höjd för bilder i full bredd. Bilder som är smalare än e-postmeddelandets fulla bredd kan vara mindre än 600 px.
    
    • Observera att om du använder ett helsides registreringsformulär behöver du en större bild med hög upplösning (t.ex. en minsta bredd på 1980 px) för att passa formuläret i det större formatet. Tänk dock på att det här fortfarande kan påverka laddningstiden.
• Lägg till alt-text till bilden för att främja tillgänglighet för alla användare som interagerar med dina formulär.

Eftersom registreringsformulär återges i webbläsare (till skillnad från e-postmeddelanden, som återges i ESP:er) finns det färre rekommendationer för hur du formaterar och justerar dem. Webbläsare kan återge bilder i alla typer och storlekar, så håll dig i allmänhet till högupplösta bilder, hanterbara filstorlekar och testa utseendet på varje typ av enhet.

Lägg till en sidobild

Så här lägger du till en sidobild:

1. Gå till avsnittet Stilar och rulla 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å att vara 780 px breda och i mediumstorlek. Du kan dock justera detta 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å 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 så här lägger du till sidobilder i registreringsformulär.

Lägg till en bakgrundsbild

Så här lägger du till en bakgrundsbild:

1. Aktivera inställningen Bakgrundsbild under Formulärbakgrund.
2. Ladda upp din bild med knappen Bläddra.
3. Justera visningsinställningarna efter dina önskemål.
   

Om du lägger till en bild på sidan eller i bakgrunden i ditt formulär kan du förhandsgranska alla formulärsteg, inklusive bekräftelsemeddelandet, 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 lägre än andra. När ditt formulär innehåller en bild kan en del av bildinnehållet klippas av på mindre steg. För att undvika detta anger du en minsta höjd under Formulärtyp i avsnittet Stilar.

Alternativ för färg och avstånd

Använd inställningarna Formulärstilar och Indatafältsstilar för att ange färger, kantfärger, utfyllnad och marginaler. De här inställningarna gäller för alla steg i ditt formulär, om du inte tillämpar motstridiga inställningar (t.ex. för text eller färger) i stilinställningarna för ett specifikt innehållsblock.

Teckensnitt och textstilar

Redigera texten (t.ex. teckensnitt, storlek, färg osv.) för dina innehållsblock (t.ex. ett e-post- eller telefonnummerfält) under Textstilar för indatafält.

Redigera text för ett specifikt innehållsblock genom att klicka på blocket i formulärförhandsvisningen och använda menyn med alternativ för Text som visas. Klaviyos formulärredigerare använder UTF-8-kodningsstandarden, vilket innebär att den har stöd för latinska tecken, emojis, dubbelbyte-tecken med mera.

Ditt registreringsformulär kan använda de webbsäkra teckensnitt som är inbyggda i Klaviyo-redigerarna, 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 för 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 att styla ett formulärs stängningsikon.

Om du har valt att använda ett helsideformulär är det enda sättet för dina kunder att stänga formuläret att klicka på stängningsikonen. Det här är bra för att fånga deras uppmärksamhet, men se till att stängningsikonen är tydlig och synlig så att kunder inte blir frustrerade av avbrottet från ditt helsideformulär.

Anpassad HTML och CSS

Klaviyos redigerare för registreringsformulär har för närvarande inte stöd för anpassat HTML- eller CSS-innehåll. För tips och inspiration om hur du anpassar ditt formulär med Klaviyos redigerare kan du gå till Community-forumet.

Utfall

Nu har du lärt dig hur du justerar olika stilinställningar i formulärredigeraren för att designa ditt registreringsformulär.

Kommande steg

När du har formgett ditt registreringsformulär kan du läsa mer om hur du konfigurerar formulärets beteenden, inklusive vilka besökare som ska se formuläret och när det ska visas. Gå till vår artikel hur du väljer inställningar för formulärinriktning och beteende.

När du har publicerat ditt registreringsformulär kan du anpassa ditt bekräftelsemeddelande för opt-in om dubbel opt-in är aktiverat för din lista. Sedan kan du bygga en välkomstserie som levererar formulärets erbjudande (t.ex. en rabatt eller fri frakt på den första beställningen) och introducerar nya prenumeranter till ditt varumärke.

Ytterligare resurser