---
title: "Website abonnement"
date: 2022-08-17
description: "Website abonnement inclusief domein, hosting en onderhoud. Je bent volledig eigenaar en betaalt per maand. Kijk hoe het werkt."
author: "Rachel Walraven"
intro_image: "https://walravenwebwerk.nl/images/illustraties/checklist.svg"
fulltext_image: "https://walravenwebwerk.nl/images/illustraties/checking-boxes.svg"
categories:
  - name: "Websites"
    url: "https://walravenwebwerk.nl/websites.md"
---

# Website abonnement

![Website abonnement](https://walravenwebwerk.nl/images/illustraties/checking-boxes.svg)

Wij hebben er een mooie oplossing voor: een websiteabonnement. Daarmee betaal je per maand voor jouw ideale website.

 
## Voordelen website abonnement

 
### Geen grote investering ineens

 Als je een websiteabonnement afsluit, betaal je de ontwikkel- en onderhoudskosten in overzichtelijke maandelijkse termijnen. Geen grote investering ineens dus, en dat is een voordeel voor bedrijven met een kleiner budget.

 
### Flexibel

 Je kunt je website eenvoudig uitbreiden met extra functies. Ook kun je op een bepaald moment zelfs overstappen naar een nieuw ontwerp dat speciaal voor jou is gemaakt, zonder dat er een heel nieuwe website gebouwd moet worden. Het werkt net als bij een telefoonabonnement voor bellen en internetten plus aanschaf van de telefoon: is de telefoon (je website) na 1 of 2 jaar volledig betaald, dan kun je een nieuwe kopen (= nieuwe website) terwijl je abonnementskosten doorlopen.

 
### Website in eigendom

 Als de contracttermijn afloopt, ben je volledig eigenaar van je website. Dit is lang niet bij alle aanbieders het geval! Je kunt zelfs je website meenemen als je naar een andere partij wilt.

 ![](https://walravenwebwerk.nl/images/illustraties/payment-check.svg)

 
## Nadelen van website abonnement

 
### Je zit er een tijdje aan vast

 Je betaalt maandelijks voor je website. We zien dat als een voordeel, maar het kan ook een nadeel zijn. Bijvoorbeeld bij tegenvallende omzet. We raden je aan om van tevoren goed na te denken over welk abonnement past bij jouw financiële situatie.

 
### Je bent iets duurder uit

 Omdat je de ontwikkelkosten van de website uitsmeert over 12 of 24 maanden rekenen we een kleine opslag voor deze service. Voor een looptijd van 1 jaar is dit 8% van de ontwikkelkosten, kies je voor 2 jaar dan betaal  je 12% meer.

 
## Zo werkt het websiteabonnement

 Een websiteabonnement werkt ongeveer hetzelfde als een abonnement voor je mobiele telefoon. Daarbij betaal je voor bellen/internetten en voor je toestel. Bij een websiteabonnement betaal je maandelijks voor 2 pakketten:

 
- het basispakket: hosting, domeinregistratie, onderhoud en support. Doorlopende diensten dus;
- de ontwikkelkosten: het laten maken van de website. Dat zijn eenmalige diensten.

 Je kiest een looptijd van 1 of 2 jaar. Het maandbedrag is het totaal van de kosten voor het basispakket en de ontwikkelkosten voor de website (met kleine opslag), gedeeld door 12 bij een looptijd van 1 jaar en gedeeld door 24 bij een looptijd van 2 jaar. Na de looptijd vervallen de kosten voor de websiteontwikkeling en ben je volledig eigenaar van je website. Je betaalt dan alleen nog de maandelijkse kosten voor het basispakket. Dit kan je per maand blijven doen, of overstappen naar een jaarlijkse factuur.

 
### Terugkerende kosten

 De terugkerende kosten bestaat uit de hosting, domeinregistratie en onderhoud (meer op [Website beheer & hosting](https://walravenwebwerk.nl/index.php?option=com_content&view=article&id=280:websitebeheer-hosting&catid=12:websites&Itemid=114)). Voor al deze diensten heb je meerdere opties om uit te kiezen. Wij adviseren je hier graag bij.

 
### Kosten websiteontwikkeling

 De kosten voor het laten maken van je website hangen sterk af van je wensen. Hoe groot is je website, welke functionaliteiten heb je nodig, wat voor soort website is het, enzovoorts. Je ontvangt van ons altijd een duidelijke offerte. En daarin nemen we al je wensen mee, plus de verschillende opties.


## Aangepaste velden

**Code:** 




Abonnementscalculator



  /* Radio blijft bedienbaar met toetsenbord, maar is onzichtbaar. */
  .ab-optie__input {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* Het label is de klikbare kaart. */
  .ab-optie { display: block; height: 100%; cursor: pointer; user-select: none; }
  .ab-optie__card { height: 100%; }
  /* Focus-ring voor toetsenbordgebruikers. */
  .ab-optie__input:focus-visible + .ab-optie__card {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  /* Focus op de slider zichtbaar maken bij toetsenbordgebruik (UIkit zet de outline uit). */
  .ab-ontwikkel .uk-range:focus-visible {
    outline: 2px solid #222;
    outline-offset: 6px;
    border-radius: 2px;
  }
  .ab-ontwikkel .uk-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #222;
  }
  .ab-ontwikkel .uk-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #222;
  }




  .ab-optie__card { transition: border-color .15s, box-shadow .15s; border: 2px solid #e5e5e5; }
  .ab-optie:hover .ab-optie__card { border-color: #bddca7; }
  .ab-optie__input:checked + .ab-optie__card { border-color: #90e15b; box-shadow: 0 0 0 1px #90e15b; }
  .ab-optie__vink { visibility: hidden; }
  .ab-optie__input:checked + .ab-optie__card .ab-optie__vink { visibility: visible; }

  .ab-prijs { display: block; font-size: 2.25rem; line-height: 1; font-weight: 700; }
  .ab-prijs__eenheid { font-size: 1rem; font-weight: 400; }

  /* Invoerveld dat eruitziet als het grote bedrag, maar typbaar is. */
  .ab-ontwikkel__invoer-houder .uk-form-icon { font-size: 2rem; font-weight: 700; color: inherit; width: 2.75rem; }
  .ab-ontwikkel__invoer.uk-input {
    width: 11rem;
    height: auto;
    padding: .25rem .75rem .25rem 2.75rem !important;
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 700;
    text-align: right;
  }
  .ab-ontwikkel__invoer.uk-input:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
  .ab-totaal__bedrag { font-size: 3rem; line-height: 1; font-weight: 700; }






  

    
    
      1. Ontwikkelkosten website
      
        
          Budget voor je website
          
            €
            
          
        
        
        
          
          
        
      
    

    
    
      2. Kies je onderhoudspakket
      
    

    
    
      3. Kies je hostingpakket
      
    

    
    
      4. Kies de looptijd van je contract
      
    

    
    
      
        Jouw abonnement

        

        
          Kies een onderhoudspakket, een hostingpakket en de looptijd om je maandprijs te zien.
        

        
          Per maand
          
            
            p/m
          
        

        

        
          
          
            
            p/m
          
          Alleen onderhoud, hosting en domeinregistratie, de ontwikkelkosten zijn dan afbetaald.
        
        

        
        
      
    

  



(function () {
  'use strict';

  /* ============================================================
     CONFIGURATIE
     Hier pas je prijzen, teksten en volgorde aan.
     ============================================================ */

  var CONFIG = {

    // Notitie onder het totaal. Leeg laten ('') = regel verdwijnt.
    btwNotitie: 'Alle bedragen zijn exclusief btw.',

    // Range slider voor de ontwikkelkosten.
    ontwikkeling: { min: 1800, max: 5000, stap: 5, standaard: 1800 },

    // Contractduur. De totale kosten worden gedeeld door het aantal maanden.
    // opslag = percentage extra op de ontwikkelkosten.
    looptijden: [
      { id: '1jaar', naam: '1 jaar', maanden: 12, opslag: 8 },
      { id: '2jaar', naam: '2 jaar', maanden: 24, opslag: 12 }
    ],

    // Vaste kosten per jaar, altijd inbegrepen (ook na afloop van de looptijd).
    vasteKosten: [
      { id: 'domein', naam: 'Domeinregistratie', jaar: 36 }
    ],

    // Standaardselectie bij laden. null = niets voorgeselecteerd.
    // Bijvoorbeeld: { onderhoud: 'compleet', hosting: 'groei', looptijd: '2jaar' }
    standaard: { onderhoud: null, hosting: null, looptijd: null },

    groepen: [
      {
        id: 'onderhoud',
        naam: 'Onderhoud',
        opties: [
          { id: 'basis',     naam: 'Basis',     maand: 19 },
          { id: 'compleet',  naam: 'Compleet - meest gekozen',  maand: 27 },
          { id: 'zorgeloos', naam: 'Zorgeloos', maand: 57 }
        ]
      },
      {
        id: 'hosting',
        naam: 'Hosting',
        opties: [
          { id: 'instap', naam: 'Instap', maand: 12 },
          { id: 'groei',  naam: 'Groei - meest gekozen',  maand: 15 },
          { id: 'pro',    naam: 'Pro',    maand: 25 }
        ]
      }
    ]
  };

  /* ============================================================
     LOGICA
     Hieronder hoef je normaal gesproken niets aan te passen.
     ============================================================ */

  var form = document.getElementById('abonnementscalculator');
  if (!form) return;

  var euroHeel = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 });
  var euroCent = new Intl.NumberFormat('nl-NL', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 });

  // Hele bedragen zonder decimalen, anders altijd twee (€ 77,50 i.p.v. € 77,5).
  function prijs(bedrag) {
    var afgerond = Math.round(bedrag * 100) / 100;
    return (afgerond % 1 === 0 ? euroHeel : euroCent).format(afgerond);
  }

  var HTML_TEKENS = { '&': '&', '': '>', '"': '"', "'": ''' };

  function esc(waarde) {
    return String(waarde).replace(/[&"']/g, function (teken) {
      return HTML_TEKENS[teken];
    });
  }

  // ── Kaarten opbouwen ────────────────────────────────────────
  function bouwKaart(naamAttr, waarde, data, titel, inhoud) {
    return '' +
      '' +
        '' +
          '' +
          '' +
            '' +
            '' + esc(titel) + '' +
            inhoud +
          '' +
        '' +
      '';
  }

  CONFIG.groepen.forEach(function (groep) {
    var houder = form.querySelector('[data-ab-opties="' + groep.id + '"]');
    if (!houder) return;
    houder.innerHTML = groep.opties.map(function (optie) {
      return bouwKaart(groep.id, optie.id, ' data-maand="' + optie.maand + '"', optie.naam,
        '' +
          '' + prijs(optie.maand) + '' +
          ' p/m' +
        '');
    }).join('');
  });

  var looptijdHouder = form.querySelector('[data-ab-looptijden]');
  looptijdHouder.innerHTML = CONFIG.looptijden.map(function (looptijd) {
    return bouwKaart('looptijd', looptijd.id,
      ' data-maanden="' + looptijd.maanden + '" data-opslag="' + looptijd.opslag + '"', looptijd.naam,
      '' + looptijd.maanden + ' maanden · ' +
        looptijd.opslag + '% opslag op de ontwikkelkosten');
  }).join('');

  // ── Slider ──────────────────────────────────────────────────
  var slider = form.querySelector('[data-ab-slider]');
  var invoer = form.querySelector('[data-ab-invoer]');
  var getal  = new Intl.NumberFormat('nl-NL', { maximumFractionDigits: 0 });

  // Getypt bedrag omzetten: "2.500", "2500", "€ 2.500,-" → 2500, afgerond op de stap en binnen min/max.
  function leesInvoer(tekst) {
    var schoon = String(tekst).replace(/[^\d,]/g, '').replace(',', '.');
    var waarde = parseFloat(schoon);
    if (isNaN(waarde)) return parseFloat(slider.value);
    var o = CONFIG.ontwikkeling;
    waarde = Math.round(waarde / o.stap) * o.stap;
    return Math.min(o.max, Math.max(o.min, waarde));
  }

  function verwerkInvoer() {
    slider.value = leesInvoer(invoer.value);
    invoer.value = getal.format(parseFloat(slider.value));
    werkBij();
  }

  invoer.addEventListener('change', verwerkInvoer);
  invoer.addEventListener('keydown', function (e) {
    // Enter verwerkt het bedrag in plaats van het formulier te versturen.
    if (e.key === 'Enter') {
      e.preventDefault();
      verwerkInvoer();
    }
  });
  invoer.addEventListener('focus', function () { invoer.select(); });

  slider.min   = CONFIG.ontwikkeling.min;
  slider.max   = CONFIG.ontwikkeling.max;
  slider.step  = CONFIG.ontwikkeling.stap;
  slider.value = CONFIG.ontwikkeling.standaard;
  form.querySelector('[data-ab-slider-min]').textContent = prijs(CONFIG.ontwikkeling.min);
  form.querySelector('[data-ab-slider-max]').textContent = prijs(CONFIG.ontwikkeling.max);

  // ── Huidige staat uitlezen ──────────────────────────────────
  function huidigeKeuze(groepId) {
    var input = form.querySelector('input[name="' + groepId + '"]:checked');
    if (!input) return null;
    return { id: input.value, naam: input.dataset.naam, maand: parseFloat(input.dataset.maand) };
  }

  function huidigeLooptijd() {
    var input = form.querySelector('input[name="looptijd"]:checked');
    if (!input) return null;
    return {
      id: input.value,
      naam: input.dataset.naam,
      maanden: parseInt(input.dataset.maanden, 10),
      opslag: parseFloat(input.dataset.opslag)
    };
  }

  // ── Elementen ───────────────────────────────────────────────
  var regels    = form.querySelector('[data-ab-regels]');
  var hint      = form.querySelector('[data-ab-hint]');
  var som       = form.querySelector('[data-ab-som]');
  var bedragEl  = form.querySelector('[data-ab-bedrag]');
  var omrekenEl = form.querySelector('[data-ab-omrekening]');
  var naEl      = form.querySelector('[data-ab-na]');
  var naLabelEl = form.querySelector('[data-ab-na-label]');
  var naBedragEl = form.querySelector('[data-ab-na-bedrag]');
  var btwEl     = form.querySelector('[data-ab-btw]');
  var veld      = form.querySelector('[data-ab-veld]');

  if (CONFIG.btwNotitie) {
    btwEl.textContent = CONFIG.btwNotitie;
  } else {
    btwEl.hidden = true;
  }

  function meld(naam, detail) {
    form.dispatchEvent(new CustomEvent(naam, { bubbles: true, detail: detail }));
  }

  function regel(label, bedrag) {
    return '' +
      '' +
        '' + label + '' +
        '' + bedrag + '' +
      '';
  }

  // ── Weergave bijwerken ──────────────────────────────────────
  function werkBij() {
    var ontwikkelkosten = parseFloat(slider.value);
    // Veld niet overschrijven terwijl de klant erin typt.
    if (document.activeElement !== invoer) invoer.value = getal.format(ontwikkelkosten);
    // Schermlezers lezen "€ 1.805" voor in plaats van alleen "1805".
    slider.setAttribute('aria-valuetext', prijs(ontwikkelkosten));

    var keuzes = CONFIG.groepen.map(function (groep) {
      return { groep: groep, keuze: huidigeKeuze(groep.id) };
    });
    var looptijd = huidigeLooptijd();

    // Regels: bij bekende looptijd tonen we het bedrag over de hele contractduur.
    var opslag = looptijd ? Math.round(ontwikkelkosten * looptijd.opslag) / 100 : 0;

    var html = regel('Ontwikkelkosten website', prijs(ontwikkelkosten));
    if (looptijd) html += regel('Opslag ' + esc(looptijd.naam) + ' (' + looptijd.opslag + '%)', prijs(opslag));
    keuzes.forEach(function (item) {
      if (!item.keuze) return;
      var label = esc(item.groep.naam) + ': ' + esc(item.keuze.naam) + '';
      html += looptijd
        ? regel(label + ' (' + looptijd.maanden + ' × ' + prijs(item.keuze.maand) + ')', prijs(item.keuze.maand * looptijd.maanden))
        : regel(label, prijs(item.keuze.maand) + ' p/m');
    });
    CONFIG.vasteKosten.forEach(function (kost) {
      html += looptijd
        ? regel(esc(kost.naam) + ' (' + (looptijd.maanden / 12) + ' × ' + prijs(kost.jaar) + ')', prijs(kost.jaar * looptijd.maanden / 12))
        : regel(esc(kost.naam), prijs(kost.jaar) + ' p/j');
    });
    if (looptijd) html += regel('Looptijd', '' + esc(looptijd.naam) + '');
    regels.innerHTML = html;

    var compleet = looptijd && keuzes.every(function (item) { return item.keuze; });

    hint.hidden = !!compleet;
    som.hidden = !compleet;
    omrekenEl.hidden = !compleet;
    naEl.hidden = !compleet;

    if (!compleet) {
      veld.value = '';
      meld('abonnementscalculator:wijziging', { compleet: false, totaal: null });
      return;
    }

    // Doorlopende kosten per maand: onderhoud, hosting en vaste kosten (jaarbedrag / 12).
    var doorlopendPerMaand = keuzes.reduce(function (tot, item) {
      return tot + item.keuze.maand;
    }, 0) + CONFIG.vasteKosten.reduce(function (tot, kost) {
      return tot + kost.jaar / 12;
    }, 0);

    var totaalContract = ontwikkelkosten + opslag + doorlopendPerMaand * looptijd.maanden;
    var perMaand = totaalContract / looptijd.maanden;

    bedragEl.textContent = prijs(perMaand);
    omrekenEl.textContent = 'Totaal over ' + looptijd.naam + ': ' + prijs(totaalContract) +
      ' (gedeeld door ' + looptijd.maanden + ' maanden)';

    // Na de looptijd blijven alleen de doorlopende kosten over.
    var naLooptijd = doorlopendPerMaand;
    naLabelEl.textContent = 'Na ' + looptijd.naam;
    naBedragEl.textContent = prijs(naLooptijd);

    var samenvatting = 'Ontwikkelkosten: ' + prijs(ontwikkelkosten) +
      ' | Opslag (' + looptijd.opslag + '%): ' + prijs(opslag) + ' | ' +
      keuzes.map(function (item) {
        return item.groep.naam + ': ' + item.keuze.naam;
      }).join(' | ') +
      CONFIG.vasteKosten.map(function (kost) {
        return ' | ' + kost.naam + ': ' + prijs(kost.jaar) + ' p/j';
      }).join('') +
      ' | Looptijd: ' + looptijd.naam +
      ' | Totaal: ' + prijs(totaalContract) + ' | Per maand: ' + prijs(perMaand) +
      ' | Na ' + looptijd.naam + ': ' + prijs(naLooptijd) + ' p/m';
    veld.value = samenvatting;

    meld('abonnementscalculator:wijziging', {
      compleet: true,
      ontwikkelkosten: ontwikkelkosten,
      opslag: opslag,
      keuzes: keuzes.reduce(function (acc, item) {
        acc[item.groep.id] = item.keuze;
        return acc;
      }, {}),
      looptijd: looptijd,
      totaal: { contract: totaalContract, maand: perMaand, naLooptijd: naLooptijd },
      samenvatting: samenvatting
    });
  }

  form.addEventListener('change', function (e) {
    if (e.target.matches('input[type="radio"]')) werkBij();
  });
  slider.addEventListener('input', werkBij);

  // Standaardselectie toepassen.
  Object.keys(CONFIG.standaard).forEach(function (groepId) {
    var waarde = CONFIG.standaard[groepId];
    if (!waarde) return;
    var input = form.querySelector('input[name="' + groepId + '"][value="' + waarde + '"]');
    if (input) input.checked = true;
  });

  werkBij();
})();






**Subtitel:** Maandelijkse betaling

**Introtekst:** De beste website is een website die speciaal voor jou (jouw bedrijf) is gemaakt. 
Maar soms past de investering voor zo’n ideale site niet bij je financiële situatie. 

**Actie titel:** Websiteabonnement: meer weten of aanvragen?

**Actie omschrijving:** Is een websiteabonnement iets voor jou? Of wil je meer informatie? Neem dan contact met ons op. We helpen je graag verder en bespreken je wensen en de mogelijkheden met je. Op basis daarvan krijg je een offerte met daarin de berekening van jouw maandtarief. Dan weet je waar je aan toe bent. En het verplicht je tot niets.

**Knop tekst:** Maak een afspraak voor een gesprek

**Actie image:** ![](https://walravenwebwerk.nl/images/illustraties/offerte.png)