Du tester din formular på computeren, og den ser perfekt ud. Fuld bredde, to kolonner, masser af plads. Så sender du en test på mobilen og kan med det samme se, at noget er galt. Felterne er bittesmå. Tastaturet dækker halvdelen af formularen. Du rammer det forkerte felt. Hele oplevelsen føles ødelagt.
Halvdelen af dine besøgende sidder på mobilen. Er din formular ikke responsiv, mister du halvdelen af dine indsendelser. Her gennemgår vi, hvordan du laver formularer, der virker på telefoner, tablets og computere.
Formularer på mobil er anderledes end på computer
Mobilbrugere udfylder formularer på en anden måde end folk på computer. På computeren har du plads. Du kan bruge layouts med flere kolonner. Du kan sætte labels ved siden af felterne. På mobilen tæller hver pixel.
Mobiltastaturer er enorme. Når tastaturet åbner, dækker det halvdelen af skærmen. Formularen ruller. Brugeren mister overblikket. En knap, der før kunne ses, er nu skjult bag tastaturet.
Trykfladerne skal være større. Et område på 14 gange 14 pixel er fint med en mus. En finger har brug for mindst 48 gange 48 pixel, ellers rammer brugeren ved siden af.
Mobilbrugere sidder ofte på ustabile netværk. Hver ekstra formular eller hvert ekstra billede, der skal indlæses, tager tid. Hastighed betyder mere end på computer.
Formular med én kolonne
Den sikreste responsive formular har én kolonne. Ét felt pr. række, uanset skærmstørrelse.
Layouts med én kolonne er enkle, virker på alle skærme, giver en ensartet oplevelse og er meget forudsigelige. Den største ulempe er, at formularer ser længere ud på computer og kræver mere rulning.
De fleste formularer bør have én kolonne. Har din formular fem felter, er én kolonne faktisk kortere end to kolonner på computer. Brugeren ruller mindre og ser mere sammenhæng.
For at lave et layout med én kolonne bruger du input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Det stabler alt lodret ved alle brudpunkter.
To kolonner på computer, én kolonne på mobil
Vil du bruge pladsen på store skærme, bruger du et gitter med .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } og en media query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. På computer giver det to kolonner, og på mobil bliver det til én, så layoutet forbliver enkelt og responsivt.
Sæt kun felter sammen, som virkelig hører sammen. "Fornavn" og "Efternavn" ved siden af hinanden giver mening. "Adresse" og "Land" ved siden af hinanden gør ikke.
Trykflader og design til fingre
Den mindste trykflade på mobil er 44 gange 44 pixel (ifølge Apple) eller 48 gange 48 pixel (Android). Sigt mindst efter 44.
Størrelsen på trykflader gælder inputfelter, som skal være høje nok til at ramme nemt (40 til 50 pixel er godt), afkrydsningsfelter og valgknapper, som som standard er 13 gange 13 pixel og bør forstørres til mindst 44 gange 44 med CSS eller JavaScript, knapper, som bør være mindst 44 gange 44 pixel med ekstra padding, og labels, som også skal være 44 gange 44 pixel, hvis de kan klikkes via attributten for. Nogle gange udgør label og felt sammen den fulde trykflade.
For at gøre inputfelter større og lettere at ramme bruger du input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Paddingen gør feltet højere og gør det lettere at trykke.
Tastaturet
På mobil dækker browserens tastatur den nederste halvdel af skærmen. Ligger din formular nederst på siden, bliver indsend-knappen skjult. Brugeren må rulle ned eller lukke tastaturet for at se knappen.
Hold formularen tæt på toppen af siden. Eller sæt indsend-knappen både øverst og nederst. Skjul ikke vigtige knapper under tastaturet.
Tastaturets type betyder også noget. Til et e-mailfelt bruger du <input type="email">, så der vises et e-mailtastatur med en @-tast. Til et telefonfelt bruger du <input type="tel">, så der vises et taltastatur. Til tal bruger du <input type="number">, som viser et taltastatur. Når du bruger den rigtige type, vælger browseren selv det rigtige tastatur.
Når brugeren trykker på et inputfelt, ruller browseren feltet ind i billedet. Det er godt. Feltet kan ses, når de skal skrive. Men nogle gange ruller det forbi andet indhold. Test formularen på en rigtig telefon for at se, hvordan det opfører sig.
Placering af labels på mobil
På computer kan labels stå over, ved siden af eller inde i felterne. På mobil er over næsten altid bedst.
En label over feltet er tydelig. Brugeren ser labelen og så feltet. På en smal skærm spilder en label ved siden af feltet bredde. En pladsholdertekst inde i feltet forsvinder, når man begynder at skrive.
God praksis: Sæt labels over felterne. Altid.
<label for="email">E-mail</label>
<input type="email" id="email">
Afstand og padding
Responsive formularer har brug for mere afstand på mobil, ikke mindre. Din første indskydelse er at presse alt sammen, så det kan være på skærmen. Lad være.
Brug rigelig padding og afstand: mindst 1rem (16 pixel) mellem felter, mindst 0,75rem (12 pixel) på alle sider som padding i felter og mindst 1rem (16 pixel) på alle sider som padding i knapper. Rigelig afstand gør formularer lettere at bruge, giver færre fejltryk og bedre læsbarhed. På mobil er luft mere værd end skærmplads.
Tekststørrelse på mobil
Brug mindst 16 pixel i inputfelter. Mindre tekst får brugerne til at zoome eller knibe øjnene sammen. 16 pixel er standard, og det virker.
Labels kan være mindre, omkring 14 pixel. Men inputfelter bør være mindst 16 pixel.
Nogle browsere zoomer automatisk ind, når du trykker på et felt med tekst under 16 pixel, så formularen hopper og zoomer uventet. Brug input { font-size: 16px; } for at undgå det.
Almindelige fejl i responsive formularer
To kolonner på alle skærmstørrelser
Formularerne bliver trykket sammen på mobil. Felterne er bittesmå. Labels ligger akavet oven på hinanden. Stabl altid til én kolonne ved mindre brudpunkter.
For små trykflader
Afkrydsningsfelter, valgknapper og knapper skal være mindst 44 gange 44 pixel. Test på en rigtig telefon. Skal du koncentrere dig for at ramme den, er den for lille.
Pladsholdertekst som eneste label
Når brugeren begynder at skrive, forsvinder pladsholderen. De glemmer, hvad feltet er til. Brug altid et rigtigt label-element. Behold pladsholderen, hvis du vil, men stol aldrig kun på den.
Formularen nederst på en lang side
Brugeren ruller ned til en kontaktformular, trykker på e-mailfeltet, og mobiltastaturet dækker formularen. De kan ikke se, hvad de skriver, og kan ikke nå indsend-knappen. Sæt formularer tæt på toppen, eller sørg for, at de er der plads til på skærmen sammen med tastaturet.
Ikke at teste på rigtige mobiler
Din browser på computeren har en mobilvisning. Den er nyttig til et hurtigt tjek. Men den viser ikke, hvordan din formular virkelig fungerer på en telefon. Test på rigtige enheder. Lån en telefon, hvis du ikke har en.
Teknikker til responsive formularer
CSS Grid til fleksible layouts
Brug .form-group { display: grid; gap: 0.5rem; } og .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Værdierne auto-fit og minmax laver et layout, der flyder efter den plads, der er, så felterne stabler sig ved smal bredde og står side om side ved stor bredde.
Flexbox til knapper
Brug .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } og .form-actions button { flex: 1; min-width: 150px; }. Knapperne står ved siden af hinanden på computer, ombrydes til flere rækker på mobil, og hver knap fylder den plads, der er.
Media queries til bestemte brudpunkter
Brug @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } for at tvinge ét-kolonne-layout på skærme under 480 pixel.
Sådan tilpasser WEMASY-formularer sig alle skærmstørrelser
WEMASYs formularbygger laver automatisk responsive formularer. Byg på computer, så er mobilen allerede klaret. Formularer stabler sig til én kolonne på telefoner. Trykfladerne har en størrelse, der passer til mobil. Labels og felter har den rette afstand. Du skal ikke gøre mere.
Se, hvordan responsive formularer fungerer i din WEMASY-plan.