src/components/forms/FormQuote.astro
---
/**
* FormQuote — offerte-aanvraagformulier met diensten, budget en planning.
*
* Props:
* - headline?: string
* - sub?: string
*/
interface Props {
headline?: string;
sub?: string;
}
const {
headline = 'Vraag een offerte aan',
sub = 'Vul het formulier in en ontvang binnen 2 werkdagen een offerte op maat.',
} = Astro.props;
---
<section class="bl-section fqt-section">
<div class="bl-inner bl-inner--narrow fqt-wrap">
{(headline || sub) && (
<div class="fqt-header">
{headline && <h2 class="fqt-heading">{headline}</h2>}
{sub && <p class="fqt-subtext">{sub}</p>}
</div>
)}
<form class="fqt-form" novalidate>
<div class="fqt-row">
<div class="fqt-field">
<label class="fqt-label" for="fqt-name">Naam *</label>
<input class="fqt-input" type="text" id="fqt-name" name="name" placeholder="Je naam" autocomplete="name" required />
</div>
<div class="fqt-field">
<label class="fqt-label" for="fqt-email">E-mailadres *</label>
<input class="fqt-input" type="email" id="fqt-email" name="email" placeholder="Je e-mailadres" autocomplete="email" required />
</div>
</div>
<div class="fqt-row">
<div class="fqt-field">
<label class="fqt-label" for="fqt-company">Bedrijf *</label>
<input class="fqt-input" type="text" id="fqt-company" name="company" placeholder="Je bedrijfsnaam" autocomplete="organization" required />
</div>
<div class="fqt-field">
<label class="fqt-label" for="fqt-phone">Telefoonnummer</label>
<input class="fqt-input" type="tel" id="fqt-phone" name="phone" placeholder="Je telefoonnummer" autocomplete="tel" />
</div>
</div>
<div class="fqt-field">
<label class="fqt-label">Welke diensten heb je nodig? *</label>
<div class="fqt-checks">
<label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Zoekadvertenties" /> Zoekadvertenties</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Social Ads" /> Social Ads</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="SEO" /> SEO</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Content marketing" /> Content marketing</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="E-mail marketing" /> E-mail marketing</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Website bouwen" /> Website bouwen</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Branding" /> Branding</label><label class="fqt-check-item"><input class="fqt-check" type="checkbox" name="services" value="Anders" /> Anders</label>
</div>
</div>
<div class="fqt-row">
<div class="fqt-field">
<label class="fqt-label" for="fqt-budget">Maandelijks budget</label>
<select class="fqt-select" id="fqt-budget" name="budget">
<option value="">Selecteer budget</option>
<option>Minder dan €1.000</option>
<option>€1.000 – €2.500</option>
<option>€2.500 – €5.000</option>
<option>€5.000 – €10.000</option>
<option>Meer dan €10.000</option>
</select>
</div>
<div class="fqt-field">
<label class="fqt-label" for="fqt-timeline">Gewenste startdatum</label>
<input class="fqt-input" type="date" id="fqt-timeline" name="start_date" />
</div>
</div>
<div class="fqt-field">
<label class="fqt-label" for="fqt-notes">Aanvullende informatie</label>
<textarea class="fqt-textarea" id="fqt-notes" name="notes" rows="4" placeholder="Beschrijf je project, doelen of specifieke wensen..."></textarea>
</div>
<button class="fqt-submit" type="submit">Offerte aanvragen</button>
</form>
</div>
</section>
<style>
.fqt-header{margin-bottom:2rem}
.fqt-heading{font-size:1.75rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.fqt-subtext{font-size:1rem;color:#666;margin:0;line-height:1.6}
.fqt-form{display:flex;flex-direction:column;gap:1.25rem}
.fqt-row{display:grid;grid-template-columns:1fr;gap:1.25rem}
.fqt-field{display:flex;flex-direction:column;gap:.4rem}
.fqt-label{font-size:1rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fqt-input,.fqt-select,.fqt-textarea{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:1rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box;width:100%}
.fqt-input:focus,.fqt-select:focus,.fqt-textarea:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fqt-textarea{resize:vertical;min-height:100px}
.fqt-checks{display:flex;flex-wrap:wrap;gap:.5rem}
.fqt-check-item{display:flex;align-items:center;gap:.4rem;padding:.5rem .95rem;background:#f5f5f5;border-radius:20px;font-size:.9375rem;color:#374151;cursor:pointer;border:1.5px solid transparent;transition:border-color .15s}
.fqt-check-item:has(input:checked){border-color:var(--color-accent, #6366f1);background:#eef2ff;color:var(--color-accent, #6366f1)}
.fqt-check{display:none}
.fqt-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}
.fqt-submit:hover{opacity:.88}
@media(min-width:600px){.fqt-row{grid-template-columns:1fr 1fr}}
</style>