FormFeedback Forms

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

<section class="ffb"> <div class="ffb__inner"> <h2 class="ffb__headline">Hoe was jouw ervaring?</h2> <p class="ffb__sub">Jouw feedback helpt ons om onze dienstverlening te blijven verbeteren.</p> <form class="ffb__form" novalidate> <div class="ffb__stars-field"> <span class="ffb__label">Jouw beoordeling</span> <div class="ffb__stars" role="group" aria-label="Beoordeling in sterren">  <input class="ffb__star-input" type="radio" name="rating" id="ffb-star-5" value="5"> <label class="ffb__star-label" for="ffb-star-5" title="5 sterren"></label>  <input class="ffb__star-input" type="radio" name="rating" id="ffb-star-4" value="4"> <label class="ffb__star-label" for="ffb-star-4" title="4 sterren"></label>  <input class="ffb__star-input" type="radio" name="rating" id="ffb-star-3" value="3"> <label class="ffb__star-label" for="ffb-star-3" title="3 sterren"></label>  <input class="ffb__star-input" type="radio" name="rating" id="ffb-star-2" value="2"> <label class="ffb__star-label" for="ffb-star-2" title="2 sterren"></label>  <input class="ffb__star-input" type="radio" name="rating" id="ffb-star-1" value="1"> <label class="ffb__star-label" for="ffb-star-1" title="1 sterren"></label>  </div> </div> <div class="ffb__field"> <label class="ffb__label" for="ffb-naam">Naam</label> <input class="ffb__input" id="ffb-naam" type="text" placeholder="Jouw naam"> </div> <div class="ffb__field"> <label class="ffb__label" for="ffb-bericht">Jouw feedback</label> <textarea class="ffb__textarea" id="ffb-bericht" rows="4" placeholder="Vertel ons hoe je de samenwerking hebt ervaren…" required></textarea> </div> <button class="ffb__btn" type="submit">Feedback versturen</button> </form> </div> </section>

<style>
.ffb{background:#fff;padding:4rem 1.5rem}
.ffb__inner{max-width:580px;margin:0 auto}
.ffb__headline{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.ffb__sub{color:#666;font-size:.95rem;margin:0 0 2rem;line-height:1.6}
.ffb__form{display:flex;flex-direction:column;gap:1.25rem}
.ffb__label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#555;display:block;margin-bottom:.4rem}
.ffb__stars-field{display:flex;flex-direction:column}
.ffb__stars{display:flex;flex-direction:row-reverse;gap:.2rem;width:fit-content}
.ffb__star-input{display:none}
.ffb__star-label{font-size:2rem;color:#d4d4d4;cursor:pointer;transition:color .15s;line-height:1}
.ffb__stars:hover .ffb__star-label,.ffb__star-label:hover~.ffb__star-label,.ffb__star-input:checked~.ffb__star-label{color:#f59e0b}
.ffb__star-input:checked+.ffb__star-label{color:#f59e0b}
.ffb__field{display:flex;flex-direction:column;gap:.4rem}
.ffb__input,.ffb__textarea{padding:.7rem 1rem;border:1.5px solid #e0e0e0;border-radius:8px;font-size:.95rem;color:var(--color-primary, #0a0a0a);background:#fafafa;outline:none;font-family:inherit;transition:border-color .2s;width:100%;box-sizing:border-box}
.ffb__input:focus,.ffb__textarea:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.ffb__textarea{resize:vertical}
.ffb__btn{padding:.85rem 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}
.ffb__btn:hover{opacity:.88}
</style>