FormJobApplication Forms

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

<section class="fja"> <div class="fja__inner"> <div class="fja__header"> <span class="fja__position-badge">Vacature: Google Ads Specialist</span> <h2 class="fja__headline">Solliciteer bij BLURR</h2> <p class="fja__sub">Overtuig ons met jouw motivatie en ervaring. We lezen elke sollicitatie persoonlijk.</p> </div> <form class="fja__form" novalidate> <div class="fja__row"> <div class="fja__field"> <label class="fja__label" for="fja-voornaam">Voornaam</label> <input class="fja__input" id="fja-voornaam" type="text" placeholder="Sofie" required> </div> <div class="fja__field"> <label class="fja__label" for="fja-achternaam">Achternaam</label> <input class="fja__input" id="fja-achternaam" type="text" placeholder="Vermeer" required> </div> </div> <div class="fja__row"> <div class="fja__field"> <label class="fja__label" for="fja-email">E-mail</label> <input class="fja__input" id="fja-email" type="email" placeholder="sofie@mail.nl" required> </div> <div class="fja__field"> <label class="fja__label" for="fja-tel">Telefoon</label> <input class="fja__input" id="fja-tel" type="tel" placeholder="+31 6 12 34 56 78"> </div> </div> <div class="fja__field"> <label class="fja__label" for="fja-linkedin">LinkedIn-profiel (optioneel)</label> <input class="fja__input" id="fja-linkedin" type="url" placeholder="https://linkedin.com/in/sofie-vermeer"> </div> <div class="fja__field"> <label class="fja__label" for="fja-motivatie">Motivatiebrief</label> <textarea class="fja__textarea" id="fja-motivatie" rows="5" placeholder="Vertel ons waarom jij de ideale kandidaat bent voor deze functie…" required></textarea> </div> <div class="fja__field"> <label class="fja__label">CV uploaden</label> <label class="fja__upload" for="fja-cv"> <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line> </svg> <span class="fja__upload-text">Sleep je CV hierheen of <strong>klik om te uploaden</strong></span> <span class="fja__upload-hint">PDF of Word, max. 5 MB</span> <input id="fja-cv" type="file" accept=".pdf,.doc,.docx" class="fja__file-hidden"> </label> </div> <button class="fja__btn" type="submit">Sollicitatie versturen</button> </form> </div> </section>

<style>
.fja{background:#fff;padding:4rem 1.5rem}
.fja__inner{max-width:680px;margin:0 auto}
.fja__header{margin-bottom:2rem}
.fja__position-badge{display:inline-block;background:#ede9fe;color:var(--color-accent, #6366f1);font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;margin-bottom:.75rem}
.fja__headline{font-size:1.75rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 .5rem}
.fja__sub{color:#666;font-size:.95rem;margin:0;line-height:1.6}
.fja__form{display:flex;flex-direction:column;gap:1.25rem}
.fja__row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.fja__field{display:flex;flex-direction:column;gap:.4rem}
.fja__label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#555}
.fja__input,.fja__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}
.fja__input:focus,.fja__textarea:focus{border-color:var(--color-accent, #6366f1);background:#fff}
.fja__textarea{resize:vertical}
.fja__upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;border:2px dashed #d4d4d8;border-radius:10px;cursor:pointer;text-align:center;color:#888;transition:border-color .2s,background .2s;background:#fafafa}
.fja__upload:hover{border-color:var(--color-accent, #6366f1);background:#f3f4ff;color:var(--color-accent, #6366f1)}
.fja__upload svg{opacity:.6}
.fja__upload-text{font-size:.9rem}
.fja__upload-hint{font-size:.78rem;color:#aaa}
.fja__file-hidden{display:none}
.fja__btn{padding:.9rem 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}
.fja__btn:hover{opacity:.88}
.fja__row{grid-template-columns:1fr}
</style>