FormWaitlist Forms

---
// FormWaitlist, recovered from blurr-components.pages.dev
---

<section class="fwl"> <div class="fwl__inner"> <div class="fwl__badge">Binnenkort live</div> <h2 class="fwl__headline">Kom op de wachtlijst</h2> <p class="fwl__sub">Exclusieve vroegboekkorting</p> <div class="fwl__counter"> <span class="fwl__count">247</span> <span class="fwl__count-label">mensen wachten al</span> </div> <form class="fwl__form" novalidate> <div class="fwl__fields"> <input class="fwl__input" type="text" placeholder="Voornaam" required> <input class="fwl__input" type="email" placeholder="E-mailadres" required> </div> <button class="fwl__btn" type="submit">Schrijf mij in op de wachtlijst</button> </form> <p class="fwl__privacy">Geen spam. Je ontvangt alleen een bericht wanneer je aan de beurt bent.</p> </div> </section>

<style>
.fwl{background:var(--color-primary, #0a0a0a);padding:5rem 1.5rem;text-align:center}
.fwl__inner{max-width:560px;margin:0 auto}
.fwl__badge{display:inline-block;background:#2a2a2a;color:var(--color-accent, #6366f1);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .9rem;border-radius:99px;margin-bottom:1.25rem;border:1px solid #3a3a50}
.fwl__headline{font-size:2rem;font-weight:700;color:#fff;margin:0 0 .75rem;line-height:1.2}
.fwl__sub{color:#888;font-size:.97rem;line-height:1.65;margin:0 0 2rem}
.fwl__counter{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-bottom:2rem;background:#161616;border:1px solid #2a2a2a;border-radius:12px;padding:1.25rem}
.fwl__count{font-size:2.75rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fwl__count-label{font-size:.82rem;color:#666;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.fwl__form{display:flex;flex-direction:column;gap:.75rem}
.fwl__fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fwl__input{padding:.85rem 1rem;border:1.5px solid #2a2a2a;border-radius:8px;font-size:.93rem;color:#fff;background:#161616;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fwl__input::placeholder{color:#555}
.fwl__input:focus{border-color:var(--color-accent, #6366f1)}
.fwl__btn{padding:.95rem 1.5rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:.97rem;font-weight:700;cursor:pointer;transition:opacity .2s;width:100%;font-family:inherit}
.fwl__btn:hover{opacity:.88}
.fwl__privacy{font-size:.75rem;color:#555;margin:.75rem 0 0;line-height:1.5}
.fwl__fields{grid-template-columns:1fr}
.fwl__headline{font-size:1.5rem}
</style>