Formulierontwerp: beste werkwijzen voor conversie

Bijgewerkt op 19 oktober 2026

Je formulier is kort. De vragen zijn relevant. Er komen veel bezoekers binnen. En toch stopt een aanzienlijk deel van de bezoekers op mobiele apparaten bij het tweede veld. Het probleem zit hem vaak niet in het aanbod of het aantal vragen: het zit hem in het ontwerp van het formulier. Een alfabetisch toetsenbord dat opent naar een postcodeveld, een label dat verdwijnt zodra je typt, een lichtgrijze knop die nauwelijks zichtbaar is. Deze handleiding bundelt best practices voor formulierontwerp die een meetbare impact hebben op de conversie, samen met de precieze code of instellingen die je moet toepassen.

Kortom: een formulierontwerp dat conversies genereert, volgt vijf best practices: een enkele kolom met zichtbare labels boven de velden, een mobiel toetsenbord aangepast aan elk gegevenstype, korte stappen met zichtbare voortgang, voldoende contrast (4,5:1 voor tekst, 3:1 voor veldranden) en een knop die duidelijk het resultaat voor de gebruiker aangeeft. Deze instellingen zijn goedkoop te implementeren en elimineren de frictie die leidt tot het afbreken van het formulier op mobiele apparaten.

Voordat we de details bespreken, eerst even een kleine verduidelijking: dit artikel gaat niet over de lengte van uw formulieren, maar over de opmaak ervan. Aan het einde vindt u een checklist met 12 punten waarmee u uw eigen formulier in slechts tien minuten kunt controleren.

Indeling: één kolom, labels boven de velden

De meest effectieve lay-out voor een leadgeneratieformulier is een enkele kolom, waarbij elk label boven het bijbehorende veld is geplaatst. Het oog volgt zo een rechte lijn, zonder te hoeven zigzaggen tussen kolommen of te zoeken welk label bij welk veld hoort.

De cijfers ondersteunen dit. In een gecontroleerde studie uitgevoerd door het CXL Institute (nu Speero) met 702 deelnemers, de versie met één kolom werd gemiddeld in 102,3 seconden voltooid, vergeleken met 117,8 seconden voor de versie met meerdere kolommen. Dit betekent een tijdsbesparing van ongeveer 13%, terwijl de vragen exact hetzelfde zijn.

Een belangrijk onderscheid: deze studie mat alleen de tijd die nodig was voor degenen die het formulier invulden. Het zegt niets over degenen die afhaakten. Maar een formulier dat sneller te lezen is, zal mensen zelden ontmoedigen.

Plaatsaanduiding, zwevend label of vast label?

Een vast label, dat altijd boven het veld zichtbaar is, blijft de veiligste keuze. De voorbeeldtekst in het veld (de placeholder) verdwijnt zodra de eerste toetsaanslag wordt gegeven: de gebruiker die zijn invoer controleert, weet dan niet meer wat er gevraagd werd.

Zwevende labels, populair geworden door Material Design, lossen slechts een deel van het probleem op. Het label krimpt om in het veld te passen, een lange koptekst wordt afgekapt en het contrast van de verkorte tekst is vaak te laag. Gebruik de placeholder alleen als opmaakvoorbeeld ("06 12 34 56 78"), nooit als enig label.

Twee uitzonderingen worden getolereerd

De regel van één kolom staat uitzonderingen toe wanneer twee velden één concept vertegenwoordigen: postcode en plaats, of vervaldatum en beveiligingscode. Wanneer ze naast elkaar op een computer worden weergegeven, blijven ze leesbaar, mits ze op een mobiel apparaat onder elkaar worden weergegeven.

Mobiel: Toon het juiste toetsenbord voor elk veld

Elk veld moet het toetsenbord activeren dat overeenkomt met de verwachte gegevens: een numeriek toetsenbord voor een postcode, een telefoontoetsenbord voor een telefoonnummer en een toetsenbord met het "@"-symbool voor een e-mailadres. Deze HTML-code voorkomt dat de gebruiker handmatig tussen toetsenborden moet wisselen voor elk veld.

Dit detail wordt vaak slecht geïmplementeerd, zelfs op grote locaties. Uit een onderzoek van het Baymard Institute naar virtuele toetsenborden bleek dat 54% van de grote Amerikaanse e-commercewebsites toonde het geoptimaliseerde toetsenbord niet bij de velden voor telefoonnummer, postcode of creditcardgegevens heeft 79% de autocorrectie ingeschakeld gelaten, wat de invoer verstoort. Een e-mailadres dat "gecorrigeerd" wordt door het telefoonnummer betekent een verloren potentiële klant.

Hieronder vindt u de instellingen voor de meest gebruikte velden in een Frans leadformulier:

Voorkomen type='number' voor een postcode of een SIRET-nummer: het voegt onnodige oplopende pijlen toe op een computer en kan de eerste nul uit een postcode zoals 01000 verwijderen.

De zoomvalkuil van de iPhone

Op iOS zoomt Safari automatisch in op velden met tekst kleiner dan 16 pixels. De pagina verschuift, de knop verdwijnt van het scherm en de gebruiker moet handmatig uitzoomen. Stel de lettergrootte voor velden in op minimaal 16 pixels: het probleem is opgelost.

Houd ook rekening met de aanraakgevoelige gebieden. Een keuzeknop van 16px is moeilijk met de duim aan te raken; streef naar klikbare gebieden van minstens 44 × 44px, zodat de hele regel van de optie aanklikbaar is, niet alleen het puntje.

Autofocus en automatisch aanvullen: helpen zonder iets op te dringen

De automatische aanvulling van de browser bespaart kostbare seconden; de autofocus daarentegen is vaker een belemmering dan een hulp. Het zijn twee vergelijkbare instellingen met tegengestelde effecten.

Het attribuut autocomplete laat de browser naam, e-mail, telefoon en adres in één tik invullen. Bij een offerteformulier met zes velden kan dat het typen terugbrengen tot twee of drie tikken. Omgekeerd straft het uitschakelen van automatisch aanvullen “voor de veiligheid” op een contactformulier de gebruiker zonder iets te beschermen.

Autofocus, dat de cursor automatisch in het eerste veld plaatst bij het laden van een pagina, brengt verschillende problemen met zich mee. De Britse ontwerper Adam Silver noemt er vijf: onverwachte pagina-einden, geblokkeerd scrollen via het toetsenbord, ontoegankelijke browsersneltoetsen, een schermlezer die het veldlabel aankondigt in plaats van de paginatitel, en op Android een veld dat wordt geactiveerd zonder dat het toetsenbord opent.

Ons advies is simpel. Stel de focus niet automatisch in op een pagina die iets anders bevat dan het formulier (inleidende tekst, argumenten, klantrecensies). Bij een formulier met meerdere stappen is het echter wel handig om de focus naar de titel van de volgende stap te verplaatsen: de gebruiker die met het toetsenbord navigeert of een schermlezer gebruikt, weet dan meteen waar hij of zij zich bevindt.

Deel het op in stappen zonder de lezer kwijt te raken

Een formulier met meerdere stappen converteert beter wanneer elk scherm slechts één of twee vragen stelt, de voortgang zichtbaar is en de eerste vraag minimale inspanning vereist. Het opsplitsen van het formulier is geen wondermiddel: bij een slecht ontwerp leidt het tot extra klikken zonder de werkdruk te verlagen.

Drie ontwerpregels maken het verschil:

• Begin met een eenvoudige en boeiende vraag : het type project of behoefte wordt weergegeven als grote, aanklikbare kaarten. Contactgegevens worden pas als laatste toegevoegd, nadat de gebruiker al enige tijd heeft besteed.
• Laat eerlijke vooruitgang zien Stap 2 van 4 is beter dan een balk die in het begin snel beweegt en daarna stagneert.
• Ga automatisch door naar het volgende scherm na een enkele keuze (radioknop), maar nooit na tekstinvoer, waarbij de gebruiker de controle moet behouden.

Om dieper in te gaan op dit formaat, onze geannoteerde voorbeelden van offerteformulieren met meerdere stappen toon de volgorde van de vragen die werkt op basis van de sectoren. En om alleen de vragen weer te geven die relevant zijn voor elk profiel, voorwaardelijke logica voorkomt dat het veld "Aantal medewerkers" aan een individuele gebruiker wordt getoond.

Deze opdeling kan worden uitgevoerd zonder tussenkomst van een ontwikkelaar met functies van Blastform : stappen, visuele kaarten, voortgangsbalk en weergavevoorwaarden worden geconfigureerd vanuit de editor.

Kleuren, contrast en toegankelijkheid

Een toegankelijke vorm is ook een vorm die beter converteert: de tekst moet een contrastverhouding van minstens 4,5:1 met de achtergrond hebben, en de kaders van de tekst moeten minstens 3:1 zijn, volgens de WCAG-criteria 1.4.3 en 1.4.11. Dit tweede criterium wordt het vaakst over het hoofd gezien.

Recente trends in grafisch ontwerp geven de voorkeur aan zeer lichtgrijze vlakken op een witte achtergrond, zonder zichtbare rand. Het gevolg hiervan is dat de gebruiker op een telefoonscherm in fel zonlicht niet meer kan zien waar hij moet klikken. Een grijze rand zoals #767676 op een witte achtergrond voldoet wel aan de eisen; de veelvoorkomende #E0E0E0 schiet hierin ernstig tekort.

Drie andere reflexen om aan te leren:

• Geef een fout nooit alleen met kleur aan. Een rode rand is niet voldoende voor de ongeveer 8% van de mannen die last hebben van kleurenblindheid: voeg een pictogram en een tekstbericht toe.
• Koppel elk label aan het bijbehorende veld (tag label met het attribuut forDoor op het label te klikken, wordt het veld geactiveerd en leest de schermlezer de juiste vraag voor.
• Zorg ervoor dat de scherpstelindicator zichtbaar blijft. Als je de standaard blauwe omlijning verwijdert zonder deze te vervangen, wordt het formulier onbruikbaar met een toetsenbord.

Het gaat niet langer alleen om gemak. Sinds 28 juni 2025 legt de Europese Toegankelijkheidsverordening toegankelijkheidseisen op aan veel openbare online diensten in de Europese Unie, waaronder e-commerce en bankdiensten. Een conform formulier voorkomt dat u het later opnieuw moet invullen.

Vanuit het oogpunt van visuele identiteit schept het afstemmen van de kleuren en typografie van het formulier op die van uw website vertrouwen: een formulier dat eruitziet als een generieke widget van een derde partij wekt aarzeling bij gebruikers. We bespreken dit aspect uitgebreider in ons artikel over een formulier aanpassen zonder te programmeren.

Microkopieën en foutmeldingen

Microcopy verwijst naar de kleine tekst rondom de velden: labels, helpteksten, foutmeldingen. Goed geschreven microcopy beantwoordt de bezwaren voordat ze de gebruiker blokkeren. Slecht geschreven microcopy maakt van een simpele typefout een reden om het veld te verlaten.

Vink de optionele velden aan, niet de verplichte

Het rode sterretje is een aangeleerde reflex, maar veel gebruikers merken het niet op of begrijpen de betekenis ervan niet. De door verschillende UX-specialisten aanbevolen werkwijze is het tegenovergestelde: ga ervan uit dat alles verplicht is en voeg "(optioneel)" alleen toe aan velden die dat niet zijn. Als je veel optionele velden hebt, overweeg dan of ze nuttig zijn.

Valideer op het juiste moment

Volgens het Baymard Instituut, 31% van de geteste websites heeft geen online validatie van de velden, sommige gebruikers activeren de melding te vroeg. Het weergeven van "ongeldig e-mailadres" wanneer iemand slechts drie letters heeft ingetypt, zorgt voor frustratie. Het juiste moment: wanneer de gebruiker het veld verlaat. En zodra ze het veld corrigeren, moet de foutmelding verdwijnen terwijl ze typen, zonder te wachten tot ze naar een ander veld gaan.

Het opschrijven van fouten kan helpen

Vergelijk "Ongeldig formaat" met "Het getal moet 10 cijfers bevatten, bijvoorbeeld 06 12 34 56 78". De tweede melding geeft aan wat u moet doen. Plaats de melding direct onder het betreffende veld, nooit alleen bovenaan het formulier, en bewaar alle reeds ingevoerde gegevens na een fout.

Geruststellend in situaties waar een probleem is

Het telefoonnummerveld is een klassiek pijnpunt in een leadgeneratieformulier. Een behulpzame zin direct daaronder ("Alleen om u terug te bellen over uw offerte") pakt dit probleem meteen aan. Dit is effectiever dan een algemene voettekst die niemand leest.

De verzendknop: de laatste meter

De knop moet duidelijk aangeven wat de gebruiker ontvangt, niet welke technische handeling hij of zij uitvoert. "Ontvang mijn offerte" converteert beter dan "Verzenden", omdat het de belofte op het moment van de uiteindelijke actie benadrukt.

Unbounce meldt diverse gevallen waarin één enkel woord het resultaat veranderde. Op een B2B-portaal voor kantoorverhuur, het vervangen van "Bestellen" door "Ontvangen" op de knop verhoogde de conversie met 38% : het werkwoord had uiteindelijk betrekking op wat men ontvangt, in plaats van op wat men moet doen.

Qua ontwerp zijn vier instellingen belangrijk:

• Volledige breedte op mobiel, zodat de duim het kan bereiken zonder te hoeven richten.
• Een kleur die contrasteert met de rest van de pagina. De "beste kleur" bestaat niet: het gaat om het contrast met de omgeving, niet om rood of groen op zich.
• Nooit uitgeschakeld of grijs weergegeven zolang het formulier onvolledig is, begrijpt de gebruiker niet wat er ontbreekt. Laat ze zelf de velden aanklikken en aanwijzen die ze willen invullen.
• Een laadstatus na het klikken ("Verzenden bezig...") om dubbele inzendingen en dubbele leads in uw CRM te voorkomen.

Deze ontwerpoptimalisaties komen bovenop de optimalisaties die gericht zijn op de aanschafkosten. Als budget uw voornaamste zorg is, lees dan ons artikel over de lagere kosten per lead dankzij de conversie van formulieren koppelt deze instellingen aan uw campagnes.

Best practices voor formulierontwerp: het auditraster in 10 minuten

Hier is het schema dat aan het begin van het artikel werd beloofd. Pak je telefoon, open het formulier in de privémodus van je browser en vink elk vakje aan. Elk "nee" staat voor een obstakel dat je deze week kunt wegnemen.

1. Het formulier past in één kolom op mobiele apparaten.
2. Boven elk veld is een label zichtbaar, dat tijdens het invoeren van gegevens wordt weergegeven.
3. Het e-mailveld opent een toetsenbord met een "@" en gebruikt geen hoofdletters.
4. De velden voor telefoonnummer en postcode openen een toetsenbord.
5. De pagina zoomt niet in wanneer u een veld aanraakt (minimale lettergrootte 16px).
6. De browser biedt aan om naam, e-mailadres en telefoonnummer automatisch in te vullen.
7. Geen enkel veld krijgt automatisch de focus wanneer de pagina wordt geladen.
8. Bij een formulier met meerdere stappen wordt de voortgang weergegeven ("Stap X van Y").
9. De randen van de velden blijven ook bij maximaal licht, in de buitenlucht, zichtbaar.
10. Een opzettelijke fout (e-mailadres zonder @) resulteert in een duidelijke melding onder het veld, in plaats van alleen een rode rand.
11. De knop beschrijft het voordeel ("Ontvang...", "Krijg...") en beslaat de volledige breedte.
12. Na het klikken wordt eerst een laadstatus weergegeven en vervolgens een duidelijke bevestiging.

Een score van 10 van de 12 of hoger betekent dat je ontwerp waarschijnlijk niet je grootste probleem is. Bij een score lager dan 8 kun je het beste beginnen met punten 3, 4 en 5: deze zijn het snelst op te lossen en hebben allemaal invloed op je mobiele bezoekers.

Om te beginnen met een basis die al aan de meeste van deze eisen voldoet, kunt u onze kant-en-klare B2B-formuliersjablonen, of kijk hoe andere teams het hebben gedaan in onze casestudy over het verhogen van de conversieratio.

Veelgestelde vragen

Kunnen we de labels in de velden vervangen door de voorbeeldtekst?

Nee. De voorbeeldtekst (placeholder) verdwijnt zodra de eerste toetsaanslag wordt gedaan, waardoor de gebruiker niet kan controleren wat hij of zij heeft ingevoerd. Bovendien biedt de lichtgrijze kleur vaak onvoldoende contrast. Houd een zichtbaar label boven het veld en reserveer de placeholder voor een opmaakvoorbeeld.

Is een formulier met twee kolommen echt minder efficiënt?

In de meeste gevallen wel. Een CXL-onderzoek onder 702 deelnemers toonde een 13% snellere invulsnelheid voor velden met één kolom. De enige redelijke uitzonderingen zijn paren van gerelateerde velden, zoals postcode en plaats, en alleen op computers.

Moet de autofocus op het eerste beeldveld worden ingeschakeld?

Niet op een pagina die iets anders dan het formulier bevat. Autofocus zorgt ervoor dat de pagina verspringt, blokkeert scrollen met het toetsenbord en brengt schermlezers in de war. Het is alleen nuttig om de focus te leggen op de titel van de nieuwe stap in een formulier met meerdere stappen.

Wat is de beste kleur voor een formulierknop?

Er is geen universele regel. Waar het om gaat, is het contrast van de knop met de rest van de pagina en de leesbaarheid van de tekst (minimaal 4,5:1). Een oranje knop op een oranje website valt minder op dan een blauwe knop op dezelfde website.

Levert een formulier met meerdere stappen altijd betere conversies op?

Nee, alleen als het goed ontworpen is: één of twee vragen per scherm, een makkelijke eerste vraag, zichtbare voortgang en de contactgegevens als laatste. Een formulier met drie velden hoeft niet opgesplitst te worden.

Wil je deze best practices toepassen zonder de code aan te raken? Probeer Blastform gratis uit of boek een demo om uw huidige formulier met ons team te bespreken.