66 lines
4.1 KiB
HTML
66 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#ffffff">
|
||
<title>Vertrag widerrufen – WEBklar</title>
|
||
<link rel="stylesheet" href="/neu/tokens.css">
|
||
<link rel="stylesheet" href="/neu/oeffentlich/oeffentlich.css">
|
||
</head>
|
||
<body class="kn kn-seite kn-recht">
|
||
<main>
|
||
<!-- Nur in der installierten App sichtbar: dort gibt es keinen Zurück-Knopf des Browsers -->
|
||
<a class="kn-zurueck no-print" href="/dashboard.html">‹ Zurück zum Kundenbereich</a>
|
||
<div class="kn-markenzeile">WEBKLAR</div>
|
||
<h1>Vertrag widerrufen</h1>
|
||
|
||
<form id="decl-form" data-anrede="du" class="kn-formular" novalidate>
|
||
<!-- § 356a BGB: welche Bestellung widerrufen wird (jede hat ihre eigene Widerrufsfrist) -->
|
||
<fieldset>
|
||
<legend data-label-for="order" data-label="Vertrag">Vertrag</legend>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="abschluss" data-text="Abschluss meines Abos" checked> Abschluss meines Abos</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="wechsel" data-text="Wechsel ins Wartungs-Abo"> Wechsel ins Wartungs-Abo</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="zusatzspeicher" data-text="E-Mail-Zusatzspeicher"> E-Mail-Zusatzspeicher</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="funktion" data-text="Funktion (z. B. News-Pinnwand)"> Funktion (z. B. News-Pinnwand)</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="termine" data-text="Terminplaner (Einrichtung)"> Terminplaner (Einrichtung)</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="shop" data-text="Webshop (Einrichtung)"> Webshop (Einrichtung)</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="zeiten" data-text="Öffnungszeiten live"> Öffnungszeiten live</label>
|
||
<label class="kn-auswahl"><input type="radio" name="order" value="projekt" data-text="Projektauftrag (Auftragsbestätigung)"> Projektauftrag (Auftragsbestätigung)</label>
|
||
</fieldset>
|
||
|
||
<!-- Nur bei „Projektauftrag“ und freiwillig (auftrag-widerruf.js blendet das Feld sonst aus und leert es); ohne das Skript bleibt es sichtbar -->
|
||
<div id="ab-nummer-wrap">
|
||
<label for="abNummer" data-label-for="abNummer" data-label="Nummer der Auftragsbestätigung">Nummer der Auftragsbestätigung <small>(falls zur Hand, zum Beispiel AB-2026-0001)</small></label>
|
||
<input id="abNummer" name="abNummer" maxlength="20" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="AB-2026-0001">
|
||
</div>
|
||
|
||
<label for="name" data-label-for="name" data-label="Name">Name</label>
|
||
<input id="name" name="name" autocomplete="name" required maxlength="200">
|
||
|
||
<label for="customerNumber" data-label-for="customerNumber" data-label="Kundennummer">Kundennummer <small>(optional)</small></label>
|
||
<input id="customerNumber" name="customerNumber" maxlength="50">
|
||
|
||
<label for="email" data-label-for="email" data-label="E-Mail für die Eingangsbestätigung">E-Mail-Adresse <small>(dorthin schicken wir die Eingangsbestätigung)</small></label>
|
||
<input id="email" name="email" type="email" autocomplete="email" required maxlength="255">
|
||
|
||
<p class="kn-fehlertext hidden" id="form-error"></p>
|
||
<button type="submit" class="kn-absenden">Widerruf bestätigen</button>
|
||
</form>
|
||
|
||
<div id="done" class="kn-bestaetigung hidden">
|
||
<h2>Dein Widerruf ist bei uns eingegangen</h2>
|
||
<p>Eingang: <strong id="done-at"></strong></p>
|
||
<dl id="done-list"></dl>
|
||
<p>Eine Eingangsbestätigung mit diesen Angaben haben wir an deine E-Mail-Adresse geschickt.</p>
|
||
<button type="button" class="kn-drucken" id="print-btn">Diese Bestätigung drucken oder als PDF speichern</button>
|
||
</div>
|
||
</main>
|
||
<script src="/legal-form.js"></script>
|
||
<script>
|
||
initLegalForm({ endpoint: '/api/abo/public/withdraw', fields: ['order', 'abNummer', 'name', 'customerNumber', 'email'] })
|
||
</script>
|
||
<script type="module" src="/auftrag-widerruf.js"></script>
|
||
</body>
|
||
</html>
|