FormOnboarding Forms

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

<section class="fon"> <div class="fon__inner"> <div class="fon__header"> <div class="fon__step-badge">Stap 1 van 1</div> <h2 class="fon__headline">Vertel ons over jouw bedrijf</h2> <p class="fon__sub">We gebruiken deze informatie om jouw strategie op maat te maken.</p> </div> <form class="fon__form" novalidate> <div class="fon__row"> <div class="fon__field"> <label class="fon__label" for="fon-bedrijf">Bedrijfsnaam</label> <input class="fon__input" id="fon-bedrijf" type="text" placeholder="Mijn Bedrijf BV" required> </div> <div class="fon__field"> <label class="fon__label" for="fon-website">Website</label> <input class="fon__input" id="fon-website" type="url" placeholder="https://mijnbedrijf.nl"> </div> </div> <div class="fon__row"> <div class="fon__field"> <label class="fon__label" for="fon-sector">Branche</label> <select class="fon__select" id="fon-sector"> <option value="" disabled selected>Kies je branche</option> <option>E-commerce</option> <option>B2B Software &amp; SaaS</option> <option>Professionele dienstverlening</option> <option>Horeca &amp; Retail</option> <option>Zorg &amp; Welzijn</option> <option>Overig</option> </select> </div> <div class="fon__field"> <label class="fon__label" for="fon-grootte">Bedrijfsgrootte</label> <select class="fon__select" id="fon-grootte"> <option>1–5 medewerkers</option> <option>6–20 medewerkers</option> <option>21–100 medewerkers</option> <option>100+ medewerkers</option> </select> </div> </div> <div class="fon__field"> <label class="fon__label" for="fon-doel">Wat is jouw belangrijkste marketingdoel?</label> <select class="fon__select" id="fon-doel"> <option value="" disabled selected>Kies je doel</option> <option>Meer websitebezoekers via SEO</option> <option>Hogere ROAS op betaalde advertenties</option> <option>Meer leads genereren</option> <option>Merkbekendheid vergroten</option> <option>Complete digitale transformatie</option> </select> </div> <div class="fon__field"> <label class="fon__label" for="fon-budget">Maandelijks marketing­budget</label> <select class="fon__select" id="fon-budget"> <option value="" disabled selected>Kies je budget</option> <option>Minder dan € 500</option> <option>€ 500 – € 1.500</option> <option>€ 1.500 – € 5.000</option> <option>Meer dan € 5.000</option> </select> </div> <div class="fon__field"> <label class="fon__label" for="fon-extra">Extra context (optioneel)</label> <textarea class="fon__textarea" id="fon-extra" rows="3" placeholder="Vertel ons over je huidige uitdagingen, concurrenten of specifieke wensen…"></textarea> </div> <button class="fon__btn" type="submit">Onboarding afronden</button> </form> </div> </section>

<style>
.fon{background:#fff;padding:4rem 1.5rem}
.fon__inner{max-width:680px;margin:0 auto}
.fon__header{margin-bottom:2rem}
.fon__step-badge{display:inline-block;background:#ede9fe;color:var(--color-accent, #6366f1);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;margin-bottom:.75rem}
.fon__headline{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.fon__sub{color:#666;font-size:.95rem;margin:0;line-height:1.6}
.fon__form{display:flex;flex-direction:column;gap:1.25rem}
.fon__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.fon__field{display:flex;flex-direction:column;gap:.4rem}
.fon__label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#555}
.fon__input,.fon__select,.fon__textarea{padding:.7rem 1rem;border:1.5px solid #e0e0e0;border-radius:8px;font-size:.93rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.fon__input:focus,.fon__select:focus,.fon__textarea:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fon__textarea{resize:vertical}
.fon__btn{padding:.9rem 2rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .2s;align-self:flex-start;font-family:inherit}
.fon__btn:hover{opacity:.88}
.fon__row{grid-template-columns:1fr}
</style>