Een bezoeker komt op je site en klikt op "Inloggen". Hij verwacht een soepele loginervaring. In plaats daarvan komt hij een formulier tegen dat hem frustreert. De wachtwoordeisen zijn verborgen tot het verzenden. Het wachtwoordveld is klein en lastig om in te typen. Er is geen optie "Wachtwoord tonen", dus hij kan niet controleren wat hij typte. Hij typt het wachtwoord verkeerd. Hij klikt op "Wachtwoord vergeten" en komt in een verwarrende resetflow terecht. Een paar minuten later geeft hij op en komt hij nooit terug.
Login- en wachtwoordresetformulieren zijn cruciale contactmomenten. Deze formulieren staan tussen een terugkerende bezoeker en zijn account. Is de ervaring slecht, dan vertrekt hij niet alleen. Hij gaat ervan uit dat je site niet te vertrouwen is. Dit hoofdstuk laat zien hoe je login- en wachtwoordresetformulieren bouwt die veilig en logisch zijn en de tijd van je gebruiker respecteren.
Welke velden heeft een loginformulier nodig?
Een loginformulier heeft precies drie dingen nodig. Ten eerste een manier om vast te stellen wie de persoon is. Ten tweede een manier om zijn identiteit te controleren. Ten derde een manier om ingelogd te blijven. Dat betekent minimaal drie velden.
Het e-mailveld
Gebruik e-mail, geen gebruikersnaam. E-mail is eenvoudiger. Gebruikers vergeten gebruikersnamen. Hun e-mailadres vergeten ze niet. Laat dit veld een e-mailadres accepteren en label het duidelijk als "E-mailadres". Gebruik HTML `type="email"`, zodat mobiele toetsenborden het @-teken tonen en e-mailvalidatie automatisch gebeurt. Voeg in het HTML-attribuut `autocomplete="username"` toe, zodat browsers en wachtwoordmanagers weten dat hier de login-identificatie hoort en deze kunnen invullen voor gebruikers met opgeslagen gegevens.
Het wachtwoordveld
Gebruik `type="password"`, zodat de tekst verborgen is. Voeg `id="current-password"` en `autocomplete="current-password"` toe, zodat wachtwoordmanagers dit veld herkennen en opgeslagen wachtwoorden invullen. Sta plakken toe. Beveiligingsexperts zijn het erover eens dat plakken uitzetten bij wachtwoordvelden aanvallen niet voorkomt. Het frustreert alleen mensen die een wachtwoordmanager gebruiken.
Maak het wachtwoordveld visueel minstens 10 tekens breed. Een klein invoerveld voelt krap. Gebruikers twijfelen of hun lange wachtwoord erin past. Een breder veld wekt vertrouwen en vermindert fouten bij het verzenden.
Knop om het wachtwoord te tonen
Neem een knop "Wachtwoord tonen" of "Wachtwoord onthullen" op (meestal een oogpictogram of selectievakje). Staat die aan, dan verandert het wachtwoordveld in `type="text"`, zodat gebruikers kunnen zien wat ze typten. Dit is geen beveiligingsrisico. Het is een gebruiksfunctie die fouten bij het verzenden en frustratie vermindert. Gebruikers typen wachtwoorden zorgvuldig en willen ze controleren voordat ze op verzenden drukken.
Selectievakje "Onthoud mij" (optioneel, maar aan te raden)
Een selectievakje "Onthoud mij op dit apparaat" of "Houd mij ingelogd" is optioneel, maar verbetert de ervaring. Is het aangevinkt, dan duurt de sessie langer of slaat de browser (veilig) een blijvend logintoken op. Zo hoeven gebruikers niet bij elk bezoek in te loggen. Bij accounts met laag risico is dat veilig. Sla het over bij accounts met hoge beveiligingseisen (financieel, zorg, beheerpanelen) of eis opnieuw inloggen voor gevoelige acties.
Neem je een selectievakje "Onthoud mij" op, wees dan duidelijk over wat het doet. "Onthoud mij 30 dagen" is duidelijker dan alleen "Onthoud mij".
Link "Wachtwoord vergeten"
Zet een link "Wachtwoord vergeten?" direct onder het wachtwoordveld of er rechts van. Dit is niet optioneel. Gebruikers vergeten wachtwoorden. Geef een duidelijke weg om het te resetten. Kunnen ze de link niet vinden, dan verlaten ze de site en komen ze misschien nooit terug.
Hoe moet een wachtwoordresetformulier werken?
Een wachtwoordresetflow heeft meerdere stappen. Elke stap telt. Bij elke stap kunnen gebruikers in de war raken en afhaken.
Stap één: e-mailverificatie aanvragen
De resetflow begint als een gebruiker in het loginformulier op "Wachtwoord vergeten" klikt. Hij komt op een pagina met iets als "Vul je e-mailadres in om je wachtwoord te resetten." Er verschijnt één e-mailveld. Meer niet. Geen extra velden. Niet vragen naar gebruikersnaam of beveiligingsvragen. Alleen het e-mailadres.
De knop moet iets duidelijks en actiegerichts zeggen. "Stuur resetlink" of "Ontvang instructies om te resetten" vertelt wat er daarna gebeurt. "Verzenden" is vaag.
Stap twee: resetlink per e-mail sturen
Verstuurt iemand zijn e-mailadres, dan stuurt je systeem direct een e-mail om het wachtwoord te resetten. De e-mail moet binnen seconden aankomen, niet minuten. Snelheid telt. Duurt de e-mail 10 minuten, dan denken gebruikers dat het niet werkte en proberen ze het opnieuw, of erger, ze vertrekken.
De resetmail bevat een unieke link (of een code die ze op de volgende pagina invullen). Die link moet na een bepaalde tijd verlopen, meestal na 24 uur. Een link die nooit verloopt, is een beveiligingsrisico als iemand toegang krijgt tot hun e-mail.
Stap drie: de link controleren en het resetformulier tonen
Klikken ze in de e-mail op de resetlink, dan komen ze op het formulier om het wachtwoord te resetten. Deze pagina moet duidelijk bevestigen wat er gebeurt: "Reset je wachtwoord" of "Maak een nieuw wachtwoord". Geen twijfel of ze op de goede plek zijn.
Toon het e-mailadres waarvoor ze het wachtwoord resetten. "Je reset het wachtwoord voor voorbeeld@email.nl." Dat stelt ze gerust dat ze het juiste account resetten.
Stap vier: wachtwoordeisen duidelijk maken voordat ze verzenden
Toon de wachtwoordeisen op het resetformulier VOORDAT ze proberen te verzenden. Laat ze niet raden. "Je wachtwoord moet minstens 12 tekens hebben en een hoofdletter, een cijfer en een speciaal teken bevatten." Wees specifiek. Toon voorbeelden van wat voldoet.
Een sterkte-indicator voor wachtwoorden (een balk die zwak, gemiddeld of sterk toont) helpt gebruikers te begrijpen of hun wachtwoord aan de eisen voldoet, zonder te verzenden en een fout te krijgen. Sommige gebruikers vinden dat handig. Anderen vinden het frustrerend als de eisen onduidelijk zijn. Gebruik je een sterktemeter, combineer die dan met uitdrukkelijke eisen in tekst.
Stap vijf: wachtwoordveld en bevestiging
Vraag om een nieuw wachtwoord. Vraag ze dan om het ter bevestiging nog eens te typen. Die bevestigingsstap vangt typefouten op. Het nadeel is dat een bevestigingsveld extra weerstand geeft. Onderzoek laat zien dat het weghalen van het bevestigingsveld voor het wachtwoord het aantal ingevulde formulieren verhoogt. Houd je het erin, laat dan bij beide velden een knop "Wachtwoord onthullen" zien, zodat ze kunnen controleren of beide invoeren overeenkomen voordat ze verzenden.
Stap zes: directe bevestiging en vervolgstappen
Hebben ze hun wachtwoord succesvol gereset, toon dan een succesbericht. "Je wachtwoord is gereset. Je kunt nu inloggen met je nieuwe wachtwoord." Geef daarna een link terug naar het loginformulier of een knop "Naar inloggen", zodat ze niet hoeven te navigeren of te zoeken.
Stuur ze ook een bevestigingsmail. "Je wachtwoord is zojuist gereset. Heb je dit niet zelf gedaan, klik dan hier om je account te beveiligen." Dat waarschuwt ze als iemand anders hun wachtwoord heeft gereset en geeft ze een manier om dat ongedaan te maken.
Waar komen loginformulieren op je site?
Loginformulieren zijn geen decoratie. Ze moeten te vinden zijn zonder zoeken.
Header of navigatie
De meest zichtbare plek is de header. Een link (of knop) "Inloggen" rechtsboven op je site is waar gebruikers hem verwachten. Klikken ze erop, breng ze dan naar een eigen loginpagina of open een venster met het loginformulier. Mobiele gebruikers verwachten de optie om in te loggen in het hamburgermenu. Verstop hem nooit achter lagen navigatie.
Eigen loginpagina
Maak een eigen pagina `/login` of `/sign-in`. Die pagina bevat het loginformulier en verder niets. Geen blogartikelen. Geen marketingtekst. Alleen het formulier en eventuele noodzakelijke hulptekst. Een schone, gerichte pagina converteert beter dan het loginformulier in te bedden op een algemene pagina.
Pagina om het wachtwoord te resetten
Het resetformulier hoort op een eigen URL zoals `/reset-password` of `/forgot-password`. Deze pagina is alleen bereikbaar vanuit het loginformulier of via een link in de resetmail. Zoekmachines mogen hem niet indexeren. Voeg `noindex` toe aan deze pagina in je HTML of robots.txt, zodat Google hem niet probeert te ranken.
Veelgemaakte fouten in het ontwerp van loginformulieren
Zelfs loginformulieren met goede bedoelingen hebben vaak problemen die de gebruikerservaring schaden.
Te veel velden vóór het inloggen
Sommige sites vragen in het loginformulier zelf om gebruikersnaam, e-mailadres, telefoonnummer en antwoord op een beveiligingsvraag. Doe dit niet. Inloggen is geen registratie. Vraag alleen om e-mailadres en wachtwoord. Al het andere is extra weerstand.
Verborgen of onduidelijke wachtwoordeisen
Zijn de wachtwoordeisen verborgen tot het verzenden, dan raken gebruikers gefrustreerd. Ze voeren een wachtwoord in. Ze drukken op verzenden. Er verschijnt een fout: "Wachtwoord moet 12 tekens hebben en een cijfer bevatten." Nu moeten ze opnieuw proberen. Toon de eisen vooraf.
Geen optie om het wachtwoord te tonen
Gebruikers kunnen niet zien wat ze typten. Ze verzenden. Het is fout. Ze proberen opnieuw. Het is weer fout. Een eenvoudige knop voorkomt deze frustratie.
Verwarrende foutmeldingen
Zeg gebruikers nooit "Ongeldige login." Dat helpt niet. Gebruiken ze het verkeerde e-mailadres? Het verkeerde wachtwoord? Is het account niet geactiveerd? Wees specifiek. "Er is geen account gevonden voor dit e-mailadres" of "Het wachtwoord is onjuist" vertelt ze wat ze moeten herstellen. Of wil je om veiligheidsredenen vaag blijven, geef ze dan een weg naar herstel. "E-mailadres en wachtwoord komen niet overeen. Probeer het opnieuw of reset je wachtwoord."
Resetlink verloopt te snel
Een resetlink die na 15 minuten verloopt, frustreert gebruikers. Ze kijken na het werk in hun e-mail. De link is dood. Ze moeten opnieuw beginnen. Geef ze minstens 24 uur.
Resetflow stuurt naar een verwarrende pagina
Sommige resetflows sturen gebruikers naar een pagina die niet duidelijk zegt wat ze moeten doen. Ze klikken op de resetlink. Ze komen op een pagina met onduidelijke tekst en zonder formulier. Ze denken dat er iets misging. Maak het duidelijk. "Reset je wachtwoord voor voorbeeld@email.nl" met een wachtwoordveld en een verzendknop.
Beveiliging bij inloggen en wachtwoord resetten
Een loginformulier is een beveiligingskritisch onderdeel van je site. Bescherm het goed.
Gebruik HTTPS voor al het loginverkeer
Je loginpagina moet via HTTPS worden aangeboden, niet via HTTP. HTTPS versleutelt de gegevens onderweg, zodat hackers het e-mailadres en wachtwoord niet kunnen lezen terwijl ze naar je server reizen. Dit is niet onderhandelbaar. Heeft je site geen SSL-certificaat, schaf er dan een aan. De meeste hostingproviders bieden nu gratis SSL-certificaten.
Controleer de wachtwoordsterkte op de server
Validatie in de browser helpt gebruikers, maar vertrouw er niet alleen op. JavaScript-validatie kan worden omzeild. Valideer het wachtwoord op je server. Controleer of het aan je eisen voldoet. Accepteer alleen wachtwoorden die aan je sterktenormen voldoen.
Hash en salt wachtwoorden in je database
Sla wachtwoorden nooit op als gewone tekst. Gebruik een veilig hashalgoritme (zoals bcrypt of Argon2) met salt. Zelfs als iemand je database binnendringt, kan hij de wachtwoorden niet lezen. Een goed gehasht wachtwoord kan niet worden teruggerekend naar het oorspronkelijke wachtwoord.
Beperk het aantal inlogpogingen
Probeert iemand 10 keer in een minuut in te loggen, blokkeer hem dan. Rate limiting voorkomt brute-force-aanvallen, waarbij hackers duizenden wachtwoordcombinaties proberen. Pauzeer na een paar mislukte pogingen 15 minuten voordat je meer pogingen toestaat.
Laat resettokens snel verlopen
Een resettoken dat 24 uur werkt, is standaard. Tokens die 7 dagen of langer werken, vergroten het risico dat een gehackt e-mailaccount leidt tot een gehackt account op je site. Houd tokens kortlevend.
Log inlogactiviteit om fraude op te sporen
Houd een overzicht bij van geslaagde en mislukte inlogpogingen. Logt iemand in vanuit een nieuw land of op een ongewoon tijdstip, markeer dat dan. Sommige systemen sturen een e-mail als er op een nieuw apparaat wordt ingelogd. Dat waarschuwt de accounteigenaar als iemand anders erbij kwam.
Loginformulieren op mobiel: wat is anders?
Mobiel verandert hoe loginformulieren moeten werken.
Tikvlakken en knopgrootte
Op mobiel zijn vingers niet zo precies als cursors. Knoppen en invoervelden moeten groter zijn. De verzendknop moet minstens 44 pixels hoog zijn. Invoervelden moeten hoog genoeg zijn om comfortabel in te typen. Mik op een hoogte van 44 tot 48 pixels.
Mobiele toetsenborden en invoertypen
Gebruik `type="email"` voor het e-mailveld. Dat vertelt mobiele apparaten om het e-mailtoetsenbord met @ en . te tonen. Zonder dat moeten gebruikers van toetsenbordmodus wisselen. Gebruik `type="password"` voor het wachtwoordveld, zodat het toetsenbord past. Dit kleine detail scheelt tikken en frustratie.
Automatisch invullen en wachtwoordmanagers
Mobiele browsers en wachtwoordmanager-apps (zoals 1Password of Bitwarden) kunnen inloggegevens automatisch invullen. Zorg dat je HTML-attributen dit ondersteunen. Neem `autocomplete="username"` op bij het e-mailveld en `autocomplete="current-password"` bij het wachtwoordveld. Dat is een enorm gemak op mobiel, waar typen langzamer gaat.
Opbouw van het formulier op kleine schermen
Zet velden onder elkaar. Zet e-mailadres en wachtwoord op een mobiel scherm niet naast elkaar. Eén veld per rij. Het formulier moet de volle breedte gebruiken met voldoende marges. Een formulier dat op mobiel krap voelt, wordt niet afgemaakt.
Voorkom dat het mobiele toetsenbord de knop bedekt
Verschijnt het mobiele toetsenbord, dan bedekt het het halve scherm. Zorg dat de loginknop boven het toetsenbord zichtbaar is, of bied een makkelijke manier om het toetsenbord te sluiten. Sommige sites tonen de knop pas nadat het toetsenbord is gesloten. Dat frustreert gebruikers. Houd de knop zichtbaar.
Veelgestelde vragen
Hoeveel wachtwoordeisen moet ik stellen?
Moet ik een sterkte-indicator voor wachtwoorden tonen?
Wat als iemand zijn wachtwoord EN zijn e-mailadres vergeet?
Heb ik tweestapsverificatie nodig op mijn loginformulier?
Hoe vaak moet iemand zijn wachtwoord resetten?
Is het beter om te vragen naar een gebruikersnaam of een e-mailadres?
Zo helpt WEMASY bij login- en wachtwoordresetformulieren
De formulierbouwer van WEMASY ondersteunt veilige login- en wachtwoordresetflows. Maak een loginformulier met velden voor e-mailadres en wachtwoord. Voeg met één klik een knop toe om het wachtwoord te tonen. Stel wachtwoordeisen in (lengte, hoofdletters, cijfers, speciale tekens). Gebruik voorwaardelijke logica om een selectievakje "Onthoud mij" te tonen of over te slaan, afhankelijk van je beveiligingseisen. Koppel aan het authenticatiesysteem van WEMASY of integreer externe authenticatieproviders via een API. WEMASY regelt het hashen van wachtwoorden, het beperken van pogingen en sessiebeheer automatisch. Mails om het wachtwoord te resetten worden veilig vanaf je eigen domein verstuurd. Resettokens verlopen na 24 uur. Bekijk wat er in de WEMASY-abonnementen zit.