FormEventReg Forms

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

<div class="fer-wrap"> <div class="fer-event-card"> <div class="fer-event-badge">Evenement</div> <h2 class="fer-event-title">BLURR Marketing Masterclass 2025</h2> <div class="fer-event-meta"> <div class="fer-meta-item"> <span class="fer-meta-icon" aria-hidden="true"></span> 15 mei 2025, 14:00–17:00 </div> <div class="fer-meta-item"> <span class="fer-meta-icon" aria-hidden="true">→</span> Amsterdam, Keizersgracht 123 </div> <div class="fer-meta-item fer-meta-item--spots"> <span class="fer-meta-icon" aria-hidden="true"></span>
Nog 12 plekken beschikbaar
</div> </div> </div> <div class="fer-form-area"> <h3 class="fer-heading">Registreer je deelname</h3> <form class="fer-form" novalidate> <div class="fer-row"> <div class="fer-field"> <label class="fer-label" for="fer-first">Voornaam *</label> <input class="fer-input" type="text" id="fer-first" name="first_name" placeholder="Jan" required autocomplete="given-name"> </div> <div class="fer-field"> <label class="fer-label" for="fer-last">Achternaam *</label> <input class="fer-input" type="text" id="fer-last" name="last_name" placeholder="de Vries" required autocomplete="family-name"> </div> </div> <div class="fer-field"> <label class="fer-label" for="fer-email">E-mailadres *</label> <input class="fer-input" type="email" id="fer-email" name="email" placeholder="jij@bedrijf.nl" required autocomplete="email"> </div> <div class="fer-row"> <div class="fer-field"> <label class="fer-label" for="fer-company">Bedrijf</label> <input class="fer-input" type="text" id="fer-company" name="company" placeholder="Jouw bedrijf" autocomplete="organization"> </div> <div class="fer-field"> <label class="fer-label" for="fer-role">Functie</label> <input class="fer-input" type="text" id="fer-role" name="role" placeholder="Marketing Manager" autocomplete="organization-title"> </div> </div> <div class="fer-field"> <label class="fer-label" for="fer-tickets">Aantal tickets *</label> <select class="fer-select" id="fer-tickets" name="tickets" required> <option value="1">1 ticket</option> <option value="2">2 tickets</option> <option value="3">3 tickets</option> </select> </div> <div class="fer-field"> <label class="fer-label" for="fer-dietary">Dieetwensen</label> <input class="fer-input" type="text" id="fer-dietary" name="dietary" placeholder="Bijv. vegetarisch, glutenvrij"> </div> <label class="fer-check-label"> <input class="fer-check" type="checkbox" name="newsletter">
Houd mij op de hoogte van toekomstige BLURR evenementen
</label> <button class="fer-submit" type="submit">Ik doe mee →</button> <p class="fer-note">Gratis deelname. Annuleren tot 48 uur voor aanvang.</p> </form> </div> </div>

<style>
.fer-wrap{max-width:620px;padding:2rem 0;display:flex;flex-direction:column;gap:2rem}
.fer-event-card{background:var(--color-primary, #0a0a0a);color:#fff;padding:2rem;border-radius:14px}
.fer-event-badge{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent, #6366f1);background:#6366f126;padding:.3rem .75rem;border-radius:4px;margin-bottom:1rem}
.fer-event-title{font-size:1.4rem;font-weight:800;margin:0 0 1.25rem}
.fer-event-meta{display:flex;flex-direction:column;gap:.5rem}
.fer-meta-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;opacity:.85}
.fer-meta-item--spots{color:#86efac;font-weight:600;opacity:1}
.fer-meta-icon{font-size:1rem}
.fer-heading{font-size:1.3rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1.5rem}
.fer-form{display:flex;flex-direction:column;gap:1.1rem}
.fer-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.fer-row{grid-template-columns:1fr}
.fer-field{display:flex;flex-direction:column;gap:.35rem}
.fer-label{font-size:.82rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fer-input,.fer-select{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.925rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fer-input:focus,.fer-select:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fer-check-label{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:#555;cursor:pointer}
.fer-check{accent-color:var(--color-accent, #6366f1)}
.fer-submit{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s;align-self:flex-start}
.fer-submit:hover{opacity:.88}
.fer-note{font-size:.78rem;color:#999;margin:.25rem 0 0}
</style>