NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Abonnement opzeggen New

Cancelling a subscription the way Dutch rules expect: the cancel button is as visible as change, then one confirmation screen with end date and last direct debit, a reason that is truly optional, no retention tricks, and a confirmation showing the confirmation email text and a reference number. Loading and error (via the demo switch) are visible. Switches screens with View Transitions; instantly without support or with reduced motion.

Mijn abonnement

Flex-abonnement, Sportschool De Kade Utrecht

€ 34,95 per maand, maandelijks opzegbaar. Volgende incasso op 1 november.

How to use it

  1. Paste the HTML where the forms & inputs should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Abonnement opzeggen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ozf">
  <div class="ozf__v" data-v="1">
    <h3 class="ozf__h" tabindex="-1">Mijn abonnement</h3>
    <div class="ozf__sub">
      <p class="ozf__name">Flex-abonnement, Sportschool De Kade Utrecht</p>
      <p class="ozf__meta">€ 34,95 per maand, maandelijks opzegbaar. Volgende incasso op 1 november.</p>
      <div class="ozf__row">
        <button type="button" class="ozf__btn" data-go="wijzig">Abonnement wijzigen</button>
        <button type="button" class="ozf__btn" data-go="2">Abonnement opzeggen</button>
      </div>
      <p class="ozf__note" aria-live="polite"></p>
    </div>
  </div>
  <div class="ozf__v" data-v="2" hidden>
    <h3 class="ozf__h" tabindex="-1">Opzegging bevestigen</h3>
    <p class="ozf__p">Je Flex-abonnement loopt door tot en met <strong class="ozf__end"></strong> (opzegtermijn 1 maand). De laatste incasso is <span class="ozf__last"></span>.</p>
    <fieldset class="ozf__fs">
      <legend>Waarom stop je? <span>(optioneel, je mag dit overslaan)</span></legend>
      <label><input type="radio" name="ozf-r" value="verhuizing"> Ik ga verhuizen</label>
      <label><input type="radio" name="ozf-r" value="prijs"> Te duur</label>
      <label><input type="radio" name="ozf-r" value="weinig"> Ik sport te weinig</label>
      <label><input type="radio" name="ozf-r" value="anders"> Anders</label>
      <textarea class="ozf__ta" rows="2" aria-label="Toelichting (optioneel)" placeholder="Toelichting (optioneel)" hidden></textarea>
    </fieldset>
    <p class="ozf__err" role="alert"></p>
    <div class="ozf__row">
      <button type="button" class="ozf__btn ozf__btn--main" data-go="3">Opzegging bevestigen</button>
      <button type="button" class="ozf__btn" data-go="1">Toch niet</button>
    </div>
    <label class="ozf__demo"><input type="checkbox"> Demo: simuleer een storing</label>
  </div>
  <div class="ozf__v" data-v="3" hidden>
    <h3 class="ozf__h" tabindex="-1">Opzegging ontvangen</h3>
    <dl class="ozf__dl">
      <dt>Einddatum</dt><dd class="ozf__end"></dd>
      <dt>Ontvangen op</dt><dd class="ozf__got"></dd>
      <dt>Referentie</dt><dd class="ozf__ref"></dd>
    </dl>
    <div class="ozf__mail">
      <p class="ozf__mh">Bevestigingsmail naar s.devries@voorbeeld.nl</p>
      <p><strong>Onderwerp:</strong> Bevestiging van je opzegging</p>
      <p>Hoi Sanne, we hebben je opzegging van het Flex-abonnement ontvangen op <span class="ozf__got"></span>. Je kunt nog sporten tot en met <span class="ozf__end"></span>. De laatste incasso is <span class="ozf__last"></span>; daarna schrijven we niets meer af. Bewaar deze mail als bewijs. Referentie: <span class="ozf__ref"></span>.</p>
    </div>
    <div class="ozf__row"><button type="button" class="ozf__btn" data-go="undo">Opzegging intrekken</button></div>
  </div>
</div>
</div>

More forms & inputs

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 →