Två av tre formulärinskick sker numera på en telefon. Ändå designar de flesta webbplatser sina formulär på en dator och pressar sedan in dem på en mobilskärm. Resultatet: formulär som är frustrerande att fylla i, som överges oftare och som gör färre besökare till kunder.
Formulärdesign för mobilen handlar inte om att göra datorformulär mindre. Det handlar om att tänka om hela upplevelsen för en person som håller en skärm på 6 tum, använder tummen och sitter på en skakig buss eller ett fullt kafé. Allt förändras. Utrymmet krymper. Tryckytorna blir större. Tangentbordet fälls upp och döljer halva formuläret. Besökaren blir avbruten och lämnar.
Mobile first i formulärdesign betyder att du optimerar varje detalj i ett formulär för hur människor faktiskt använder telefoner. Det här kapitlet går igenom de specifika ändringar som minskar avhopp, snabbar upp slutförandet och gör fler mobilbesökare till leads eller kunder.
Mobilformulär som är designade för datorn förlorar kunder
Titta på vad som händer när någon öppnar ett formulär på sin telefon jämfört med en dator. Telefonanvändaren har mindre skärmyta, mindre tålamod och fler distraktioner. Hen jonglerar sammanhang. Uppmärksamheten är splittrad. En enda krånglig interaktion och hen lämnar.
Data stöder det. Formulär med dålig mobildesign har avhopp som är 20-40 procentenheter högre än på dator. Ett enda illa placerat fält kan utlösa en våg av avhopp. En liten knapp som är svår att trycka på skapar friktion som multipliceras över tusentals inskick.
Men det här är vad de flesta företag missar: att optimera för mobilen gör inte datoranvändare långsammare. Ett formulär som är designat mobile first och sedan förbättrat för större skärmar fungerar faktiskt bättre för alla. Tätare layouter. Bättre avstånd. Tydligare hierarki. Det är inga kompromisser för mobilen, utan förbättringar av designen.
Utmaningen med formulärdesign för mobilen: vad som faktiskt är annorlunda
Mobilformulär möter begränsningar som datorformulär inte har. Att förstå vad som ändras hjälper dig att designa smartare:
Skärmytan är begränsad
En telefonskärm visar ungefär 30-40 % av det innehåll som en datorskärm kan visa på en gång. Varje element tar fysiskt utrymme. Extra etiketter, instruktioner, tips och formulärfält konkurrerar alla om samma lilla yta. Tangentbordet visas och minskar utrymmet ännu mer. Långa stycken med instruktionstext försvinner ut ur bild.
Tryckytorna är större och mindre exakta
Ett finger är 40-50 pixlar brett. En muspekare är 1 pixel. Det betyder att knappar, kryssrutor, alternativknappar och länkar måste vara betydligt större på mobilen för att vara lätta att trycka på. De storlekar som mobilplattformarnas riktlinjer rekommenderar är minst 44x44 pixlar. Är de för små missar användare målet, blir frustrerade och överger formuläret.
Tangentbord tar över
På mobilen glider tangentbordet upp och täcker halva skärmen när användaren trycker på ett formulärfält. Vissa fält visar olika tangentbord: e-postfält visar @-tecknet, nummerfält döljer bokstäver, datumfält öppnar en kalenderväljare. Varje tangentbordstyp ändrar vad användaren ser och hur hen interagerar. Designa för var och en för sig.
Sammanhanget skiftar hela tiden
Datoranvändare sätter sig ned och fyller i ett formulär utan avbrott. Mobilanvändare fyller i formulär på tåg, i butiker och mellan andra appar. De får en avisering, byter app och kommer tillbaka fem minuter senare. Rullningen känns oändlig. Formulärfälten flyter ihop. Varje steg som kräver minne eller byte av sammanhang får människor att ge upp.
En hand styr enheten
De flesta telefonanvändare håller enheten med en hand och navigerar med tummen. Knappar längst ned till höger går att nå. Knappar högst upp i ett högt formulär kräver en andra hand eller ett obekvämt grepp. Etiketter till vänster om fälten är svårare att läsa när du håller tummen i position. Designa för användning med en hand.
Regel 1: Minska antalet fält du frågar efter
Varje fält du frågar efter är ännu ett tryck, ännu ett beslut, ännu en chans för någon att lämna. Formuläret behöver inte allt. Det behöver bara det du faktiskt använder för att följa upp.
Titta på dina verkliga användningsfall. Ett kontaktformulär behöver sällan mellannamn, företagsstorlek eller bransch vid första inskicket. Ett bokningsformulär behöver inte kundens mors flicknamn. En anmälan till nyhetsbrev behöver inte postnumret första dagen. Du kan be om mer information senare, när du redan har byggt förtroende.
En stor resesajt testade den här principen och sparade 12 miljoner dollar per år genom att ta bort valfria fält från sitt bokningsformulär. Användare slutförde fler formulär. Fler konverteringar skedde. Förenklingen lönade sig.
Börja med det absoluta minimum. På mobilen är regeln strängare: om du inte behöver det för att slutföra kärnåtgärden, ta bort det. Testa att ta bort fält ett i taget och se din andel slutförda formulär stiga.
Regel 2: Stapla fälten i en enda kolumn
Layouter med två kolumner på mobilen är ett misstag. De kräver sidledes rullning, skapar förvirrande visuell hierarki och slösar vågrätt utrymme. En kolumn, staplad lodrätt, är snabbast att skumma och fylla i.
Varje fält tar hela bredden. Etiketter sitter ovanför fältet, inte bredvid. Användaren rullar ned, läser etiketten, trycker på fältet, skriver och går vidare till nästa. Flödet är linjärt. Den kognitiva belastningen är låg.
Stå emot frestelsen att lägga för- och efternamn sida vid sida, eller adress och postnummer på samma rad. Lodrät stapling är långsammare på datorn, ja. Men mobilen står för två tredjedelar av din trafik. Optimera för majoriteten.
Regel 3: Gör tryckytorna stora nog att träffa säkert
Knappar måste vara minst 44x44 pixlar. Kryssrutor och alternativknappar måste vara minst 40x40 pixlar. Små knappar tvingar användare att sikta noga eller trycka flera gånger. Frustrationen växer. De lämnar.
Titta på hur du själv använder telefonen under en dag. Lägg märke till hur många tryck som missar. Även vana användare träffar fel. Designa för den missfrekvens som finns inbyggd i mänskliga fingrar.
Avståndet mellan tryckytor spelar också roll. Om en ja-knapp ligger precis bredvid en nej-knapp trycker användare på fel. Lägg till 10-15 pixlar andrum mellan interaktiva element.
Regel 4: Lägg etiketterna ovanför fälten, inte inuti dem
Platshållartext inuti fält försvinner så fort användaren börjar skriva. Hen glömmer vad fältet gällde. Sedan gör hen ett misstag, ser ett fel och vet inte vad som ska rättas.
Etiketter måste sitta utanför och ovanför fältet. Tydliga, synliga, alltid närvarande. När användaren trycker på fältet och tangentbordet visas finns etiketten kvar och påminner om vad hen skriver.
En etikett inuti ett fält är bara en bekvämlighet för designern. Den sparar några pixlar. Den kostar dig konverteringar.
Regel 5: Välj rätt inmatningstyp för mobilens tangentbord
Olika inmatningstyper visar olika tangentbord på mobila enheter. Använd dem för att göra inmatningen snabbare och mer exakt:
E-postadresser
Använd `type="email"` för att visa ett tangentbord med @-tecknet och tangenterna .com/.org synliga. Användare behöver inte leta efter specialtecken. Valideringen sker också automatiskt.
Telefonnummer
Använd `type="tel"` för att visa ett numeriskt tangentbord. Hoppa över den fiffiga formateringen som delar fältet i segment med riktnummer och nummer. Användare har svårt med stela fältindelningar och backar in i fel del. Ett enkelt telefonfält som tar emot siffror och mellanslag är snabbare.
Tal och antal
Använd `type="number"` för att bara visa siffror på tangentbordet. Dölj bokstäverna. Vissa nummerfält behöver decimaler, använd `inputmode="decimal"` för att tillåta dem.
Datum
Använd `type="date"` för att visa en inbyggd datumväljare i stället för att be användare skriva 03/15/2026. Kalenderväljaren är snabbare, ger färre fel och känns hemma på telefonen.
Webbadresser
Använd `type="url"` för att visa ett tangentbord med snedstrecket och .com-tangenten. Användare kan skriva en webbadress utan att leta efter specialtecken.
Varje inmatningstyp talar om för mobilwebbläsaren vilka data du förväntar dig. Webbläsaren anpassar sedan tangentbordet. Du behöver inte förklara formatet. Tangentbordet gör jobbet.
Regel 6: Skriv tydliga felmeddelanden som visas i realtid
När någon fyller i ett formulär på mobilen och trycker på skicka bara för att se "Ogiltig e-postadress" har hen redan glömt vad hen skrev. Hen vet inte vilket fält som orsakade felet. På en liten skärm kan felmeddelandet ligga utanför bild. Hen måste rulla upp igen.
Validera i stället fälten medan användaren fyller i. Så fort hen går till nästa fält kontrollerar du det hen just lämnade. Om det finns ett fel, visa det direkt, strax under det fältet. Hen ser problemet medan sammanhanget fortfarande finns kvar i minnet.
Felmeddelanden måste vara tydliga. FEL: "Ogiltig inmatning." RÄTT: "E-postadressen måste innehålla ett @-tecken." Användaren vet exakt hur det rättas.
Undvik enbart röd färg för att signalera fel. Färgblinda användare missar den. Använd rött plus en ikon eller en textetikett. "Fel: Det här fältet är obligatoriskt."
Regel 7: Optimera knapparna för mobil interaktion
Skickaknappar ska vara stora, tydligt tryckbara och sitta där en tumme naturligt vilar. En knapptext på 16 pixlar i en knapp som är 44 pixlar hög är lätt att trycka på. En text på 14 pixlar i en knapp på 32 pixlar är ett felklick som väntar på att hända.
Knappens bredd ska sträcka sig över det mesta av skärmbredden, inte pressas in i en smal kolumn. Knappar i full bredd på mobilen minskar den kognitiva belastningen av "var klickar jag härnäst".
Undvik sekundära knappar på samma skärm om det inte är absolut nödvändigt. För många knappar skapar beslutsförlamning. En primär åtgärd per skärm är regeln för mobile first.
Regel 8: Använd förloppsindikatorer för formulär i flera steg
Om ditt formulär sträcker sig över flera skärmar, visa ett förloppsfält högst upp. "Steg 1 av 3" talar om för användaren vad hen kan vänta sig. Hen vet att hen inte fyller i ett oändligt formulär. Hen ser mållinjen.
Varje steg ska hantera en logisk bit information. Lägg inte fem olika ämnen i steg ett. Dela upp dem. Låt användare känna framsteg medan de rör sig framåt.
Låt användare gå tillbaka och redigera tidigare steg. De ska inte känna sig inlåsta. Mobilanvändare är lättskrämda. Att erbjuda en nödutgång minskar oron.
Regel 9: Se till att ditt formulär fungerar med mobilens tangentbord och avbrott
Tangentbordet fälls upp och döljer ditt formulär. Användaren rullar för att se nästa fält. Bra. Nu kommer en avisering och tangentbordet försvinner. Formuläret syns men användaren har glömt vad hen fyllde i. Dåligt.
Testa ditt formulär på en riktig telefon med ett riktigt tangentbord. Förstå hur mycket av formuläret som försvinner när tangentbordet visas. Om ett fält är helt dolt går det inte att använda. Gör om layouten så att det aktiva fältet förblir synligt med tangentbordet uppe.
Spara formulärets framsteg medan användaren fyller i varje fält. Om hen byter app eller formuläret av misstag stängs finns uppgifterna kvar. När hen kommer tillbaka är formuläret precis som hen lämnade det. Det tar bort en stor källa till avhopp.
Regel 10: Använd autofyll och förifyllnad för att snabba upp slutförandet
Mobiltelefoner lagrar kontaktuppgifter, e-postadresser, namn och betalningsuppgifter. När ditt formulär använder standardnamn på fält och HTML-attribut kan webbläsaren fylla i dem automatiskt. Ett telefonfält med `autocomplete="tel"` visar sparade telefonnummer som förslag.
Att förifylla fält med uppgifter du redan känner till är ännu kraftfullare. Om någon loggar in och påbörjar ett formulär är e-postadressen redan ifylld. Adressen är redan ifylld. Hen skriver bara det som är nytt. Andelen slutförda formulär hoppar upp när användare slipper skriva in uppgifter som du redan har.
Autofyll och förifyllnad är inte fusk. De respekterar användarens tid. De minskar skrivandet. De minskar felen. De ökar andelen som slutför.
Regel 11: Testa på riktiga telefoner med riktiga användare
Webbläsare på datorn har enhetsemulering. Den simulerar en telefonskärm. Den är användbar för snabba kontroller. Men den simulerar inte den verkliga mobilupplevelsen. Tangentbordet fungerar inte på samma sätt. Rullningen känns inte likadan. Tryckytorna kräver inte din riktiga tumme.
Testa ditt formulär på riktiga telefoner. Be en kollega fylla i det. Titta på var hen tvekar. Titta på var hen gör misstag. Titta på var hen ger upp. Den verkliga datan säger dig mer än någon checklista.
Vanliga misstag i mobilformulär är svåra att upptäcka utan testning. En knapp som ser stor ut i en emulator på datorn kan vara för liten på en riktig telefon i starkt solljus. Etiketter som verkar tydliga i en skiss kan vara svåra att läsa i den vinkel som en telefon hålls. Bara riktig testning avslöjar de här problemen.
Så hjälper WEMASY till med formulärdesign för mobilen
WEMASY:s formulärbyggare har mobile first som standard. Formulär staplas automatiskt i en enda kolumn på mobilen. Tryckytorna har rätt storlek. Etiketter förblir synliga medan användare fyller i fält. Mobilens tangentbord är optimerat för varje inmatningstyp.
Inbyggd formulärvalidering sker i realtid, inte efter inskick. Förloppsindikatorer visas i formulär med flera steg. Formulärsvar sparas automatiskt så att användare aldrig förlorar sina framsteg. Statistiken visar vilka fält som orsakar flest avhopp så att du kan optimera de största friktionspunkterna.
Se vad som ingår i varje WEMASY-plan och hur formulärbyggaren passar ditt arbetssätt.