Landingspagina kennismakingsgesprek · Bakkum & De Ruiter administratie, Alkmaar New

Landing page for a free introductory meeting at an accounting office: the promise on the left, a three-field form on the right, then the clients in pictures, the two people you will meet, fixed prices, reviews, FAQ and the same form again at the bottom.

View full screen ↗

Kennismaken kost u niets

Drie kwartier met een van ons, op kantoor aan de Oudegracht, bij u in de zaak of via video. U vertelt hoe uw bedrijf draait. Wij zeggen eerlijk wat u aan ons hebt en wat dat per maand kost, ook als het antwoord is dat u het prima zelf kunt.

Spreekkamer van Bakkum & De Ruiter met uitzicht op de Oudegracht

Mirjam Bakkum loopt met een ondernemer een overzicht van haar cijfers door

Wat u na drie kwartier weet

Welke aangiftes u het komende jaar moet doen, en wanneer.
Wat u zelf blijft doen en wat wij overnemen.
Of een bv bij uw winst nu al iets oplevert. Vaak nog niet.
Een vaste prijs per maand, op papier mee naar huis.

Voor wie we werken

Bakker legt brood in de etalage — **Bakkerij Kooijman, Heiloo.** Zes man personeel, loonadministratie en kwartaalcijfers. 285 euro per maand.

Schilder laadt ladders in zijn bus — **Schildersbedrijf Visser, Bergen.** Zzp, sinds dit jaar met een leerling. 85 euro per maand.

Bloemist aan haar toonbank — **Bloem & Zo, Alkmaar.** Overgestapt van een landelijk kantoor in 2024. 115 euro per maand.

U spreekt Mirjam of Sander

Mirjam Bakkum is belastingadviseur (RB) en deed twaalf jaar de aangiftes bij een groot kantoor in Amsterdam. Sander de Ruiter is accountant-administratieconsulent en kent de agrarische en bouwbedrijven in de kop van Noord-Holland. Wie het gesprek voert, houdt daarna ook uw dossier. Geen accountmanager ertussen.

Het kantoorpand aan de Oudegracht in Alkmaar

Ik kwam met een schoenendoos bonnetjes en ging naar huis met een planning voor het hele jaar. Dat gesprek was echt gratis.
Lotte Vermeulen, Bloem & Zo, Alkmaar

Sander zei dat een bv voor mij nog twee jaar te vroeg was. Mijn vorige kantoor had hem al opgericht.
Kees Visser, Bergen

Ze nemen de telefoon op. Dat klinkt klein, maar ik was het niet meer gewend.
Anouk Kooijman, Heiloo

Wat het daarna kost

Na het gesprek krijgt u een vaste maandprijs. Daar zit alles in wat we afspreken, ook vragen tussendoor. Een paar voorbeelden uit dit jaar:

Zzp, inkomstenbelasting en btwvanaf 65 euro per maand
Vof of maatschap met twee vennotenvanaf 115 euro per maand
Bv met jaarrekening en vennootschapsbelastingvanaf 235 euro per maand
Loonadministratie12 euro per strook

Koffie met een stroopwafel op de vergadertafel

Vragen vooraf

Is het gesprek echt gratis?

Ja. U krijgt geen rekening en zit nergens aan vast. Ongeveer de helft van de mensen die we spreken wordt daarna klant.

Wat moet ik meenemen?

Uw laatste aangifte inkomstenbelasting en een idee van uw omzet. Bonnetjes en bankafschriften hoeven nog niet.

Ik zit al bij een ander kantoor. Kan dat?

Zeker. Bij een overstap vragen wij uw dossier op bij het oude kantoor. U hoeft daar zelf niets voor te regelen.

Werken jullie ook buiten Alkmaar?

De meeste klanten zitten tussen Den Helder en Zaandam. Via video werken we voor ondernemers in heel Nederland.

Welke software gebruiken jullie?

We werken met de boekhoudpakketten die u al hebt. Hebt u nog niets, dan zoeken we samen iets dat bij uw bedrijf past.

Drie kwartier, en u weet waar u staat

How to use it

Paste the HTML where the page examples should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Landingspagina kennismakingsgesprek · Bakkum & De Ruiter administratie, Alkmaar · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bdr">
<div class="bdr__kop" role="banner"><div class="bdr__in bdr__kop-in">
  <a href="#" class="bdr__logo" aria-label="Bakkum &amp; De Ruiter, naar home">Bakkum &amp; De Ruiter<span>administratie en belastingadvies</span></a>
  <a href="tel:0721234567" class="bdr__bel">072 123 4567</a>
</div></div>

<div class="bdr__hero"><div class="bdr__in bdr__hero-in">
  <div class="bdr__belofte">
    <h1 class="bdr__h1">Kennismaken kost u niets</h1>
    <p class="bdr__lead">Drie kwartier met een van ons, op kantoor aan de Oudegracht, bij u in de zaak of via video. U vertelt hoe uw bedrijf draait. Wij zeggen eerlijk wat u aan ons hebt en wat dat per maand kost, ook als het antwoord is dat u het prima zelf kunt.</p>
    <figure class="bdr__foto bdr__foto--hero"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-1.webp" alt="Spreekkamer van Bakkum &amp; De Ruiter met uitzicht op de Oudegracht" width="1408" height="768"></figure>
  </div>
  <form class="bdr__form" id="bdr-form" novalidate>
    <h2 class="bdr__h3">Plan het gesprek</h2>
    <label class="bdr__f"><span>Uw naam</span><input name="naam" autocomplete="name" required></label>
    <label class="bdr__f"><span>Telefoonnummer</span><input name="tel" type="tel" autocomplete="tel" required></label>
    <label class="bdr__f"><span>Waar gaat het over?</span><select name="over"><option>Ik begin voor mezelf</option><option>Ik wil overstappen van kantoor</option><option>Ik denk aan een bv</option><option>Iets anders</option></select></label>
    <p class="bdr__fout" hidden>Vul uw naam en een telefoonnummer van tien cijfers in.</p>
    <button type="submit" class="bdr__knop">Plan mijn kennismaking</button>
    <p class="bdr__noot">Mirjam of Sander belt binnen één werkdag om een tijd te prikken. Geen nieuwsbrief, geen verkoopbelletjes.</p>
    <p class="bdr__klaar" hidden></p>
  </form>
</div></div>

<div class="bdr__mee"><div class="bdr__in bdr__mee-in">
  <figure class="bdr__foto bdr__mee-foto"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-4.webp" alt="Mirjam Bakkum loopt met een ondernemer een overzicht van haar cijfers door" width="900" height="491" loading="lazy"></figure>
  <div class="bdr__mee-txt">
    <h2 class="bdr__h2">Wat u na drie kwartier weet</h2>
    <ul class="bdr__lijst">
      <li>Welke aangiftes u het komende jaar moet doen, en wanneer.</li>
      <li>Wat u zelf blijft doen en wat wij overnemen.</li>
      <li>Of een bv bij uw winst nu al iets oplevert. Vaak nog niet.</li>
      <li>Een vaste prijs per maand, op papier mee naar huis.</li>
    </ul>
  </div>
</div></div>

<div class="bdr__wie"><div class="bdr__in">
  <h2 class="bdr__h2">Voor wie we werken</h2>
  <div class="bdr__mozaiek">
    <figure class="bdr__m bdr__m--groot"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-5.webp" alt="Bakker legt brood in de etalage" width="900" height="491" loading="lazy"><figcaption><strong>Bakkerij Kooijman, Heiloo.</strong> Zes man personeel, loonadministratie en kwartaalcijfers. 285 euro per maand.</figcaption></figure>
    <figure class="bdr__m"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-6.webp" alt="Schilder laadt ladders in zijn bus" width="900" height="491" loading="lazy"><figcaption><strong>Schildersbedrijf Visser, Bergen.</strong> Zzp, sinds dit jaar met een leerling. 85 euro per maand.</figcaption></figure>
    <figure class="bdr__m"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-9.webp" alt="Bloemist aan haar toonbank" width="900" height="491" loading="lazy"><figcaption><strong>Bloem &amp; Zo, Alkmaar.</strong> Overgestapt van een landelijk kantoor in 2024. 115 euro per maand.</figcaption></figure>
  </div>
</div></div>

<div class="bdr__mensen"><div class="bdr__in bdr__mensen-in">
  <figure class="bdr__portret bdr__portret--a"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-2.webp" alt="Mirjam Bakkum" width="768" height="1376" loading="lazy"></figure>
  <div class="bdr__mensen-txt">
    <h2 class="bdr__h2">U spreekt Mirjam of Sander</h2>
    <p>Mirjam Bakkum is belastingadviseur (RB) en deed twaalf jaar de aangiftes bij een groot kantoor in Amsterdam. Sander de Ruiter is accountant-administratieconsulent en kent de agrarische en bouwbedrijven in de kop van Noord-Holland. Wie het gesprek voert, houdt daarna ook uw dossier. Geen accountmanager ertussen.</p>
    <figure class="bdr__foto bdr__pand"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-11b.webp" alt="Het kantoorpand aan de Oudegracht in Alkmaar" width="340" height="491" loading="lazy"></figure>
  </div>
  <figure class="bdr__portret bdr__portret--b"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-3.webp" alt="Sander de Ruiter" width="768" height="1376" loading="lazy"></figure>
</div></div>

<div class="bdr__stem"><div class="bdr__in bdr__stem-in">
  <blockquote class="bdr__quote bdr__quote--groot"><p>Ik kwam met een schoenendoos bonnetjes en ging naar huis met een planning voor het hele jaar. Dat gesprek was echt gratis.</p><footer>Lotte Vermeulen, Bloem &amp; Zo, Alkmaar</footer></blockquote>
  <div class="bdr__stem-r">
    <figure class="bdr__foto"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-8.webp" alt="Doos met bonnetjes naast een laptop" width="900" height="491" loading="lazy"></figure>
    <blockquote class="bdr__quote"><p>Sander zei dat een bv voor mij nog twee jaar te vroeg was. Mijn vorige kantoor had hem al opgericht.</p><footer>Kees Visser, Bergen</footer></blockquote>
    <blockquote class="bdr__quote"><p>Ze nemen de telefoon op. Dat klinkt klein, maar ik was het niet meer gewend.</p><footer>Anouk Kooijman, Heiloo</footer></blockquote>
  </div>
  <p class="bdr__keur">Register Belastingadviseurs (RB) · lid NOAB · SRA-erkend administratiekantoor · 9,4 gemiddeld uit 87 beoordelingen</p>
</div></div>

<div class="bdr__prijs"><div class="bdr__in bdr__prijs-in">
  <div>
    <h2 class="bdr__h2">Wat het daarna kost</h2>
    <p>Na het gesprek krijgt u een vaste maandprijs. Daar zit alles in wat we afspreken, ook vragen tussendoor. Een paar voorbeelden uit dit jaar:</p>
  </div>
  <ul class="bdr__prijzen">
    <li><span>Zzp, inkomstenbelasting en btw</span><strong>vanaf 65 euro per maand</strong></li>
    <li><span>Vof of maatschap met twee vennoten</span><strong>vanaf 115 euro per maand</strong></li>
    <li><span>Bv met jaarrekening en vennootschapsbelasting</span><strong>vanaf 235 euro per maand</strong></li>
    <li><span>Loonadministratie</span><strong>12 euro per strook</strong></li>
  </ul>
  <figure class="bdr__foto bdr__koffie"><img src="https://neddev.com/lab-media/page-landing-adviesgesprek-10.webp" alt="Koffie met een stroopwafel op de vergadertafel" width="900" height="491" loading="lazy"></figure>
</div></div>

<div class="bdr__faq"><div class="bdr__in bdr__faq-in">
  <h2 class="bdr__h2">Vragen vooraf</h2>
  <div class="bdr__vragen">
    <details><summary>Is het gesprek echt gratis?</summary><p>Ja. U krijgt geen rekening en zit nergens aan vast. Ongeveer de helft van de mensen die we spreken wordt daarna klant.</p></details>
    <details><summary>Wat moet ik meenemen?</summary><p>Uw laatste aangifte inkomstenbelasting en een idee van uw omzet. Bonnetjes en bankafschriften hoeven nog niet.</p></details>
    <details><summary>Ik zit al bij een ander kantoor. Kan dat?</summary><p>Zeker. Bij een overstap vragen wij uw dossier op bij het oude kantoor. U hoeft daar zelf niets voor te regelen.</p></details>
    <details><summary>Werken jullie ook buiten Alkmaar?</summary><p>De meeste klanten zitten tussen Den Helder en Zaandam. Via video werken we voor ondernemers in heel Nederland.</p></details>
    <details><summary>Welke software gebruiken jullie?</summary><p>We werken met de boekhoudpakketten die u al hebt. Hebt u nog niets, dan zoeken we samen iets dat bij uw bedrijf past.</p></details>
  </div>
</div></div>

<div class="bdr__slot"><div class="bdr__in bdr__slot-in">
  <h2 class="bdr__h2">Drie kwartier, en u weet waar u staat</h2>
  <form class="bdr__form bdr__form--kort" novalidate>
    <label class="bdr__f"><span>Uw naam</span><input name="naam" autocomplete="name" required></label>
    <label class="bdr__f"><span>Telefoonnummer</span><input name="tel" type="tel" autocomplete="tel" required></label>
    <button type="submit" class="bdr__knop">Plan mijn kennismaking</button>
    <p class="bdr__fout" hidden>Vul uw naam en een telefoonnummer van tien cijfers in.</p>
    <p class="bdr__klaar" hidden></p>
  </form>
</div></div>

<div class="bdr__voet" role="contentinfo"><div class="bdr__in bdr__voet-in">
  <p><strong>Bakkum &amp; De Ruiter administratie</strong><br>Oudegracht 118, 1811 CN Alkmaar<br><a href="tel:0721234567">072 123 4567</a> · <a href="mailto:kantoor@voorbeeld.nl">kantoor@voorbeeld.nl</a></p>
  <p>KvK 37123456 · btw NL859123456B01<br>Maandag tot en met vrijdag 8:30 tot 17:30</p>
  <p><a href="#">Privacyverklaring</a> · <a href="#">Klachtenregeling</a></p>
</div></div>
</div>
</div>

/* Landingspagina kennismakingsgesprek · Bakkum & De Ruiter administratie, Alkmaar · NedDev · eigen werk. */
/* fonts (Fontshare): synonym@400,600 */
.bdr{--bg:#F2EA7C;--opp:#F8F3B8;--tekst:#1A1A12;--gedempt:#4A4826;--lijn:#DCD36A;--accent:#1D3BD1;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(48px,6vw,96px);--gat:clamp(20px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Synonym',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.bdr *,.bdr *::before,.bdr *::after{box-sizing:border-box}
.bdr [hidden]{display:none!important}
.bdr :where(p,h1,h2,figure,blockquote,ul){margin:0}
.bdr a{color:inherit}
.bdr img{display:block;width:100%;height:100%;object-fit:cover}
.bdr__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.bdr__kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.bdr__logo{text-decoration:none;font-weight:600;font-size:var(--fs3);line-height:1.2;display:flex;flex-direction:column}
.bdr__logo span{font-weight:400;font-size:var(--fs1);color:var(--gedempt)}
.bdr__bel{font-weight:600;font-size:var(--fs3);text-decoration:none;padding:10px 0;white-space:nowrap}
.bdr__bel:hover{color:var(--accent)}
.bdr__hero{padding:clamp(24px,4vw,56px) 0 var(--sectie)}
.bdr__hero-in{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gat)*1.5);align-items:start}
.bdr__h1{font-weight:600;font-size:var(--fs6);line-height:.98;letter-spacing:-.03em;max-width:10ch}
.bdr__lead{font-size:var(--fs3);max-width:44ch;margin-top:28px}
.bdr__foto{overflow:hidden;border-radius:var(--r)}
.bdr__foto--hero{margin-top:36px;aspect-ratio:5/2}
.bdr__form{border-top:3px solid var(--tekst);padding-top:20px;display:grid;gap:16px;position:sticky;top:24px}
.bdr__h3{font-weight:600;font-size:var(--fs4);line-height:1.15;margin:0 0 4px}
.bdr__f{display:grid;gap:6px;font-size:var(--fs1);color:var(--gedempt)}
.bdr input,.bdr select{font:inherit;font-size:var(--fs2);color:var(--tekst);background:#fff;border:1px solid var(--tekst);border-radius:var(--r);padding:12px 14px;min-height:48px;width:100%}
.bdr input:focus,.bdr select:focus{outline:2px solid var(--accent);outline-offset:1px}
.bdr__knop{min-height:54px;padding:0 28px;border:0;border-radius:var(--r);background:var(--accent);color:var(--op-accent);font:inherit;font-weight:600;font-size:var(--fs2);cursor:pointer;transition:background .15s}
.bdr__knop:hover{background:var(--tekst)}
.bdr__noot{font-size:var(--fs1);color:var(--gedempt)}
.bdr__fout{font-size:var(--fs1);color:var(--accent);font-weight:600}
.bdr__klaar{font-size:var(--fs3);line-height:1.4}
.bdr__h2{font-weight:600;font-size:var(--fs5);line-height:1.02;letter-spacing:-.02em;max-width:18ch}
.bdr__mee{background:var(--opp);padding:var(--sectie) 0}
.bdr__mee-in{display:grid;grid-template-columns:6fr 5fr;gap:calc(var(--gat)*1.5);align-items:center}
.bdr__mee-foto{aspect-ratio:3/2}
.bdr__lijst{list-style:none;padding:0;margin-top:28px!important;border-top:1px solid var(--tekst)}
.bdr__lijst li{padding:14px 0;border-bottom:1px solid var(--lijn);font-size:var(--fs3);line-height:1.35}
.bdr__wie{padding:var(--sectie) 0}
.bdr__mozaiek{margin-top:36px;display:grid;grid-template-columns:7fr 4fr;grid-template-rows:auto auto;gap:var(--gat)}
.bdr__m img{border-radius:var(--r);aspect-ratio:16/9;height:auto}
.bdr__m--groot{grid-row:span 2;display:flex;flex-direction:column}
.bdr__m--groot img{aspect-ratio:auto;flex:1 1 0;min-height:0}
.bdr__m figcaption{margin-top:12px;font-size:var(--fs1);color:var(--gedempt);max-width:48ch}
.bdr__m figcaption strong{color:var(--tekst);font-weight:600}
.bdr__mensen{padding:0 0 var(--sectie)}
.bdr__mensen-in{display:grid;grid-template-columns:4fr 5fr 3fr;gap:var(--gat);align-items:start}
.bdr__portret{overflow:hidden;border-radius:var(--r)}
.bdr__portret--a{aspect-ratio:4/5}
.bdr__portret--b{aspect-ratio:4/5;margin-top:clamp(0px,6vw,96px)}
.bdr__mensen-txt p{margin-top:20px;max-width:46ch}
.bdr__pand{margin-top:28px;width:46%;aspect-ratio:340/491}
.bdr__stem{background:var(--accent);color:var(--op-accent);padding:var(--sectie) 0}
.bdr__stem-in{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gat)*1.5);align-items:start}
.bdr__quote p{font-size:var(--fs3);line-height:1.4}
.bdr__quote footer{margin-top:8px;font-size:var(--fs1);opacity:.85}
.bdr__quote--groot p{font-size:var(--fs5);line-height:1.08;font-weight:600;letter-spacing:-.02em}
.bdr__stem-r{display:grid;gap:28px}
.bdr__stem-r .bdr__foto{aspect-ratio:16/9}
.bdr__keur{grid-column:1 / -1;font-size:var(--fs1);border-top:1px solid rgba(255,255,255,.4);padding-top:16px}
.bdr__prijs{padding:var(--sectie) 0}
.bdr__prijs-in{display:grid;grid-template-columns:4fr 5fr 3fr;gap:var(--gat);align-items:start}
.bdr__prijs-in p{margin-top:16px;max-width:40ch}
.bdr__prijzen{list-style:none;padding:0;border-top:1px solid var(--tekst)}
.bdr__prijzen li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--lijn)}
.bdr__prijzen strong{font-weight:600;white-space:nowrap}
.bdr__koffie{aspect-ratio:1/1}
.bdr__faq{background:var(--opp);padding:var(--sectie) 0}
.bdr__faq-in{display:grid;grid-template-columns:4fr 8fr;gap:var(--gat)}
.bdr__vragen details{border-bottom:1px solid var(--tekst)}
.bdr__vragen details:first-child{border-top:1px solid var(--tekst)}
.bdr__vragen summary{cursor:pointer;list-style:none;padding:16px 44px 16px 0;font-size:var(--fs3);font-weight:600;position:relative}
.bdr__vragen summary::-webkit-details-marker{display:none}
.bdr__vragen summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.bdr__vragen details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.bdr__vragen summary:hover{color:var(--accent)}
.bdr__vragen p{padding:0 0 18px;max-width:62ch}
.bdr__slot{padding:var(--sectie) 0}
.bdr__slot-in{display:grid;grid-template-columns:5fr 7fr;gap:var(--gat);align-items:end}
.bdr__form--kort{position:static;grid-template-columns:1fr 1fr auto;align-items:end;border-top:0;padding-top:0}
.bdr__form--kort .bdr__fout,.bdr__form--kort .bdr__klaar{grid-column:1 / -1}
.bdr__voet{border-top:1px solid var(--tekst);padding:40px 0 56px;font-size:var(--fs1)}
.bdr__voet-in{display:flex;flex-wrap:wrap;gap:20px 64px}
@container (max-width:960px){
  .bdr__hero-in,.bdr__mee-in,.bdr__stem-in,.bdr__faq-in,.bdr__slot-in{grid-template-columns:1fr}
  .bdr__form{position:static}
  .bdr__mensen-in{grid-template-columns:1fr 1fr}
  .bdr__mensen-txt{grid-column:1 / -1;grid-row:1}
  .bdr__portret--b{margin-top:48px}
  .bdr__prijs-in{grid-template-columns:1fr 1fr}
  .bdr__prijs-in > div{grid-column:1 / -1}
}
@container (max-width:600px){
  .bdr > *{--fs3:18px;--fs4:24px;--fs5:34px;--fs6:48px}
  .bdr__logo span{display:none}
  .bdr__foto--hero{aspect-ratio:4/3}
  .bdr__mozaiek{grid-template-columns:1fr}
  .bdr__m--groot{grid-row:auto}
  .bdr__m--groot img{flex:none;aspect-ratio:16/10}
  .bdr__prijs-in{grid-template-columns:1fr}
  .bdr__prijzen li{flex-direction:column;gap:2px}
  .bdr__koffie{aspect-ratio:16/9}
  .bdr__form--kort{grid-template-columns:1fr}
  .bdr__pand{width:60%}
  .bdr__knop{width:100%}
}
@media (prefers-reduced-motion:reduce){.bdr *{transition:none!important}}

// Landingspagina kennismakingsgesprek · Bakkum & De Ruiter administratie, Alkmaar · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.bdr');if(!s)return;
s.querySelectorAll('.bdr__form').forEach(function(f){
  var fout=f.querySelector('.bdr__fout'),klaar=f.querySelector('.bdr__klaar');
  f.addEventListener('submit',function(e){e.preventDefault();
    var naam=f.naam.value.trim(),ok=naam&&f.tel.value.replace(/\D/g,'').length>=10;
    fout.hidden=!!ok;if(!ok){(naam?f.tel:f.naam).focus();return;}
    [].slice.call(f.querySelectorAll('label,button,.bdr__noot')).forEach(function(x){x.hidden=true;});
    var nu=new Date(),dag=nu.getDay(),morgen=(dag===5||dag===6)?'maandag':'morgen';
    klaar.hidden=false;klaar.textContent='Dank u, '+naam.split(' ')[0]+'. '+(dag>0&&dag<6&&nu.getHours()<15?'We bellen u vandaag nog':'We bellen u '+morgen+' voor 12:00')+' om een tijd af te spreken.';});
});
}
init(document.querySelector('.jouw-container'));

More page examples

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →