src/components/forms/FormSurvey.astro
---
// FormSurvey, recovered from blurr-components.pages.dev
---
<div class="fsv-wrap"> <div class="fsv-header"> <h2 class="fsv-heading">Klantfeedback formulier</h2> <p class="fsv-subtext">Je feedback helpt ons om onze dienstverlening continu te verbeteren. Invullen duurt minder dan 2 minuten.</p> </div> <form class="fsv-form" novalidate> <fieldset class="fsv-fieldset"> <legend class="fsv-legend">Hoe tevreden ben je over onze samenwerking?</legend> <div class="fsv-scale"> <label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="1" required> <span class="fsv-scale-num">1</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="2" required> <span class="fsv-scale-num">2</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="3" required> <span class="fsv-scale-num">3</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="4" required> <span class="fsv-scale-num">4</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="5" required> <span class="fsv-scale-num">5</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="6" required> <span class="fsv-scale-num">6</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="7" required> <span class="fsv-scale-num">7</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="8" required> <span class="fsv-scale-num">8</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="9" required> <span class="fsv-scale-num">9</span> </label><label class="fsv-scale-item"> <input class="fsv-scale-input" type="radio" name="overall_score" value="10" required> <span class="fsv-scale-num">10</span> </label> </div> <div class="fsv-scale-labels"> <span>Heel ontevreden</span> <span>Heel tevreden</span> </div> </fieldset> <fieldset class="fsv-fieldset"> <legend class="fsv-legend">Hoe beoordeel je de communicatie?</legend> <div class="fsv-radios"> <label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="communication" value="Uitstekend" required> Uitstekend </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="communication" value="Goed" required> Goed </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="communication" value="Voldoende" required> Voldoende </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="communication" value="Matig" required> Matig </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="communication" value="Slecht" required> Slecht </label> </div> </fieldset> <div class="fsv-field"> <label class="fsv-label" for="fsv-best">Wat gaat er goed?</label> <textarea class="fsv-textarea" id="fsv-best" name="positive" rows="3" placeholder="Bijv. snelle responstijden, goede rapportages..."></textarea> </div> <div class="fsv-field"> <label class="fsv-label" for="fsv-improve">Wat kan er beter?</label> <textarea class="fsv-textarea" id="fsv-improve" name="improvement" rows="3" placeholder="Wees gerust eerlijk, we leren graag van je feedback."></textarea> </div> <fieldset class="fsv-fieldset"> <legend class="fsv-legend">Zou je BLURR aanbevelen aan anderen?</legend> <div class="fsv-radios fsv-radios--inline"> <label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="recommend" value="Zeker wel" required> Zeker wel </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="recommend" value="Waarschijnlijk wel" required> Waarschijnlijk wel </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="recommend" value="Misschien" required> Misschien </label><label class="fsv-radio-item"> <input class="fsv-radio" type="radio" name="recommend" value="Waarschijnlijk niet" required> Waarschijnlijk niet </label> </div> </fieldset> <div class="fsv-field"> <label class="fsv-label" for="fsv-name">Naam (optioneel)</label> <input class="fsv-input" type="text" id="fsv-name" name="name" placeholder="Jouw naam" autocomplete="name"> </div> <button class="fsv-submit" type="submit">Feedback versturen</button> </form> </div>
<style>
.fsv-wrap{max-width:600px;padding:2rem 0}
.fsv-header{margin-bottom:2rem}
.fsv-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.fsv-subtext{font-size:.95rem;color:#666;margin:0}
.fsv-form{display:flex;flex-direction:column;gap:1.75rem}
.fsv-fieldset{border:none;padding:0;margin:0}
.fsv-legend{font-size:.95rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin-bottom:1rem}
.fsv-scale{display:flex;gap:.4rem;flex-wrap:wrap}
.fsv-scale-item{cursor:pointer}
.fsv-scale-input{display:none}
.fsv-scale-num{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:#f5f5f5;font-size:.85rem;font-weight:600;color:#555;border:1.5px solid transparent;transition: opacity, transform, background-color, color, border-color, box-shadow, filter .15s}
.fsv-scale-input:checked+.fsv-scale-num{background:var(--color-accent, #6366f1);color:#fff;border-color:var(--color-accent, #6366f1)}
.fsv-scale-labels{display:flex;justify-content:space-between;font-size:.75rem;color:#999;margin-top:.4rem}
.fsv-radios{display:flex;flex-direction:column;gap:.5rem}
.fsv-radios--inline{flex-direction:row;flex-wrap:wrap;gap:.5rem}
.fsv-radio-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color: #e8e8e8;cursor:pointer;padding:.55rem 1rem;background:#f9f9f9;border-radius:8px;border:1.5px solid transparent}
.fsv-radio-item:has(input:checked){border-color:var(--color-accent, #6366f1);background:#eef2ff;color:var(--color-accent, #6366f1)}
.fsv-radio{accent-color:var(--color-accent, #6366f1)}
.fsv-field{display:flex;flex-direction:column;gap:.4rem}
.fsv-label{font-size:.85rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fsv-input,.fsv-textarea{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.95rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fsv-input:focus,.fsv-textarea:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fsv-textarea{resize:vertical;min-height:90px}
.fsv-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}
.fsv-submit:hover{opacity:.88}
</style>