NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Hero met prijsindicatie-calculator Nieuw

Hero voor een schildersbedrijf met een calculator (m², binnen of buiten, aantal lagen) die live een prijsbandbreedte toont.

Schildersbedrijf Verhoef · Utrecht

Wat kost uw schilderwerk? Binnen tien seconden een richtprijs.

Geen formulier, geen wachttijd. Schuif, kies en zie direct de bandbreedte. Daarna komen we kosteloos inmeten voor de vaste prijs.

  • Vaste prijs na inmeten, geen meerwerk achteraf
  • Inclusief verf, afdekken en opruimen
  • 5 jaar garantie op buitenwerk
Oppervlakte60 m²
10400 m²
Waar
Aantal lagen
Richtprijs incl. btw € 1.640 tot € 2.230 ca. 3 werkdagen · incl. verf en voorrijkosten
Plan gratis inmeten

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Hero met prijsindicatie-calculator · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xcl">
  <div class="xcl__inner">
    <div class="xcl__text">
      <span class="xcl__eyebrow">Schildersbedrijf Verhoef · Utrecht</span>
      <h2 class="xcl__h">Wat kost uw schilderwerk? Binnen tien seconden een richtprijs.</h2>
      <p class="xcl__lead">Geen formulier, geen wachttijd. Schuif, kies en zie direct de bandbreedte. Daarna komen we kosteloos inmeten voor de vaste prijs.</p>
      <ul class="xcl__list"><li>Vaste prijs na inmeten, geen meerwerk achteraf</li><li>Inclusief verf, afdekken en opruimen</li><li>5 jaar garantie op buitenwerk</li></ul>
    </div>
    <form class="xcl__card" novalidate>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Oppervlakte</span><output class="xcl__m2">60 m²</output></div>
        <input class="xcl__range" type="range" min="10" max="400" step="5" value="60" aria-label="Oppervlakte in vierkante meter">
        <div class="xcl__scale"><span>10</span><span>400 m²</span></div>
      </div>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Waar</span></div>
        <div class="xcl__seg" role="radiogroup" data-k="plek">
          <button type="button" class="is-on" data-v="binnen" aria-pressed="true">Binnen</button>
          <button type="button" data-v="buiten" aria-pressed="false">Buiten</button>
        </div>
      </div>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Aantal lagen</span></div>
        <div class="xcl__seg xcl__seg--3" data-k="lagen">
          <button type="button" data-v="1" aria-pressed="false">1 laag</button>
          <button type="button" class="is-on" data-v="2" aria-pressed="true">2 lagen</button>
          <button type="button" data-v="3" aria-pressed="false">3 lagen</button>
        </div>
      </div>
      <div class="xcl__res">
        <span class="xcl__reslab">Richtprijs incl. btw</span>
        <strong class="xcl__price" aria-live="polite">€ 1.640 tot € 2.230</strong>
        <span class="xcl__meta">ca. <b class="xcl__days">3</b> werkdagen · incl. verf en voorrijkosten</span>
      </div>
      <a class="xcl__cta" href="#">Plan gratis inmeten <span aria-hidden="true">→</span></a>
    </form>
  </div>
</div>
</div>

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →