FormComplex Forms

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

<div class="fcx-wrap"> <div class="fcx-header"> <h2 class="fcx-heading">Uitgebreid projectaanvraagformulier</h2> <p class="fcx-subtext">Vul dit formulier zo volledig mogelijk in. Hoe meer informatie je geeft, hoe gerichter we onze offerte kunnen opstellen.</p> </div> <form class="fcx-form" 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>&lt; €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"> <label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Google Ads"> <span>Google Ads</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Meta Ads"> <span>Meta Ads</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="LinkedIn Ads"> <span>LinkedIn Ads</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="SEO"> <span>SEO</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Content marketing"> <span>Content marketing</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="E-mail marketing"> <span>E-mail marketing</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Website bouwen"> <span>Website bouwen</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Branding &#38; design"> <span>Branding &amp; design</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Analytics setup"> <span>Analytics setup</span> </label><label class="fcx-check-item"> <input class="fcx-check" type="checkbox" name="services" value="Strategie consult"> <span>Strategie consult</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>&lt; €1.000</option> <option>€1.000 – €2.500</option> <option>€2.500 – €5.000</option> <option>€5.000 – €10.000</option> <option>&gt; €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">Aanvraag indienen</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 .5rem}
.fcx-subtext{font-size:.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:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#999;padding: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}
.fcx-grid-2,.fcx-grid-3{grid-template-columns:1fr}
.fcx-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}
.fcx-field:last-child{margin-bottom:0}
.fcx-label{font-size:.82rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fcx-input,.fcx-select,.fcx-textarea{padding:.65rem .875rem;border:1.5px solid #ddd;border-radius:8px;font-size:.9rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .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 #6366f11f}
.fcx-textarea{resize:vertical;min-height:100px}
.fcx-checkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.fcx-check-item{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;background:#f9f9f9;border-radius:7px;font-size:.85rem;color: #e8e8e8;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:.6rem}
.fcx-check-label{display:flex;align-items:flex-start;gap:.5rem;font-size:.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 .2s,transform .15s;align-self:flex-start}
.fcx-submit:hover{opacity:.88;transform:translateY(-1px)}
</style>