# Formulieren die mensen invullen: 6 ontwerpregels voor minder afhakers

## Waarom formulieren zo veel mensen wegjagen

Baymard Institute heeft vastgesteld dat gemiddeld 68,8% van de bezoekers een online formulier of checkout verlaat zonder het af te ronden. Dat is geen niche-probleem voor grote webshops - het raakt elk contactformulier, elke offerteaanvraag en elk inschrijfscherm op elke MKB-site.

De oorzaak is zelden dat bezoekers niet willen. Ze willen wel - maar ze haken af op onnodige vragen, verwarrende opmaak, foutmeldingen die niets uitleggen en formulieren die op mobiel totaal niet werken. Zes ontwerpregels die dit direct verbeteren.

## Regel 1: Vraag alleen wat je echt nodig hebt

Tel de velden in je formulier. Elk extra veld verhoogt de drempel voor de bezoeker, en die drempel groeit exponentieel naarmate er meer vragen bijkomen. Bezoekers zien zes verplichte velden en denken: dit duurt te lang.

De oplossing is brutaal simpel: verwijder elk veld dat je niet actief gebruikt in je opvolging. Vraag je echt naar het bedrijfsnaam in je contactformulier? Gebruik je het telefoonnummer als je ook een e-mailadres hebt? Vraag je naar de website van de potentiele klant terwijl je die ook gewoon kunt googelen?

Praktische indeling per formuliertype:

- Contactformulier: naam, e-mail, bericht. Dat is het.
- Offerteaanvraag: naam, e-mail, telefoonnummer, omschrijving project.
- Nieuwsbrief: alleen e-mail, of e-mail plus voornaam voor personalisatie.

Meer velden leveren per inzending meer informatie op, maar ook minder inzendingen totaal. De afweging is altijd dezelfde: hoeveel data wil je per inzending versus hoeveel inzendingen wil je totaal?

## Regel 2: Een kolom werkt beter dan twee

Twee-koloms formulieren zien er compact en professioneel uit - maar ze zijn moeilijker te gebruiken. Bezoekers scannen een pagina van links naar rechts en van boven naar beneden. Zodra je twee kolommen naast elkaar plaatst, dwing je ze om die scanvolgorde te doorbreken en steeds opnieuw te beslissen waar ze verdergaan.

Nielsen Norman Group heeft dit uitgebreid onderzocht: single-column formulieren worden consistent sneller ingevuld dan meerkolomsversies, zelfs als het totale aantal velden gelijk is.

Twee kolommen werken alleen als de velden functioneel bij elkaar horen: voornaam naast achternaam, of huisnummer naast toevoeging. Dat zijn combinaties die de bezoeker ook mentaal als een blok ervaart. Alles anders hoort in een enkele kolom.

## Regel 3: Labels boven het veld, niet erin

Placeholder-tekst in een invoerveld als label is populair omdat het ruimte bespaart. Het is ook een van de meest gemaakte fouten in formulierontwerp.

Het probleem: zodra iemand begint te typen, verdwijnt de placeholder. Is het veld voor "E-mailadres" of "Zakelijk e-mailadres"? Ze weten het niet meer. Op mobiel, waar autocomplete ook nog eens springt, raken bezoekers volledig het overzicht kwijt over wat ze waar hebben ingevuld.

De regel is eenvoudig: labels staan altijd zichtbaar boven het invoerveld, in leesbare tekst. Ze verdwijnen nooit en hebben altijd voldoende contrast met de achtergrond. Bij een optioneel veld zeg je dat expliciet achter het label: "Telefoonnummer (optioneel)".

Er bestaat ook het floating label patroon, waarbij het label van binnen naar boven het veld verplaatst zodra je begint te typen. Dat werkt technisch prima maar is kwetsbaar op oudere mobiele browsers en vergt precisie in de implementatie. Bij twijfel: gewoon het label vaste boven het veld.

## Regel 4: Foutmeldingen die helpen in plaats van frustreren

"Dit veld is verplicht." "Ongeldige invoer." "Fout."

Dit zijn de meest voorkomende foutmeldingen op formulieren, en ze doen niets nuttigs. De bezoeker weet dat er een fout is - maar niet wat er fout is of hoe hij het oplost.

Goede foutmeldingen zijn specifiek en oplossingsgericht:

- Niet "Ongeldig e-mailadres" - wel "Voer een geldig e-mailadres in, zoals naam@bedrijf.nl"
- Niet "Verplicht veld" - wel "Vul je naam in zodat we je gericht kunnen helpen"
- Niet "Fout bij verzenden" - wel "Er is een technisch probleem. Probeer het opnieuw of mail ons op contact@bedrijf.nl"

Toon foutmeldingen direct onder het betrokken veld, in een duidelijk afwijkende kleur. Gebruik naast kleur ook een icoontje - kleurblinde bezoekers missen alleen-rood signalen. En valideer bij voorkeur inline, per veld, zodra iemand weitergaat, in plaats van pas na het verzenden van het hele formulier.

## Regel 5: Mobiel is een ander gesprek

Meer dan de helft van het webverkeer in Nederland komt via mobiel. Op een telefoon is elk formulier een uitdagend object: het scherm is klein, het toetsenbord neemt de helft in, en autocomplete werkt soms meer in de weg dan het helpt.

Vier aanpassingen die je moet doorvoeren:

Gebruik het juiste toetsenbordtype. Voor telefoonnummers gebruik je `inputmode="tel"`, voor e-mails `type="email"`, voor getallen `inputmode="numeric"`. Zo opent de telefoon direct het juiste toetsenbord en hoeft de bezoeker niet zelf te schakelen.

Vergroot de aanraakgebieden. Een invoerveld van 32px hoog is op desktop prima, maar op mobiel te klein om precies aan te tikken. Gebruik minimaal 48px hoogte per veld, en laat voldoende ruimte tussen de velden.

Test met autocomplete. Velden als naam, adres en e-mail worden door telefoons herkend voor autocomplete. Gebruik de juiste attributen (`autocomplete="name"`, `autocomplete="email"`, `autocomplete="tel"`) zodat de bezoeker met twee tikken klaar is in plaats van alles uit te typen.

Zet de verzendknop nooit te dicht op het laatste veld. Op een virtueel toetsenbord is het lastig te zien hoe ver je al bent. Een ruime marge tussen het laatste invoerveld en de knop voorkomt dat iemand per ongeluk verzendt terwijl hij nog aan het invullen is.

Bij Web Design by Kick testen we elk formulier handmatig op minimaal twee schermformaten voordat een site live gaat, omdat de meeste formulierfouten pas op mobiel zichtbaar worden.

## Regel 6: Bevestig dat het is gelukt

Een bezoeker vult je formulier in en klikt op verzenden. Wat ziet hij dan?

Als het antwoord "niets" is, of als de pagina zichzelf ververst zonder duidelijk signaal, heb je een probleem. Bezoekers weten dan niet of hun bericht is aangekomen. Ze sturen het opnieuw, of ze denken dat het mislukt is en bellen gefrusteerd op.

Een goede bevestiging heeft twee lagen:

Visuele bevestiging op de pagina. Een duidelijke succesboodschap die verschijnt na het verzenden: "Bedankt, je bericht is ontvangen. We nemen binnen twee werkdagen contact op." Geen pagina-redirect naar een lege bedankt-pagina die uit de index valt, maar een zichtbare boodschap op dezelfde plek.

Automatische bevestigingsmail. Stuur de inzender een kopie van zijn bericht en een korte bevestiging van ontvangst. Dit schept verwachting over wanneer hij iets hoort, wekt vertrouwen en geeft hem bewijs dat de verzending gelukt is.

Zowel de pagina-bevestiging als de mail zijn kleine technische ingrepen met grote invloed op hoe professioneel je overkomt bij een eerste contact.

## Conclusie

Formulieren zijn een van de weinige plekken op je website waar de bezoeker actief iets doet. Met zes aanpassingen verlaag je de drempel aanzienlijk: minder velden, een kolom, vaste labels, duidelijke foutmeldingen, een mobielvriendelijke opmaak en een bevestiging die het gevoel geeft dat de actie raak was. Elke stap is klein, maar samen bepalen ze of een lead binnenkomt of afhaakt.

---

## Bronnen

- [Baymard Institute - Cart Abandonment Rate Statistics](https://baymard.com/lists/cart-abandonment-rate)
- [Nielsen Norman Group - Website Form Design](https://www.nngroup.com/articles/web-form-design/)
- [web.dev - Payment and address form best practices](https://web.dev/articles/payment-and-address-form-best-practices)
- [MDN Web Docs - The HTML autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
- [Google Material Design - Text fields](https://m3.material.io/components/text-fields/guidelines)

---

Bron: https://webdesign.bykick.nl/blog/formulieren-die-mensen-invullen-6-ontwerpregels