Inloggen met wachtwoord vergeten New

Login screen for a customer portal with every state: empty or invalid fields, an error that does not reveal whether the email exists, a remaining-attempts counter, a Caps Lock warning, loading and signed in. "Forgot password?" swaps to a reset form with the email prefilled and a neutral confirmation. Focus moves to the new heading on every swap. Demo password: Zwolle2026.

Inloggen bij Mijn Dossier

Administratiekantoor Van Dijk, Zwolle

How to use it

Paste the HTML where the forms & inputs should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Inloggen met wachtwoord vergeten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ilw"><div class="ilw__in">
<section class="ilw__v" data-v="in">
<h3 class="ilw__h" tabindex="-1">Inloggen bij Mijn Dossier</h3>
<p class="ilw__sub">Administratiekantoor Van Dijk, Zwolle</p>
<div class="ilw__alert" role="alert" hidden></div>
<form class="ilw__form" novalidate>
<div class="ilw__fld"><label class="ilw__l" for="ilw-e">E-mailadres</label><input class="ilw__i ilw__e" id="ilw-e" type="email" autocomplete="username" aria-describedby="ilw-ee"><p class="ilw__err" id="ilw-ee"></p></div>
<div class="ilw__fld"><div class="ilw__row"><label class="ilw__l" for="ilw-p">Wachtwoord</label><button class="ilw__link ilw__forgot" type="button">Wachtwoord vergeten?</button></div>
<div class="ilw__pw"><input class="ilw__i ilw__p" id="ilw-p" type="password" autocomplete="current-password" aria-describedby="ilw-pe ilw-caps"><button class="ilw__show" type="button" aria-pressed="false">Toon</button></div>
<p class="ilw__caps" id="ilw-caps" hidden>Caps Lock staat aan</p><p class="ilw__err" id="ilw-pe"></p></div>
<button class="ilw__btn" type="submit">Inloggen</button>
</form>
</section>
<section class="ilw__v" data-v="reset" hidden>
<h3 class="ilw__h" tabindex="-1">Wachtwoord vergeten</h3>
<p class="ilw__sub">Vul je e-mailadres in. We sturen je een link om een nieuw wachtwoord te kiezen.</p>
<form class="ilw__form ilw__rform" novalidate>
<div class="ilw__fld"><label class="ilw__l" for="ilw-r">E-mailadres</label><input class="ilw__i ilw__r" id="ilw-r" type="email" autocomplete="email" aria-describedby="ilw-re"><p class="ilw__err" id="ilw-re"></p></div>
<button class="ilw__btn" type="submit">Stuur herstellink</button>
</form>
<button class="ilw__link ilw__back" type="button">Terug naar inloggen</button>
</section>
<section class="ilw__v" data-v="sent" hidden>
<h3 class="ilw__h" tabindex="-1">Kijk in je mailbox</h3>
<p class="ilw__sub ilw__sentmsg"></p>
<p class="ilw__sub">Niets ontvangen? Kijk in je map met ongewenste mail of vraag de link over tien minuten opnieuw aan.</p>
<button class="ilw__link ilw__back" type="button">Terug naar inloggen</button>
</section>
<section class="ilw__v" data-v="ok" hidden>
<h3 class="ilw__h" tabindex="-1">Welkom terug, Sanne</h3>
<p class="ilw__sub">Je aangifte inkomstenbelasting 2025 staat klaar om te controleren. Er wachten 2 documenten op je handtekening.</p>
<button class="ilw__btn ilw__out" type="button">Uitloggen</button>
</section>
</div></div>
</div>

/* Inloggen met wachtwoord vergeten · NedDev · eigen werk. */
.ilw{position:absolute;inset:0;overflow:auto;display:flex;padding:14px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.ilw *,.ilw *::before,.ilw *::after{box-sizing:border-box}
.ilw [hidden]{display:none!important}
.ilw__in{margin:auto;width:100%;max-width:340px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:16px}
.ilw__h{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;outline:none}
.ilw__sub{margin:3px 0 10px;font-size:13px;line-height:1.4;color:#4a4a4a}
.ilw__alert{margin:0 0 10px;padding:8px 10px;border-left:3px solid #B42318;background:#fdf1ef;font-size:13px;line-height:1.4;color:#7a1610}
.ilw__alert .ilw__link{color:#7a1610}
.ilw__fld{margin-bottom:9px}
.ilw__row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ilw__l{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.ilw__i{display:block;width:100%;height:36px;padding:0 10px;font:400 14px 'Switzer',sans-serif;color:#0a0a0a;background:#fff;border:1px solid #8c8c8c;border-radius:4px;transition:border-color .15s,box-shadow .15s}
.ilw__i:hover{border-color:#0a0a0a}
.ilw__i:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.ilw__i[aria-invalid="true"]{border-color:#B42318}
.ilw__pw{position:relative}
.ilw__pw .ilw__i{padding-right:60px}
.ilw__show{position:absolute;right:4px;top:4px;height:28px;padding:0 9px;border:0;border-radius:4px;background:#f4f3f1;font:600 12.5px 'Switzer',sans-serif;color:#0a0a0a;cursor:pointer}
.ilw__show:hover{background:#e7e4df}
.ilw__err{margin:4px 0 0;font-size:12.5px;color:#B42318;line-height:1.35}
.ilw__err:empty{display:none}
.ilw__caps{margin:4px 0 0;font-size:12.5px;color:#8A4B00}
.ilw__link{border:0;background:none;padding:4px 0;min-height:24px;font:500 13px 'Switzer',sans-serif;color:#0a0a0a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ilw__link:hover{text-decoration-thickness:2px}
.ilw__btn{width:100%;height:40px;margin-top:4px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 14px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.ilw__btn:hover{background:#2a2a2a}
.ilw__btn:active{transform:translateY(1px)}
.ilw__btn[aria-busy="true"]{background:#4a4a4a;cursor:progress}
.ilw__back{margin-top:8px}
.ilw__show:focus-visible,.ilw__link:focus-visible,.ilw__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ilw__v{animation:ilw-in .25s ease}
@keyframes ilw-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ilw *{transition:none!important;animation:none!important}}

// Inloggen met wachtwoord vergeten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ilw');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
w.querySelectorAll('[id]').forEach(function(el){el.id=el.id+sfx;});
w.querySelectorAll('[for]').forEach(function(el){el.setAttribute('for',el.getAttribute('for')+sfx);});
w.querySelectorAll('[aria-describedby]').forEach(function(el){el.setAttribute('aria-describedby',el.getAttribute('aria-describedby').split(' ').map(function(x){return x+sfx;}).join(' '));});
var views=w.querySelectorAll('.ilw__v'),alert=w.querySelector('.ilw__alert'),e=w.querySelector('.ilw__e'),p=w.querySelector('.ilw__p'),r=w.querySelector('.ilw__r'),caps=w.querySelector('.ilw__caps'),tries=3,PW='Zwolle2026';
var RE=/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i;
function show(v){views.forEach(function(s){s.hidden=s.getAttribute('data-v')!==v;});var h=w.querySelector('[data-v="'+v+'"] .ilw__h');if(h)h.focus();}
function err(inp,msg){var el=w.querySelector('#'+inp.getAttribute('aria-describedby').split(' ')[0]);el.textContent=msg||'';if(msg)inp.setAttribute('aria-invalid','true');else inp.removeAttribute('aria-invalid');return !msg;}
function ce(){var v=e.value.trim();return err(e,!v?'Vul je e-mailadres in':!RE.test(v)?'Dit lijkt geen e-mailadres, bijvoorbeeld naam@voorbeeld.nl':'');}
function cp(){return err(p,p.value?'':'Vul je wachtwoord in');}
e.addEventListener('blur',function(){if(e.value)ce();});e.addEventListener('input',function(){if(e.getAttribute('aria-invalid'))ce();});
p.addEventListener('input',function(){if(p.getAttribute('aria-invalid'))cp();});
function capsChk(ev){if(ev.getModifierState)caps.hidden=!ev.getModifierState('CapsLock');}
p.addEventListener('keyup',capsChk);p.addEventListener('keydown',capsChk);p.addEventListener('blur',function(){caps.hidden=true;});
var sb=w.querySelector('.ilw__show');sb.addEventListener('click',function(){var on=p.type==='password';p.type=on?'text':'password';sb.textContent=on?'Verberg':'Toon';sb.setAttribute('aria-pressed',on);sb.setAttribute('aria-label',on?'Wachtwoord verbergen':'Wachtwoord tonen');});
sb.setAttribute('aria-label','Wachtwoord tonen');
var lf=w.querySelector('[data-v="in"] .ilw__form'),lb=lf.querySelector('.ilw__btn');
lf.addEventListener('submit',function(ev){ev.preventDefault();if(lb.getAttribute('aria-busy')==='true')return;alert.hidden=true;
 var a=ce(),b=cp();if(!a||!b){(a?p:e).focus();return;}
 if(tries<=0){alert.hidden=false;return;}
 lb.setAttribute('aria-busy','true');lb.textContent='Bezig met inloggen';
 setTimeout(function(){lb.removeAttribute('aria-busy');lb.textContent='Inloggen';
  if(p.value===PW){tries=3;show('ok');return;}
  tries--;alert.hidden=false;
  if(tries>0){alert.innerHTML='Deze combinatie van e-mailadres en wachtwoord kennen we niet. Nog '+tries+(tries===1?' poging':' pogingen')+' voordat we inloggen 15 minuten blokkeren.';p.value='';p.focus();}
  else{alert.innerHTML='Inloggen is 15 minuten geblokkeerd. Je kunt wel direct <button type="button" class="ilw__link ilw__alink">een nieuw wachtwoord aanvragen</button>.';alert.querySelector('.ilw__alink').addEventListener('click',goReset);alert.querySelector('.ilw__alink').focus();}
 },700);});
function goReset(){r.value=e.value.trim();err(r,'');show('reset');}
w.querySelector('.ilw__forgot').addEventListener('click',goReset);
w.querySelectorAll('.ilw__back').forEach(function(b){b.addEventListener('click',function(){show('in');});});
w.querySelector('.ilw__rform').addEventListener('submit',function(ev){ev.preventDefault();var v=r.value.trim();
 if(!err(r,!v?'Vul je e-mailadres in':!RE.test(v)?'Dit lijkt geen e-mailadres, bijvoorbeeld naam@voorbeeld.nl':'')){r.focus();return;}
 w.querySelector('.ilw__sentmsg').textContent='Als er een account bestaat voor '+v+', ontvang je binnen 5 minuten een link. Die werkt 1 uur.';show('sent');});
w.querySelector('.ilw__out').addEventListener('click',function(){p.value='';alert.hidden=true;show('in');});
}
init(document.querySelector('.jouw-container'));

More forms & inputs

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →