Vraag gaat in een envelop Nieuw

Een kort vraagformulier waarbij je bericht na het versturen als briefje in een envelop schuift, de klep dichtgaat, de envelop wegvliegt en er een vinkje voor in de plaats komt met wanneer je antwoord krijgt. Lege invoer geeft een gewone foutmelding; met minder beweging zie je direct de bevestiging. Voor het contactformulier van een fietsenmaker, kapper of andere zaak, of als bedankstap na een aanvraag.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Vraag gaat in een envelop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7ev">
<form class="r7ev__form" novalidate>
<label class="r7ev__lab" for="r7ev-vraag">Je vraag aan Fietsenmaker Jansen</label>
<textarea class="r7ev__veld" id="r7ev-vraag" name="vraag" rows="3" aria-describedby="r7ev-fout">Kan mijn e-bike deze week nog een beurt krijgen?</textarea>
<p class="r7ev__fout" id="r7ev-fout" aria-live="polite"></p>
<button class="r7ev__knop" type="submit">Versturen</button>
</form>
<div class="r7ev__beeld">
<svg class="r7ev__svg" viewBox="0 0 160 130" aria-hidden="true" focusable="false">
<path class="r7ev__spoor" pathLength="1" d="M80 80C110 70 130 40 170 -10"/>
<g class="r7ev__env">
<rect class="r7ev__achter" x="20" y="44" width="120" height="70" rx="3"/>
<path class="r7ev__klepA" d="M20 44L80 8L140 44Z"/>
<g class="r7ev__brief"><rect x="32" y="20" width="96" height="62" rx="2"/><path d="M42 32H108M42 42H118M42 52H96"/></g>
<path class="r7ev__voor" d="M20 52L80 86L140 52V114H20Z"/>
<path class="r7ev__voorlijn" d="M20 114L66 80M140 114L94 80"/>
<path class="r7ev__klepV" d="M20 44L80 82L140 44Z"/>
</g>
<g class="r7ev__ok"><circle pathLength="1" cx="80" cy="64" r="30"/><path pathLength="1" d="M66 65L76 75L95 54"/></g>
</svg>
<p class="r7ev__klaar" aria-live="polite"></p>
</div>
</div>
</div>

/* Vraag gaat in een envelop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7ev{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:16px;padding:14px 18px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;overflow:hidden}
.r7ev *,.r7ev *::before,.r7ev *::after{box-sizing:border-box}
.r7ev__form{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.r7ev__lab{font:600 14px/1.25 'Switzer',sans-serif}
.r7ev__veld{width:100%;resize:none;padding:8px 10px;border:1px solid rgba(10,10,10,.3);border-radius:4px;background:#fff;color:#0a0a0a;font:400 14px/1.4 'Switzer',sans-serif}
.r7ev__veld:focus-visible{outline:2px solid #F5480F;outline-offset:1px;border-color:#0a0a0a}
.r7ev__veld[aria-invalid="true"]{border-color:#c0300a}
.r7ev__fout{margin:0;min-height:15px;font:500 12px/1.25 'Switzer',sans-serif;color:#b02a06}
.r7ev__knop{align-self:flex-start;white-space:nowrap;min-height:36px;padding:9px 16px;border:0;border-radius:4px;background:#F5480F;color:#0a0a0a;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.r7ev__knop:hover{background:#ff6a36}
.r7ev__knop:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.r7ev__beeld{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.r7ev__svg{display:block;width:100%;max-width:170px;height:auto;overflow:visible}
.r7ev__achter{fill:#e2ded8;stroke:#0a0a0a;stroke-width:1.5}
.r7ev__klepA{fill:#e2ded8;stroke:#0a0a0a;stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 100%;transition:transform .25s ease-in}
.r7ev__brief rect{fill:#fff;stroke:#0a0a0a;stroke-width:1.2}
.r7ev__brief path{fill:none;stroke:#9a968f;stroke-width:2;stroke-linecap:round}
.r7ev__brief{transition:transform .5s cubic-bezier(.5,0,.3,1)}
.r7ev__voor{fill:#fff;stroke:#0a0a0a;stroke-width:1.5;stroke-linejoin:round}
.r7ev__voorlijn{fill:none;stroke:#0a0a0a;stroke-width:1;opacity:.35}
.r7ev__klepV{fill:#F5480F;stroke:#0a0a0a;stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .25s ease-out}
.r7ev__env{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.6,0,.4,1),opacity .5s .2s}
.r7ev__spoor{fill:none;stroke:#0a0a0a;stroke-width:1.4;stroke-dasharray:.02 .03;stroke-dashoffset:0;opacity:0;transition:opacity .3s}
.r7ev__ok circle,.r7ev__ok path{fill:none;stroke:#F5480F;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.r7ev.is-4 .r7ev__ok circle,.r7ev.is-4 .r7ev__ok path{opacity:1}
.r7ev__ok circle{transition:stroke-dashoffset .5s ease}
.r7ev__ok path{transition:stroke-dashoffset .35s ease .4s}
.r7ev__klaar{margin:0;min-height:2.6em;font:500 13px/1.3 'Switzer',sans-serif;text-align:center;color:#2a2826}
.r7ev.is-1 .r7ev__brief{transform:translateY(30px)}
.r7ev.is-2 .r7ev__brief{transform:translateY(30px)}
.r7ev.is-2 .r7ev__klepA{transform:scaleY(0)}
.r7ev.is-2 .r7ev__klepV{transform:scaleY(1);transition-delay:.22s}
.r7ev.is-3 .r7ev__brief{transform:translateY(30px)}
.r7ev.is-3 .r7ev__klepA{transform:scaleY(0)}
.r7ev.is-3 .r7ev__klepV{transform:scaleY(1)}
.r7ev.is-3 .r7ev__env{transform:translate(90px,-90px) rotate(-18deg) scale(.4);opacity:0}
.r7ev.is-3 .r7ev__spoor{opacity:.5}
.r7ev.is-4 .r7ev__env{opacity:0;transition:none}
.r7ev.is-4 .r7ev__ok circle,.r7ev.is-4 .r7ev__ok path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.r7ev *{transition:none!important}}

// Vraag gaat in een envelop · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7ev');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var form=w.querySelector('.r7ev__form'),veld=w.querySelector('.r7ev__veld'),fout=w.querySelector('.r7ev__fout'),knop=w.querySelector('.r7ev__knop'),klaar=w.querySelector('.r7ev__klaar');
var timers=[],verstuurd=false;
function fase(n){w.classList.remove('is-1','is-2','is-3','is-4');if(n)w.classList.add('is-'+n);}
function wis(){timers.forEach(clearTimeout);timers=[];}
form.addEventListener('submit',function(e){
  e.preventDefault();wis();
  if(verstuurd){verstuurd=false;fase(0);klaar.textContent='';veld.value='';veld.disabled=false;knop.textContent='Versturen';veld.focus();return;}
  if(!veld.value.trim()){veld.setAttribute('aria-invalid','true');fout.textContent='Typ eerst je vraag, dan sturen we hem door.';veld.focus();return;}
  veld.removeAttribute('aria-invalid');fout.textContent='';verstuurd=true;veld.disabled=true;
  var ok=function(){fase(4);klaar.textContent='Verstuurd. We bellen je vandaag voor 17:00 terug.';knop.textContent='Nog een vraag stellen';};
  if(rm){ok();return;}
  fase(1);timers.push(setTimeout(function(){fase(2);},520));timers.push(setTimeout(function(){fase(3);},1050));timers.push(setTimeout(ok,1800));
});
veld.addEventListener('input',function(){if(veld.value.trim()){veld.removeAttribute('aria-invalid');fout.textContent='';}});
}
init(document.querySelector('.jouw-container'));

Meer uit formulieren & invoer

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →