Je test je formulier op je computer en het ziet er perfect uit. Volledige breedte, twee kolommen, ruim opgezet. Dan verstuur je een test op mobiel en weet je meteen dat er iets mis is. De velden zijn piepklein. Het toetsenbord bedekt de helft van het formulier. Je tikt op het verkeerde veld. Het geheel voelt kapot.
De helft van je bezoekers zit op mobiel. Is je formulier niet responsive, dan mis je de helft van je inzendingen. In dit artikel lees je hoe je formulieren ontwerpt die werken op telefoons, tablets en computers.
Mobiele formulieren zijn anders dan formulieren op de computer
Mobiele gebruikers vullen formulieren anders in dan gebruikers op een computer. Op een computer heb je ruimte. Je kunt opmaak met meerdere kolommen gebruiken. Je kunt labels naast velden zetten. Op mobiel telt elke pixel.
Mobiele toetsenborden zijn enorm. Als het toetsenbord opent, bedekt het de helft van het scherm. Je formulier scrolt. De gebruiker raakt de weg kwijt. Een knop die net nog zichtbaar was, zit nu achter het toetsenbord.
Aanraakvlakken moeten groter zijn. Een klikbaar gebied van 14 bij 14 pixels werkt prima met een muis. Een vinger heeft minstens 48 bij 48 pixels nodig, anders mist de gebruiker het.
Mobiele gebruikers zitten vaak op een wisselende verbinding. Elke extra formulierlading of afbeelding kost tijd. Snelheid telt zwaarder dan op een computer.
De opmaak met één kolom
Het veiligste responsive formulier heeft één kolom. Eén veld per rij, op elk schermformaat.
Opmaak met één kolom is eenvoudig, werkt op alle schermen, zorgt voor een consistente ervaring en is heel voorspelbaar. Het belangrijkste nadeel is dat formulieren op een computer langer lijken, zodat je meer moet scrollen.
De meeste formulieren moeten uit één kolom bestaan. Heeft je formulier vijf velden, dan is één kolom op een computer eigenlijk korter dan twee kolommen. De gebruiker scrolt minder en ziet meer context.
Voor een opmaak met één kolom gebruik je input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Daarmee staat alles onder elkaar op elk breekpunt.
Twee kolommen op de computer, één kolom op mobiel
Wil je op grote schermen de horizontale ruimte benutten, gebruik dan een raster met .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } en een mediaquery @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Op een computer geeft dat twee kolommen en op mobiel staat alles onder elkaar in één kolom, zodat de opmaak eenvoudig en responsive blijft.
Groepeer alleen velden die echt bij elkaar horen. Een veld "Voornaam" naast een veld "Achternaam" is logisch. Een veld "Straat en huisnummer" naast een veld "Land" niet.
Aanraakvlakken en vingervriendelijk ontwerp
Het minimale aanraakvlak op mobiel is 44 bij 44 pixels (volgens Apple) of 48 bij 48 pixels (Android). Ga uit van minstens 44.
De afmeting van aanraakvlakken geldt voor invoervelden, die hoog genoeg moeten zijn om makkelijk op te tikken (40 tot 50 pixels is goed), voor selectievakjes en keuzerondjes, die standaard 13 bij 13 pixels zijn en met CSS of JavaScript moeten worden vergroot tot minstens 44 bij 44, voor knoppen, die minstens 44 bij 44 pixels moeten zijn met extra padding, en voor labels, die ook 44 bij 44 pixels moeten zijn als ze via het attribuut for klikbaar zijn. Soms vormen label en invoerveld samen het volledige aanraakvlak.
Om invoervelden groter en makkelijker aan te tikken te maken gebruik je input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. De padding maakt het veld hoger en verbetert het aantikken.
Omgaan met het toetsenbord
Op mobiel bedekt het toetsenbord van de browser de onderste helft van het scherm. Staat je formulier onderaan de pagina, dan verdwijnt de verzendknop. De gebruiker moet dan omlaag scrollen of het toetsenbord sluiten om de knop te zien.
Zet je formulier bovenaan de pagina. Of zet de verzendknop zowel boven als onder het formulier. Verberg belangrijke knoppen niet onder het toetsenbord.
Ook het type toetsenbord is belangrijk. Gebruik voor een e-mailveld <input type="email"> om een e-mailtoetsenbord met een @-toets te tonen. Gebruik voor een telefoonveld <input type="tel"> om een numeriek toetsenbord te tonen. Gebruik voor numerieke invoer <input type="number"> om een cijfertoetsenbord te tonen. Met het juiste invoertype kiest de browser het toetsenbord automatisch.
Als de gebruiker op een invoerveld tikt, scrolt de browser dat veld in beeld. Dat is goed. Het veld is zichtbaar als ze moeten typen. Maar soms scrolt het voorbij andere context. Test je formulier op een echte telefoon om het gedrag te zien.
Positie van labels op mobiel
Op een computer kunnen labels boven, naast of in velden staan. Op mobiel is boven bijna altijd het best.
Een label boven het veld is duidelijk. De gebruiker ziet eerst het label, dan het invoerveld. Op een smal scherm verspilt een label naast het invoerveld horizontale ruimte. Een plaatshoudertekst in het veld verdwijnt zodra je begint te typen.
Beste werkwijze: zet labels boven velden. Altijd.
<label for="email">Email</label>
<input type="email" id="email">
Ruimte en padding
Responsive formulieren hebben op mobiel meer ruimte nodig, niet minder. Je eerste ingeving is alles samen te persen om op het scherm te passen. Doe dat niet.
Gebruik royale padding en marges: minstens 1rem (16 pixels) tussen velden, minstens 0,75rem (12 pixels) aan alle kanten als padding van invoervelden en minstens 1rem (16 pixels) aan alle kanten als padding van knoppen. Royale ruimte maakt formulieren makkelijker te gebruiken, voorkomt verkeerde tikken en verbetert de leesbaarheid. Op mobiel is ademruimte waardevoller dan schermruimte.
Tekstgrootte op mobiel
Gebruik minstens 16 pixels voor invoervelden. Kleinere tekst dwingt gebruikers om in te zoomen of te turen. 16 pixels is de standaard en het werkt.
Labels mogen kleiner zijn, rond de 14 pixels. Maar invoervelden moeten minstens 16 pixels zijn.
Sommige browsers zoomen automatisch in als je op een invoerveld tikt dat kleiner is dan 16 pixels. Het formulier springt en zoomt dan onverwacht. Gebruik input { font-size: 16px; } om dat te voorkomen.
Veelgemaakte fouten bij responsive formulieren
Op alle schermformaten twee kolommen gebruiken
Formulieren worden op mobiel samengeperst. Velden zijn piepklein. Labels staan onhandig onder elkaar. Zet de kolommen op kleinere breekpunten altijd onder elkaar in één kolom.
Aanraakvlakken te klein maken
Selectievakjes, keuzerondjes en knoppen moeten minstens 44 bij 44 pixels zijn. Test op een echte telefoon. Moet je je concentreren om erop te tikken, dan is het te klein.
Plaatshoudertekst als enige label gebruiken
Zodra de gebruiker begint te typen, verdwijnt de plaatshoudertekst. Ze vergeten waar het veld voor is. Gebruik altijd een echt label-element. Houd de plaatshoudertekst als je wilt, maar vertrouw er nooit alleen op.
Het formulier onderaan een lange pagina zetten
De gebruiker scrolt omlaag naar een contactformulier, tikt op het e-mailveld en het mobiele toetsenbord bedekt het formulier. Ze zien niet wat ze typen en kunnen de verzendknop niet bereiken. Zet formulieren bovenaan of zorg dat ze met toetsenbord in beeld op het scherm passen.
Niet testen op echte mobiele apparaten
Je browser op de computer heeft een mobiele weergave. Die is handig voor een snelle controle. Maar ze laat niet zien hoe je formulier echt werkt op een telefoon. Test op echte apparaten. Leen een telefoon als je er geen hebt.
Technieken voor responsive formulieren
CSS Grid voor flexibele opmaak
Gebruik .form-group { display: grid; gap: 0.5rem; } en .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. De waarden auto-fit en minmax maken een opmaak die meebeweegt met de beschikbare ruimte: velden staan onder elkaar bij smalle breedtes en naast elkaar bij brede.
Flexbox voor knoppen
Gebruik .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } en .form-actions button { flex: 1; min-width: 150px; }. Knoppen staan op een computer naast elkaar, lopen op mobiel door naar meerdere rijen en elke knop groeit mee om de beschikbare ruimte te vullen.
Mediaqueries voor specifieke breekpunten
Gebruik @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } om op schermen kleiner dan 480 pixels een opmaak met één kolom af te dwingen.
Hoe WEMASY-formulieren zich aanpassen aan alle schermformaten
De formulierenbouwer van WEMASY maakt automatisch responsive formulieren. Bouw op de computer, en mobiel is al geregeld. Formulieren staan op telefoons onder elkaar in één kolom. Aanraakvlakken hebben de juiste maat voor mobiel. Labels en velden hebben de juiste ruimte. Geen extra werk nodig.
Bekijk hoe responsive formulieren werken in jouw WEMASY-abonnement.