Vraag gaat in een envelop New

A short question form where, after sending, your message slides into an envelope as a note, the flap closes, the envelope flies off and a check mark takes its place with when you will hear back. Empty input gives a plain error; with reduced motion the confirmation shows at once. For the contact form of a bike shop, hairdresser or other business, or as a thank you step after a request.

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.

<!-- 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'));

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 →