Så optimerar du popup- och flyout-formulär för mobil

Du kommer att lära dig

Lär dig hur du designar dina registreringsformulär för mobilen med Klaviyos bästa praxis i åtanke, så att du kan se till att dina popup- och flyout-formulär är optimerade för mobilbesökare.

Onlinekunder använder i allt högre grad sina mobila enheter för att upptäcka nya butiker, bläddra bland produkter och göra köp, så det är viktigare än någonsin att se till att din webbplats ser lika bra ut på mobil som på dator, och det inkluderar dina registreringsformulär.

Innan du börjar

I Klaviyo kan du skapa formulär som visas på alla enheter (vilket innebär att de syns på stationära datorer 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 hur det ser ut för shoppare på mobila enheter. Den här guiden tar upp ytterligare bästa praxis att ha i åtanke. Använd vyväljaren i det övre högra hörnet i formulärverktyget för att växla mellan dator- och mobilvyer medan du bygger ditt formulär. Skrivbordsikonen visar hur formuläret ser ut för besökare på dator, medan mobilikonen visar vad besökare på mobil ser.

Den här guiden går igenom bästa praxis för att skapa popup- och flyout-formulär som visas på mobila enheter. De här är användbara oavsett om ditt formulär visas på alla enheter eller bara på mobil. Om du vill ha en mer ingående översikt över registreringsformulär specifikt på mobila enheter kan du gå till grunderna: mobil formulärdesign.

Allmän bästa praxis för formulär

Många av bästa praxis för skrivbordsformulär gäller även för mobila enheter:

• Håll det kort och koncist: överväg ett formulär i flera steg om du har många fält.
  • Om ditt formulär samlar in samtycke för e-post och sms ska du samla in e-post i första steget och sedan sms i andra steget. Använd Smart Opt-in för en enklare mobil opt-in-upplevelse. Smart Opt-in kräver att sms är aktiverat i ditt Konto och att du har en betald sms-plan; se den länkade guiden för krav på konfigurering.
• Se till att den är lätt att stänga, så att besökare inte blir frustrerade och lämnar din webbplats.
  • Genom att använda en form teaser kan kunder öppna ett formulär igen som de har stängt. Ställ in teasern på Visa efter att formuläret har stängts eller Visa innan formuläret visas och efter att formuläret har stängts.
• Om ditt formulär är inställt på att visas på alla enheter (vilket innebär att både kunder på dator och mobil ser det) och inkluderar en sidobild, låt bilden vara inställd på Skrivbord i Redigera stilar > Sidobild. Detta döljer sidobilden på mobila enheter, vilket ger mer utrymme för innehållet i ditt formulär.
  

• Använd kortfattade etiketter för vart och ett av dina indatafält (t.ex. e-postadress, telefonnummer osv.) som får plats på en enda rad så att kunder enkelt kan se vilken information du ber om.

SEO och mobilformulär

Det är viktigt att ta hänsyn till bästa praxis för mobil SEO, särskilt när du skapar formulär på din startsida eller andra målsidor. Formulär som visas på vanliga målsidor för organisk sökning bör inte täcka över innehållet på din webbplats eller störa besökarens upplevelse; annars kan sidan straffas av sökalgoritmer. Läs mer om påträngande interstitials och SEO.

För att undvika detta:

• Öppna Inriktning och beteende & > Visning. Under Tidsinställning ställer du in Visa formulär på Baserat på regler, aktiverar Efter tidsfördröjning och anger fördröjningen i sekunder. Om du aktiverar andra tidsregler, aktivera Visa bara om alla valda villkor uppfylls så att en annan tidsregel inte visar formuläret innan fördröjningen har passerat.
• Lägg till en teaser och ange visningsalternativet till Visas innan formuläret visas och efter att formuläret har stängts.

Optimera popup-fönster

Ett popup-formulär visas mitt på en besökares skärm och täcker ofta stora delar av sidan och hindrar dem från att interagera med andra element på sidan medan formuläret är öppet. Det gör popup-formulär mer störande, men också mer konverterande.

Så optimerar du hur popup-fönster fungerar på mobila enheter:

1. Inaktivera att formuläret stängs när en mobil kund klickar utanför formulärets område för att minska oavsiktliga formulärstängningar.
   • Gå till Inriktning och beteende > Display.
   • Scrolla ned till Klicka utanför formuläret för att stänga.
   • Avmarkera På mobilen så att tryck utanför popupfönstret inte stänger det.
     

2. Se till att formulärets stängningsikon (X-knappen) är tillräckligt stor, även på en liten skärm som en mobil enhet.
   • Klicka på stängningsikonen i formulärförhandsgranskningen 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 stängningsikonen i formuläret till vänster vara svår att klicka på på en mobil enhet. Men stängningsikonen i formuläret till höger är större och lätt att hitta.
     

3. Separera din popup visuellt från resten av webbplatsen med en överläggsfärg, en skugga eller båda.
   • Välj Redigera format för att öppna panelen Format.
   • I avsnittet Överläggsfärg väljer du en halvtransparent färg för att dra fokus till ditt formulär och dämpa innehållet på webbplatsen medan formuläret är öppet.
   • Konfigurera en Skugga för att ge en subtil skuggning runt ditt formulär och skilja det från det omgivande innehållet.
4. Justera marginalerna i ditt formulär så att det ser mer ut som ett popup-formulär på mobila enheter och inte går kant till kant.
   
   1. Välj Redigera stilar och scrolla sedan ned till Marginal.
   2. Öka de horisontella marginalerna baserat på hur formuläret ser ut i mobilförhandsvisningen.

Optimera flyouts

När ett flyout-formulär visas kan mobilbesökare fortfarande interagera med webbplatsen bakom formuläret, om inte Mobil överläggning ä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 bläddra. Generellt gör det här att flyouts känns mindre påträngande än popup-fönster.

Så optimerar du ditt flyout-formulär för en mobil enhet:

1. Ställ in formuläret så att det flyger ut från skärmens över- eller underdel.
   • Välj Redigera format för att öppna panelen Format.
   • Välj Position för mobil-flyout och välj sedan antingen Fäst längst ned eller Fäst längst upp.
     På mobila enheter i stående orientering kommer ditt formulär att flyga ut från skärmens över- eller nederkant och täcka en del av skärmen, från kant till kant. I liggande orientering använder det den vanliga flyout-positionen.
     

2. Separera visuellt ditt flyout-formulär från resten av din webbplats med en mobil överlagring, en skugga eller båda.
   • Välj Redigera format för att öppna panelen Format.
   • Scrolla till inställningarna för Mobilöverlägg och Skugga.
   • Aktivera Mobil överläggning för att blockera interaktion med resten av webbplatsen medan flyout-formuläret är öppet. Överlägget visas inte när flyout-formuläret visas på en dator.
   • Aktivera Skugga för att lägga till en subtil skuggning runt formuläret och skilja det från innehållet runt omkring. Observera att inställningarna för Skugga påverkar både mobil- och datorversionen av formuläret.
     

Kommande steg

När du är redo att publicera dina ändringar:

1. Klicka på Publicera eller schemalägg i formulärredigeraren.
2. Åtgärda alla spärrande aviseringar. Om schemaläggningsalternativ visas väljer du Publicera nu. Klicka på Publicera nu för att publicera dina ändringar.

Kontrollera det publicerade formuläret på din mobila enhet och se till att du uppfyller villkoren för inriktning och visning.

När du har optimerat dina formulär för mobila enheter kan du testa A/B-testning av dina formulärdesigner för att bättre förstå vad dina webbplatsbesökare föredrar.

Ytterligare resurser

• Komma igång med registreringsformulär
• Förstå inställningar för att stänga formulär
• Grundläggande: design av mobilformulär
• Så inhämtar du sms-samtycke med ett ”tryck och skriv”-fomulär