Så här optimerar du popup- och undermenyformulär för mobila enheter

Du kommer att lära dig

Lär dig hur du utformar ditt mobila registreringsformulär med Klaviyo's bästa praxis i åtanke så att du kan se till att dina popup- och undermenyformulär är optimerade för mobila besökare. 

Online-shoppare använder i allt högre grad sina mobila enheter för att upptäcka nya butiker, bläddra bland produkter och göra inköp, så det är viktigare än någonsin att se till att din webbplats ser lika bra ut på mobilen som den gör på stationära datorer, och det inkluderar ditt registreringsformulär. 

Innan du börjar

I Klaviyo kan du skapa formulär som visas på alla enheter (vilket innebär att de är synliga på stationära och mobila enheter), eller så kan du skapa formulär som bara visas på mobila enheter.

Om ditt formulär är inställt på att visas på alla enheter optimerar Klaviyo automatiskt vissa element, till exempel teckenstorlekar och bilder, för att förbättra utseendet för kunder på mobila enheter; men den här guiden kommer att täcka ytterligare bästa praxis att tänka på. Använd vyväljaren i det övre högra hörnet av formulärbyggaren för att växla mellan skrivbords- och mobilvyer när du bygger ditt formulär. Desktop-ikonen visar hur formuläret ser ut för desktop-kunder, medan mobilikonen visar vad mobilkunder ser.

I den här guiden beskrivs bästa praxis för att skapa popup- och undermenyformulär som visas på mobila enheter. Det finns hjälpmedel oavsett om ditt formulär visas på alla enheter eller bara på mobilen. För en mer djupgående översikt om registreringsformulär specifikt på mobila enheter, gå till grunderna: mobil formulärdesign.

Bästa praxis för allmänna formulär

Många av de bästa metoderna för formulär för datorer gäller även för mobila enheter: 

• Håll det kort och koncist: överväg ett flerstegsformulär om du har många fält.
  • Om ditt formulär samlar in sms-samtycke, samla in e-post i första steget, följt av sms i andra steget med Smart Opt-in så att besökare på mobila enheter kan prenumerera på enklast möjliga sätt.
• Se till att den är lätt att stänga, så att besökarna inte blir frustrerade och lämnar din webbplats. 
  • Med hjälp av en teaser kan kunderna stänga och öppna formuläret igen efter eget önskemål.
• Om ditt formulär är inställt på att visas på alla enheter (vilket innebär att både desktop- och mobilkunder kommer att se det) och innehåller en sidobild ska du låta sidobilden visas endast på mobilen. 
  
• Använd kortfattade etiketter för varje indatafält (t.ex. e-postadress, telefonnummer etc.) som ryms på en enda rad så att kunderna lätt kan se vilken information du ber om.

SEO och mobila formulär 

Det är viktigt att tänka på bästa praxis för mobil SEO, särskilt när du skapar formulär på din hemsida eller andra målsidor. Formulär som visas på vanliga organiska sökmålsidor bör inte täcka över webbplatsens innehåll eller störa besökarens upplevelse; annars kan sidan straffas av sökalgoritmer. Läs mer om påträngande interstitialer och SEO.

För att undvika detta:

• På fliken Inriktning och beteenden ställer du in formulärets tidsinställning till Baserat på regler och anger sedan en längre tidsfördröjning (t.ex. när en besökare lämnar sidan).
• Lägg till en teaser som visas innan du visar formuläret.

Optimera popup-fönster

Ett popup-formulär visas mitt på kundens skärm, täcker ofta en stor del av sidan och hindrar kunden från att interagera med andra delar av sidan medan formuläret är öppet. Detta gör popup-fönster mer störande, men också mer konverterande. 

För att optimera hur popup-fönster fungerar på mobila enheter:

1. inaktivera formuläret från att stängas när en mobil kund klickar utanför formulärets område för att minska oavsiktliga formulärstängningar.
   • Navigera till Targeting and Behaviors.
   • Bläddra ner till Enheter.
   • Under Klicka utanför formuläret för att stänga, inaktivera Mobile switch.
     
2. Se till att ikonen för att stänga formuläret (X-knappen) är tillräckligt stor, även på en liten skärm som en mobil enhet.
   • Klicka på ikonen Stäng i förhandsgranskningen av formuläret för att justera dess storlek.
   • Testa hur formuläret ser ut på din egen mobila enhet för att se till att det är lätt att hitta och klicka på.
     Till exempel kan ikonen för att stänga formuläret till vänster vara svår att klicka på i en mobil enhet. Stäng-ikonen i formuläret till höger är dock större och lättare att hitta. 
     
3. Skilj popup-fönstret visuellt från resten av webbplatsen genom att använda en överlagringsfärg, en skugga eller båda.
   • Navigera till fliken Stilar.
   • I avsnittet Formulärbakgrund ställer du in Overlay Color för att använda en halvgenomskinlig överlagring för att dra fokus till formuläret och dämpa webbplatsens innehåll när formuläret är öppet.
   • Konfigurera en Drop Shadow för att ge subtil skuggning runt formuläret för att skilja det från det omgivande innehållet.
4. Justera marginalerna på ditt formulär så att det ser ut som ett popup-formulär på mobila enheter och inte går kant i kant.
   
   1. På fliken Stilar bläddrar du ner till Formulärstilar.
   2. Öka vänster-/högermarginalen baserat på hur det ser ut i förhandsgranskningen.

Optimera flyouts 

När ett undermenyformulär visas kan mobila besökare fortfarande interagera med din webbplats bakom formuläret, såvida inte Mobile Overlay är aktiverat. De kan välja att stänga formuläret, fylla i det eller låta det vara öppet medan de fortsätter att surfa. I allmänhet gör detta flyouts mindre påträngande än popup-fönster. 

För att optimera ditt undermenyformulär för en mobil enhet:

1. Ställ in formuläret så att det flyger ut från skärmens övre eller nedre del.
   • Navigera till avsnittet Stilar.
   • Välj Mobile undermeny Position och välj sedan antingen Dock to Bottom eller Dock to Top.
     När den här inställningen är vald kommer formuläret att flyga ut från skärmens övre eller nedre del och täcka en del av skärmen från kant till kant.
     
2. Skilj ditt undermenyformulär visuellt från resten av din webbplats med hjälp av mobil överlagring, en droppskugga eller båda.
   • Navigera till fliken Stilar.
   • Bläddra till inställningarna för Formulärbakgrund.
   • Aktivera Mobile Overlay så att mobilkunder inte kan klicka på andra element på din webbplats förrän de fyller i eller stänger formuläret. Observera att Mobile overlay inte visas när undermenyformuläret visas på en stationär dator.
   • Aktivera Drop Shadow för att skapa en subtil skuggning runt formuläret för att skilja det från det omgivande innehållet. Observera att inställningarna för Drop shadow påverkar både mobil- och skrivbordsversionen av formuläret.
     

Kommande steg

När du har optimerat dina formulär för mobila enheter kan du prova att A/B-testa formulärens utformning för att bättre förstå besökarnas preferenser. 

Ytterligare resurser 

• Komma igång med registreringsformulär
• Förstå inställningar för borttagning av formulär 
• Grundläggande: design av mobilformulär
• Hur man använder popup-formulär för att samla in sms-samtycke