Du testar formuläret på datorn och det ser perfekt ut. Full bredd, två kolumner, gott om luft. Du skickar ett test på mobilen och förstår direkt att något är fel. Fälten är pyttesmå. Tangentbordet täcker halva formuläret. Du trycker på fel fält. Hela upplevelsen känns trasig.
Hälften av dina besökare sitter på mobil. Är formuläret inte responsivt förlorar du hälften av inskicken. Den här artikeln går igenom hur du utformar formulär som fungerar på mobiler, surfplattor och datorer.
Mobilformulär skiljer sig från formulär på dator
Mobilanvändare fyller i formulär på ett annat sätt än datoranvändare. På dator har du utrymme. Du kan använda layouter med flera kolumner. Du kan placera etiketter bredvid fälten. På mobil räknas varje pixel.
Mobiltangentbord är stora. När tangentbordet öppnas täcker det halva skärmen. Formuläret scrollar. Användaren tappar överblicken. En knapp som nyss syntes är nu dold bakom tangentbordet.
Tryckytorna måste vara större. En klickbar yta på 14 gånger 14 pixlar fungerar bra med en mus. Ett finger behöver minst 48 gånger 48 pixlar, annars missar användaren.
Mobilanvändare har ofta ett ojämnt nätverk. Varje extra laddning av formulär eller bild tar tid. Hastighet betyder mer än på dator.
Formulär med en kolumn
Det säkraste responsiva formuläret har en kolumn. Ett fält per rad, oavsett skärmstorlek.
Layouter med en kolumn är enkla, fungerar på alla skärmar, ger en jämn upplevelse och är mycket förutsägbara. Den största nackdelen är att formulär ser längre ut på dator och kräver mer scrollning.
De flesta formulär bör ha en kolumn. Har ditt formulär fem fält är en kolumn faktiskt kortare än en layout med två kolumner på dator. Användaren scrollar mindre och ser mer av sammanhanget.
För att skapa en layout med en kolumn använder du input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Då staplas allt lodrätt vid alla brytpunkter.
Två kolumner på dator, en kolumn på mobil
Vill du använda det vågräta utrymmet på stora skärmar använder du ett rutnät med .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } och en mediefråga @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. På dator ger det två kolumner, och på mobil staplas de till en, så att layouten förblir enkel och responsiv.
Gruppera bara fält som verkligen hör ihop. Fälten "Förnamn" och "Efternamn" bredvid varandra är rimligt. Fälten "Gatuadress" och "Land" bredvid varandra är det inte.
Tryckytor och fingervänlig design
Minsta tryckyta på mobil är 44 gånger 44 pixlar (enligt Apple) eller 48 gånger 48 pixlar (Android). Sikta på minst 44.
Storleken på tryckytor gäller inmatningsfält, som måste vara tillräckligt höga för att lätt kunna tryckas på (40 till 50 pixlar är bra), kryssrutor och alternativknappar, som som standard är 13 gånger 13 pixlar och bör förstoras till minst 44 gånger 44 med CSS eller JavaScript, knappar, som bör vara minst 44 gånger 44 pixlar med extra utfyllnad, och etiketter, som också ska vara 44 gånger 44 pixlar om de går att klicka på via attributet for. Ibland bildar etikett och fält tillsammans hela tryckytan.
För att göra inmatningsfält större och lättare att trycka på använder du input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Utfyllnaden gör fältet högre och lättare att träffa.
Hantering av tangentbordet
På mobil täcker webbläsarens tangentbord den nedre halvan av skärmen. Ligger formuläret längst ner på sidan döljs skicka-knappen. Användaren måste scrolla ner eller stänga tangentbordet för att se knappen.
Placera formuläret nära toppen av sidan. Eller lägg skicka-knappen både överst och nederst. Dölj inte viktiga knappar under tangentbordet.
Tangentbordstypen spelar också roll. För ett e-postfält använder du <input type="email"> för att visa ett e-posttangentbord med @-tecken. För ett telefonfält använder du <input type="tel"> för att visa ett numeriskt tangentbord. För sifferinmatning använder du <input type="number"> för att visa ett siffertangentbord. Med rätt inmatningstyp väljer webbläsaren tangentbord automatiskt.
När användaren trycker på ett fält scrollar webbläsaren fältet i bild. Det är bra. Fältet syns när användaren ska skriva. Men ibland scrollar det förbi annat sammanhang. Testa formuläret på en riktig mobil för att se hur det beter sig.
Placering av etiketter på mobil
På dator kan etiketter sitta ovanför, bredvid eller inuti fälten. På mobil är ovanför nästan alltid bäst.
En etikett ovanför fältet är tydlig. Användaren ser etiketten och sedan fältet. På en smal skärm slösar en etikett bredvid fältet vågrätt utrymme. Hjälptext inuti fältet försvinner när man börjar skriva.
Bästa praxis: Placera etiketter ovanför fälten. Alltid.
<label for="email">E-post</label>
<input type="email" id="email">
Avstånd och utfyllnad
Responsiva formulär behöver mer avstånd på mobil, inte mindre. Din instinkt är att pressa ihop allt så att det ryms. Stå emot den.
Använd generös utfyllnad och marginal: minst 1 rem (16 pixlar) mellan fälten, minst 0,75 rem (12 pixlar) på alla sidor som utfyllnad i fält och minst 1 rem (16 pixlar) på alla sidor som utfyllnad i knappar. Generöst avstånd gör formulär lättare att använda, minskar felklick och förbättrar läsbarheten, och på mobil är luft mer värd än skärmyta.
Textstorlek på mobil
Använd minst 16 pixlar i inmatningsfält. Mindre text tvingar användare att zooma eller kisa. 16 pixlar är standard och det fungerar.
Etiketter kan vara mindre, omkring 14 pixlar. Men inmatningsfält ska vara minst 16 pixlar.
Vissa webbläsare zoomar automatiskt när du trycker på ett fält som är mindre än 16 pixlar, vilket får formuläret att hoppa och zooma oväntat. Använd input { font-size: 16px; } för att undvika det.
Vanliga misstag med responsiva formulär
Layout med två kolumner på alla skärmstorlekar
Formulär pressas ihop på mobil. Fälten blir pyttesmå. Etiketter staplas klumpigt. Stapla alltid till en kolumn vid mindre brytpunkter.
För små tryckytor
Kryssrutor, alternativknappar och knappar måste vara minst 44 gånger 44 pixlar. Testa på en riktig mobil. Måste du koncentrera dig för att trycka på den är den för liten.
Hjälptext som enda etikett
När användaren börjar skriva försvinner hjälptexten. Hen glömmer vad fältet är till för. Använd alltid ett riktigt label-element. Behåll hjälptexten om du vill, men lita aldrig enbart på den.
Formuläret längst ner på en lång sida
Användaren scrollar ner till ett kontaktformulär, trycker på e-postfältet och mobiltangentbordet täcker formuläret. Hen ser inte vad hen skriver och når inte skicka-knappen. Placera formulär nära toppen eller se till att de ryms på skärmen med tangentbordet uppe.
Att inte testa på riktiga mobiler
Webbläsaren på din dator har ett mobilläge. Det är användbart för en snabb kontroll. Men det visar inte hur formuläret verkligen fungerar på en mobil. Testa på riktiga enheter. Låna en mobil om du inte har en.
Tekniker för responsiva formulär
CSS Grid för flexibla layouter
Använd .form-group { display: grid; gap: 0.5rem; } och .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Värdena auto-fit och minmax ger en layout som flödar efter tillgängligt utrymme, så att fälten staplas på smala skärmar och ligger sida vid sida på breda.
Flexbox för knapplayouter
Använd .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } och .form-actions button { flex: 1; min-width: 150px; }. Knapparna ligger bredvid varandra på dator, bryts till flera rader på mobil och varje knapp växer för att fylla utrymmet.
Mediefrågor för specifika brytpunkter
Använd @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } för att tvinga fram en layout med en kolumn på skärmar under 480 pixlar.
Så anpassar sig WEMASY-formulär till alla skärmstorlekar
WEMASY:s formulärbyggare skapar automatiskt responsiva formulär. Bygg på datorn så är mobilen redan klar. Formulär staplas till en kolumn på mobiler. Tryckytorna är anpassade för mobil. Etiketter och fält har rätt avstånd. Inget extra arbete behövs.
Se hur responsiva formulär fungerar i ditt WEMASY-abonnemang.