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 dess utseende för kunder som handlar på mobila enheter. Den här guiden tar dock upp ytterligare bästa praxis att ha i åtanke. Använd vyväljaren uppe till höger i formulärbyggaren för att växla mellan dator- och mobilvy medan du skapar formuläret. Skrivbordsikonen visar hur formuläret ser ut för kunder som handlar på dator, medan mobilikonen visar vad kunder som handlar 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 är användbara oavsett om ditt formulär visas på alla enheter eller bara på mobil. För en mer djupgående översikt över registreringsformulär specifikt på mobila enheter, gå till grunderna: design av mobilformulär.
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 sms, samla in e-post i det första steget och därefter sms i det andra steget med Smart Opt-in så att besökare på mobila enheter kan prenumerera med den enklaste metoden.
- Se till att den är lätt att stänga, så att besökare inte blir frustrerade och lämnar din webbplats.
- Om du använder en form teaser kan kunderna stänga och öppna formuläret igen när de vill.
- Om ditt formulär är inställt på att visas på alla enheter (vilket innebär att både dator- och mobilbesökare ser det) och innehåller en sidobild, låt sidobilden endast visas på mobil.
- 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:
- På fliken Målgruppsanpassning och beteenden ställer du in formulärets timing på Baserat på regler och anger sedan en längre tidsfördröjning (t.ex. när en besökare håller på att lämna sidan).
- Lägg till en teaser som visar Innan formulär visas.
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:
- 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 Målgrupp och beteende.
- Scrolla ner till Enheter.
- Under Klicka utanför formuläret för att stänga stänger du av reglaget Mobil.
- 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.
- Separera din popup visuellt från resten av webbplatsen med en överläggsfärg, en skugga eller båda.
- Navigera till fliken Stilar.
- I avsnittet Formulärbakgrund ställer du in Överläggsfärg så att ett halvtransparent överlägg används för att dra fokus till ditt formulär och tona ned webbplatsens innehåll 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.
- 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.
- På fliken Styles bläddrar du ned till Form Styles.
- Öka vänster/höger-marginalen baserat på hur det ser ut i förhandsgranskningen.
De här inställningarna kommer att återspeglas i både skrivbords- och mobilversionerna av ditt formulär.
Optimera flyouts
När ett flyout-formulär visas kan mobilbesökare fortfarande interagera med din webbplats bakom formuläret, om inte Mobil överlagring ä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 popups.
Så optimerar du ditt flyout-formulär för en mobil enhet:
- Ställ in formuläret så att det flyger ut från skärmens över- eller underdel.
- Navigera till avsnittet Stilar.
- Välj Position för mobil flyout och välj sedan antingen Docka längst ned eller Docka längst upp. När den här inställningen är vald flyger ditt formulär ut från toppen eller botten av skärmen och täcker en del av skärmen från kant till kant.
- Separera visuellt ditt flyout-formulär från resten av din webbplats med en mobil överlagring, en skugga eller båda.
- Navigera till fliken Stilar.
- Skrolla till inställningarna för Form Background.
- Aktivera Mobile overlay så att mobilkunder inte kan klicka på några andra element på din webbplats förrän de fyller i eller stänger formuläret. Observera att Mobile overlay inte visas när flyout-formuläret visas på en dator.
- Aktivera Drop Shadow om du vill ha en diskret skuggning runt formuläret som skiljer det från det omgivande innehållet. Observera att inställningarna för Drop Shadow påverkar både mobil- och datorversionen av formuläret.
Kommande steg
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å här använder du popup-formulär för att samla in sms-samtycke