FormDownload Forms

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

<div class="fdl-wrap"> <div class="fdl-resource"> <div class="fdl-cover"> <img data-allow-img class="fdl-cover-img" src="/img/ext/photo-1581291518633-83b4ebd1d83e-w400-ea3a91.jpg" alt="De ultieme Google Ads gids voor Nederlandse bedrijven" loading="lazy" decoding="async" > <div class="fdl-cover-badge">Gratis whitepaper</div> </div> <div class="fdl-resource-info"> <h3 class="fdl-resource-title">De ultieme Google Ads gids voor Nederlandse bedrijven</h3> <ul class="fdl-benefits"> <li class="fdl-benefit"><span aria-hidden="true">&#10003;</span> 42 pagina&#39;s vol praktische tips</li><li class="fdl-benefit"><span aria-hidden="true">&#10003;</span> Exclusieve benchmark data 2024</li><li class="fdl-benefit"><span aria-hidden="true">&#10003;</span> Campagnestructuren die werken</li> </ul> </div> </div> <div class="fdl-form-area"> <h2 class="fdl-heading">Download de whitepaper gratis</h2> <form class="fdl-form" novalidate> <div class="fdl-field"> <label class="fdl-label" for="fdl-name">Voornaam *</label> <input class="fdl-input" type="text" id="fdl-name" name="name" placeholder="Jouw naam" required autocomplete="given-name"> </div> <div class="fdl-field"> <label class="fdl-label" for="fdl-email">Zakelijk e-mailadres *</label> <input class="fdl-input" type="email" id="fdl-email" name="email" placeholder="jij@bedrijf.nl" required autocomplete="email"> </div> <div class="fdl-field"> <label class="fdl-label" for="fdl-company">Bedrijfsnaam</label> <input class="fdl-input" type="text" id="fdl-company" name="company" placeholder="Jouw bedrijf" autocomplete="organization"> </div> <label class="fdl-check-label"> <input class="fdl-check" type="checkbox" name="newsletter">
Ja, stuur mij ook de BLURR marketing nieuwsbrief
</label> <button class="fdl-submit" type="submit">Download nu gratis &rarr;</button> <p class="fdl-disclaimer">We delen je gegevens nooit met derden. <a href="/privacy" class="fdl-link">Privacyverklaring</a></p> </form> </div> </div>

<style>
.fdl-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;padding:2rem 0}
.fdl-wrap{grid-template-columns:1fr}
.fdl-resource{display:flex;flex-direction:column;gap:1.5rem}
.fdl-cover{position:relative}
.fdl-cover-img{width:100%;height:220px;object-fit:cover;border-radius:10px;display:block}
.fdl-cover-badge{position:absolute;top:1rem;left:1rem;background:var(--color-accent, #6366f1);color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .7rem;border-radius:4px}
.fdl-resource-title{font-size:1.2rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0 0 1rem}
.fdl-benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.fdl-benefit{font-size:.9rem;color: #e8e8e8;display:flex;gap:.5rem;align-items:flex-start}
.fdl-benefit span{color:#22c55e;font-weight:700;flex-shrink:0}
.fdl-heading{font-size:1.4rem;font-weight:800;color:var(--color-primary, #0a0a0a);margin:0 0 1.5rem}
.fdl-form{display:flex;flex-direction:column;gap:1rem}
.fdl-field{display:flex;flex-direction:column;gap:.35rem}
.fdl-label{font-size:.83rem;font-weight:600;color:var(--color-primary, #0a0a0a)}
.fdl-input{padding:.7rem .9rem;border:1.5px solid #ddd;border-radius:8px;font-size:.925rem;color:var(--color-primary, #0a0a0a);background:#fff;transition:border-color .2s;font-family:inherit;box-sizing:border-box}
.fdl-input:focus{outline:none;border-color:var(--color-accent, #6366f1);box-shadow:0 0 0 3px #6366f11f}
.fdl-check-label{display:flex;align-items:flex-start;gap:.5rem;font-size:.83rem;color:#555;cursor:pointer}
.fdl-check{accent-color:var(--color-accent, #6366f1);flex-shrink:0;margin-top:2px}
.fdl-submit{padding:.9rem;background:var(--color-accent, #6366f1);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .2s}
.fdl-submit:hover{opacity:.88}
.fdl-disclaimer{font-size:.78rem;color:#999;margin:.25rem 0 0}
.fdl-link{color:var(--color-accent, #6366f1)}
</style>