src/components/forms/FormComplex.astro
---
interface Props {
heading?: string;
subtext?: string;
submitLabel?: string;
}
const {
heading = "Uitgebreid projectaanvraagformulier",
subtext = "Vul dit formulier zo volledig mogelijk in. Hoe meer informatie je geeft, hoe gerichter we onze offerte kunnen opstellen.",
submitLabel = "Aanvraag indienen",
} = Astro.props;
---
<div class="fcx-wrap">
<div class="fcx-header">
{heading && <h2 class="fcx-heading">{heading}</h2>}
{subtext && <p class="fcx-subtext">{subtext}</p>}
</div>
<form class="fcx-form" onsubmit="return false;" novalidate>
<fieldset class="fcx-section">
<legend class="fcx-section-title">Contactgegevens</legend>
<div class="fcx-grid-3">
<div class="fcx-field">
<label class="fcx-label" for="fcx-first">Voornaam *</label>
<input class="fcx-input" type="text" id="fcx-first" name="first_name" placeholder="Jan" required />
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-last">Achternaam *</label>
<input class="fcx-input" type="text" id="fcx-last" name="last_name" placeholder="de Vries" required />
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-title">Functietitel</label>
<input class="fcx-input" type="text" id="fcx-title" name="job_title" placeholder="Marketing Director" />
</div>
</div>
<div class="fcx-grid-2">
<div class="fcx-field">
<label class="fcx-label" for="fcx-email">E-mailadres *</label>
<input class="fcx-input" type="email" id="fcx-email" name="email" placeholder="jan@bedrijf.nl" required />
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-phone">Telefoonnummer</label>
<input class="fcx-input" type="tel" id="fcx-phone" name="phone" placeholder="+31 6 00 00 00 00" />
</div>
</div>
</fieldset>
<fieldset class="fcx-section">
<legend class="fcx-section-title">Bedrijfsinformatie</legend>
<div class="fcx-grid-2">
<div class="fcx-field">
<label class="fcx-label" for="fcx-company">Bedrijfsnaam *</label>
<input class="fcx-input" type="text" id="fcx-company" name="company" placeholder="Bedrijf BV" required />
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-kvk">KvK-nummer</label>
<input class="fcx-input" type="text" id="fcx-kvk" name="kvk" placeholder="12345678" maxlength="8" />
</div>
</div>
<div class="fcx-grid-3">
<div class="fcx-field">
<label class="fcx-label" for="fcx-sector">Branche *</label>
<select class="fcx-select" id="fcx-sector" name="sector" required>
<option value="">Selecteer</option>
<option>E-commerce</option>
<option>B2B dienstverlening</option>
<option>SaaS / Tech</option>
<option>Retail</option>
<option>Zorg</option>
<option>Horeca</option>
<option>Overheid</option>
<option>Anders</option>
</select>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-size">Bedrijfsgrootte</label>
<select class="fcx-select" id="fcx-size" name="company_size">
<option value="">Selecteer</option>
<option>1–10 medewerkers</option>
<option>11–50</option>
<option>51–200</option>
<option>200+</option>
</select>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-revenue">Jaaromzet (indicatief)</label>
<select class="fcx-select" id="fcx-revenue" name="revenue">
<option value="">Selecteer</option>
<option>< €250K</option>
<option>€250K – €1M</option>
<option>€1M – €5M</option>
<option>€5M+</option>
</select>
</div>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-website">Website URL</label>
<input class="fcx-input" type="url" id="fcx-website" name="website" placeholder="https://jouwbedrijf.nl" />
</div>
</fieldset>
<fieldset class="fcx-section">
<legend class="fcx-section-title">Projectdetails</legend>
<div class="fcx-field">
<label class="fcx-label">Gewenste diensten * (meerdere mogelijk)</label>
<div class="fcx-checkgrid">
{["Google Ads", "Meta Ads", "LinkedIn Ads", "SEO", "Content marketing", "E-mail marketing", "Website bouwen", "Branding & design", "Analytics setup", "Strategie consult"].map(s => (
<label class="fcx-check-item">
<input class="fcx-check" type="checkbox" name="services" value={s} />
<span>{s}</span>
</label>
))}
</div>
</div>
<div class="fcx-grid-2">
<div class="fcx-field">
<label class="fcx-label" for="fcx-budget">Maandelijks budget</label>
<select class="fcx-select" id="fcx-budget" name="budget">
<option value="">Selecteer</option>
<option>< €1.000</option>
<option>€1.000 – €2.500</option>
<option>€2.500 – €5.000</option>
<option>€5.000 – €10.000</option>
<option>> €10.000</option>
</select>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-start">Gewenste startdatum</label>
<input class="fcx-input" type="date" id="fcx-start" name="start_date" />
</div>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-goal">Primaire doelstelling *</label>
<select class="fcx-select" id="fcx-goal" name="primary_goal" required>
<option value="">Selecteer doelstelling</option>
<option>Meer online omzet genereren</option>
<option>Lead generatie voor sales</option>
<option>Naamsbekendheid opbouwen</option>
<option>Klantretentie verbeteren</option>
<option>Nieuwe markten betreden</option>
</select>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-description">Projectomschrijving *</label>
<textarea class="fcx-textarea" id="fcx-description" name="description" rows="5" placeholder="Beschrijf je project, huidige situatie, uitdagingen en verwachtingen..." required></textarea>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-competitors">Bekende concurrenten</label>
<input class="fcx-input" type="text" id="fcx-competitors" name="competitors" placeholder="Bijv. Bedrijf A, Bedrijf B" />
</div>
</fieldset>
<fieldset class="fcx-section">
<legend class="fcx-section-title">Overige informatie</legend>
<div class="fcx-field">
<label class="fcx-label" for="fcx-source">Hoe heb je ons gevonden?</label>
<select class="fcx-select" id="fcx-source" name="source">
<option value="">Selecteer</option>
<option>Google / zoekmachine</option>
<option>LinkedIn</option>
<option>Aanbeveling</option>
<option>Social media</option>
<option>Evenement</option>
<option>Anders</option>
</select>
</div>
<div class="fcx-field">
<label class="fcx-label" for="fcx-remarks">Overige opmerkingen</label>
<textarea class="fcx-textarea" id="fcx-remarks" name="remarks" rows="3" placeholder="Alles wat niet in bovenstaande velden past..."></textarea>
</div>
<div class="fcx-checks-final">
<label class="fcx-check-label">
<input class="fcx-check-single" type="checkbox" name="terms" required />
Ik ga akkoord met de <a href="/voorwaarden" class="fcx-link">algemene voorwaarden</a> *
</label>
<label class="fcx-check-label">
<input class="fcx-check-single" type="checkbox" name="privacy" required />
Ik ga akkoord met de <a href="/privacy" class="fcx-link">privacyverklaring</a> *
</label>
<label class="fcx-check-label">
<input class="fcx-check-single" type="checkbox" name="newsletter" />
Stuur mij de maandelijkse BLURR nieuwsbrief
</label>
</div>
</fieldset>
<button class="fcx-submit" type="submit">{submitLabel}</button>
</form>
</div>
<style>
.fcx-wrap { max-width: 760px; padding: 2rem 0; }
.fcx-header { margin-bottom: 2rem; }
.fcx-heading { font-size: 1.75rem; font-weight: 800; color: var(--color-primary, #0a0a0a); margin: 0 0 0.5rem; }
.fcx-subtext { font-size: 0.95rem; color: #666; margin: 0; line-height: 1.6; }
.fcx-form { display: flex; flex-direction: column; gap: 2rem; }
.fcx-section { border: 1px solid #e5e5e5; border-radius: 12px; padding: 1.75rem; margin: 0; }
.fcx-section-title {
font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
color: #999; padding: 0 0.5rem; margin-bottom: 1.25rem;
}
.fcx-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
.fcx-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }
@media (max-width: 600px) {
.fcx-grid-2, .fcx-grid-3 { grid-template-columns: 1fr; }
}
.fcx-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
.fcx-field:last-child { margin-bottom: 0; }
.fcx-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary, #0a0a0a); }
.fcx-input, .fcx-select, .fcx-textarea {
padding: 0.65rem 0.875rem; border: 1.5px solid #ddd; border-radius: 8px;
font-size: 0.9rem; color: var(--color-primary, #0a0a0a); background: #fff;
transition: border-color 0.2s; font-family: inherit; box-sizing: border-box; width: 100%;
}
.fcx-input:focus, .fcx-select:focus, .fcx-textarea:focus { outline: none; border-color: var(--color-accent, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.fcx-textarea { resize: vertical; min-height: 100px; }
.fcx-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.fcx-check-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; background: #f9f9f9; border-radius: 7px; font-size: 0.85rem; color: #444; cursor: pointer; border: 1.5px solid transparent; }
.fcx-check-item:has(input:checked) { border-color: var(--color-accent, #6366f1); background: #eef2ff; color: var(--color-accent, #6366f1); }
.fcx-check { accent-color: var(--color-accent, #6366f1); }
.fcx-checks-final { display: flex; flex-direction: column; gap: 0.6rem; }
.fcx-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: #555; cursor: pointer; line-height: 1.4; }
.fcx-check-single { accent-color: var(--color-accent, #6366f1); flex-shrink: 0; margin-top: 2px; }
.fcx-link { color: var(--color-accent, #6366f1); text-decoration: none; }
.fcx-submit {
padding: 1rem 2.5rem; background: var(--color-accent, #6366f1); color: #fff;
border: none; border-radius: 10px; font-size: 1rem; font-weight: 700;
cursor: pointer; transition: opacity 0.2s, transform 0.15s; align-self: flex-start;
}
.fcx-submit:hover { opacity: 0.88; transform: translateY(-1px); }
</style>
Props
| Prop | Type | Default | Beschrijving |
|---|---|---|---|
headline | string | — | Formuliertitel |
* = verplicht