Voraussetzungen

Es werden folgende Programme & Zugänge benötigt:

FTP Programm (z.B. Filezilla)
FTP Zugangsdaten zum eigenen Server
Adminzugang um das Modul zu installieren

Schwierigkeit der Anleitung: 2/10

Dauer: ca. 20 min

Hinweis

Am 08.06.2026 haben wir eine neue Version hochgeladen. In manchen Versionen funktioniert der 2. Step auf der Contentseite nicht.

Widerrufsbutton Gambio – kostenloses Modul von Orange Raven

Ich rede es nicht erst schön: Gambio scheint den bald verpflichtenden Widerrufsbutton erst auf den letzten Drücker zu bringen und dann wahrscheinlich auch nur per Update.

Also helfen wir mal wieder *seufz*.

Unten finden alle Gambio Shop betreiber ein Modul. Das Modul geben wir kostenlos raus. Ohne rechtliches Gewähr, wobei die Vorgaben zum Widerrufsbutton nicht so schwer sind und grundsätzlich eigentlich ziemlich eindeutig sind. Wir vermuten eh, dass kein Mensch diesen Button wirklich verwenden wird, weil ja die Rücksendung schon zum Widerruf reicht. Naja, sei es drum.

Wo wird der Button eingebaut?

Es gibt zwei Möglichkeiten.

1.) Einfach den Button im Footer einblenden lassen. Ist dort als Block angehangen und formatiert. Der Button führt zu einem Stand Alone Formular mit Button „Zurück zum Shop“.

2.) Eine eigene Contentseite erstellen und den Code aus der Datei (weiter unten auch zu finden) „CONTENT-PAGE-SNIPPET.html“ komplett im HTML Modus reinkopieren.

Diese Contentseite dann entweder in den Moduleinstellungen im Button verlinken oder im Fuß einen Link setzen und den auffällig machen. Denn nirgends im Gesetz steht, dass es ein Button sein muss. Ein fetter roter Linktext dürfte genau den gleichen Effekt und dem Gesetz genüge tun.

Funktion unseres Widerrufsbuttons

Da haben wir uns Streng an die Empfehlungen von Juristen gehalten.

1.) Seite per Button/Link aufrufen

2.) Name, Bestellnummer, Postleitzahl und optional die abweichende Mailadresse eingeben.

Das System prüft nun, ob es die Kombination aus Bestellnummer und Postleitzahl gibt. Das ist erlaubt, dess es handelt sich um Angaben um den Vertrag zu identifizieren. Rechtlich völlig zulässig.

3.) Der Kunde kommt nun zur Übersicht seiner Bestellpositionen. Hier kann er wählen, ob er alles oder nur einzelne Positionen widerrufen will.

4.) Der Kunde erklärt den Widerruf

5.) Der Kunde bekommt eine Bestätigungsmail entweder an seine angegebene, abweichende Mailadresse oder an seine Mailadresse aus der Bestellung. Der Shopbetreiber bekommt eine Mail an seine Adresse, dass ein Widerruf erklärt wurde und kann tätig werden.

Fertig.

OR Widerruf-Formular download

Installationsanleitung

Shopversion min. 4.6 und Malibu (Honeygrid und andere Themes auf eigenes Risiko)
Inhalt der ZIP Datei (vorher entpacken!) einfach via FTP in den Ordner GXModules legen
Adminmenü > Cache > Module Cache leeren, Cache für Texte leeren, Seitencache leeren
Im Modulcenter das Modul „Widerruf-Formular“ installieren
1. Dann Bearbeiten und wie gewünscht einstellen
Wenn als Button und als Stand Alone Seite, ist man hier fertig, wer es als Content Seite will, macht mit Punkt 5 weiter
Contentseite anlegen und entsprechend benennen, aktivieren und allen Kundengruppen sichtbar machen
Auf HTML Code umstellen
HTML Code aus der CONTENT-PAGE-SNIPPET.html einfügen (alternativ steht der Code weiter unten, diesen einfach kopieren)
Contentseite im Modul als Link hinterlegen oder selbst einen Link oder Button an geeigneter Stelle einfügen

Kann ich den Contenlink auch als Button darstellen?

Klar. Einfach das ins eigene CSS der Malibuseite kopieren (siehe weiter unten)

Optisch kann man ihn anpassen. Wichtig ist, dass der Link das Wort „widerruf“ enthält. Ansonsten einfach oben das Wort ersetzen, am besten gegen die genauen Keywords.

Kann Orange Raven installieren?

Ja, einfach per Mail anfragen und am besten direkt Adminzugang und FTP Daten liefern. Kostenpunkt ca. 50 € netto.

Und falls jemand dankbar für die Lösung ist. Am besten mal über ein Hosting bei uns nachdenken. Darüber freuen wir uns am meisten.

/* Footer-Link der Widerruf-Seite als Button */
footer a[href*="widerruf"] {
    display: inline-block;
    padding: 8px 16px;
    background: #2563eb;
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
}
footer a[href*="widerruf"]:hover {
    background: #1d4ed8;
}

OR Widerruf-Formular download

<!-- ===========================================================================
     Widerrufsformular (Zwei-Schritt) für eine CONTENT-MANAGER-SEITE
     ===========================================================================
     Schritt 1: Name, Bestellnummer, PLZ, optional abweichende E-Mail.
     Schritt 2: Positionsauswahl (gesamte Bestellung oder einzelne Artikel).

     EINBAU: Content-Seite anlegen -> HTML-/Quelltext-Modus -> diesen Block
     komplett einfügen -> speichern. Header/Footer kommen vom Theme.

     WICHTIG: Dieser Block enthält bewusst KEIN <script> mehr. Die Logik liegt
     jetzt in der Modul-Datei Shop/Themes/All/Javascript/widerruf.js und wird
     automatisch geladen. So kann der WYSIWYG-/HTML-Editor nichts mehr
     zerschießen (er dekodierte sonst HTML-Entities im Skript).

     CSS (.wr-*) und JS lädt das Modul automatisch.
     Shop im Unterordner? -> WR_ENDPOINT in widerruf.js anpassen.
=========================================================================== -->

<div class="wr-form" id="wr-app">
    <div id="wr-result"></div>

    <!-- Schritt 1 -->
    <form id="wr-step1" autocomplete="off">
        <div class="wr-hp" aria-hidden="true">
            <label>Bitte nicht ausfüllen<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
        </div>
        <input type="hidden" name="csrf" id="wr-csrf" value="">
        <input type="hidden" name="form_ts" id="wr-formts" value="">

        <div class="wr-field">
            <label for="wr-name">Name</label>
            <input type="text" id="wr-name" name="name" required>
        </div>
        <div class="wr-field">
            <label for="wr-oid">Bestellnummer</label>
            <input type="text" id="wr-oid" name="orders_id" inputmode="numeric" required>
        </div>
        <div class="wr-field">
            <label for="wr-plz">Postleitzahl (laut Bestellung)</label>
            <input type="text" id="wr-plz" name="postcode" required>
        </div>
        <div class="wr-field">
            <label for="wr-altmail">Abweichende E-Mail für die Bestätigung (optional)</label>
            <input type="text" id="wr-altmail" name="alt_email" inputmode="email">
            <small style="color:#6b7280">Leer lassen = Bestätigung an die E-Mail-Adresse der Bestellung.</small>
        </div>
        <button type="submit" class="wr-submit" id="wr-btn1">Weiter zur Positionsauswahl</button>
    </form>

    <!-- Schritt 2 -->
    <form id="wr-step2" autocomplete="off" style="display:none">
        <p>Welche Positionen möchten Sie widerrufen?</p>
        <label class="wr-check" style="font-weight:600">
            <input type="checkbox" id="wr-all" checked>
            <span>Gesamte Bestellung widerrufen</span>
        </label>
        <div id="wr-items" class="wr-items"></div>
        <label class="wr-check">
            <input type="checkbox" id="wr-confirm2" name="confirm" value="1">
            <span>Hiermit widerrufe ich den Vertrag über die oben gewählten Positionen.</span>
        </label>
        <button type="submit" class="wr-submit" id="wr-btn2">Widerruf absenden</button>
    </form>
</div>

Zurück zum Blog

Rico Stodolka

Rico ist Gründer und Inhaber von Orange Raven. Er ist seit über 15 Jahren als IT- und Marketing Experte (Studium Uni) speziell für Gambio und WordPress unterwegs.