Kontaktformular mit Checkbox (DSGVO-Schutz)

Ob nach der DSGVO ein Kontaktformular eine Checkbox nun unbedingt braucht oder nicht geht es in diesem Artikel nicht. Entscheidet sich der Shop-Betreiber für die Checkbox, soll hier gezeigt werden, wie diese Checkbox durch Nutzung vorhandener JS-/CSS-Biblitheken von Magento am elegantesten und einfachsten eingebaut werden kann:

Als Vorlage nutzen wir hier die Template-Datei app/design/frontend/base/default/template/contacts/form.phtml, die wir in das eigene Theme-Verzeichnis kopieren und dort bearbeiten.

Die Felder des Kontaktformulars sind als li-Elemente organisiert. Wir fügen nun ein neues li-Element mit der Checkbox hinzu:

<li>
    <li class="control" style="max-width: 450px;">
        <label style="float:right" for="gdpr_consent" class="required">Sie erklären sich damit einverstanden, dass Ihre Daten zur Bearbeitung Ihres Anliegens verwendet werden. Weitere Informationen und Widerrufshinweise finden Sie in der <a href="#">Datenschutzerklärung</a>.</label>
        <input type="checkbox" name="gdpr_consent" value="1" class="checkbox required-entry"/>
    </li>
</li>

Die Checkbox wird zum Pflichtfeld durch zwei Bedingungen: value=“1″ und class=“… required-entry“. Die Validierung wird dann durch die Logik in js\prototype\validation.js durchgeführt: Die Checkbox überträgt den Wert 1 nur wenn ausgewählt und muss deshalb bestätigt sein, damit das Formular gesendet werden kann.

Die Angabe max-width: 450px; berücksichtigt CSS von RWD-Theme, welches das Formular responsive macht. Danach wird die maximale Breite des Nachrichtenfeldes auf 450 Pixel gesetzt. Dementsprechend soll auch die Breite der Checkbox mit dem langen Text begrenzt sein.

Nun können wir den Text noch in den Static Block mit dem Bezeichner gdpr_consent_contact auslagern:

<li>
    <li class="control" style="max-width: 450px">
        <label style="float:right" for="gdpr_consent" class="required"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('gdpr_consent_contact')->toHtml() ?></label>
        <input type="checkbox" name="gdpr_consent" value="1" class="checkbox required-entry"/>
    </li>
</li>

Modifizierte Template-Datei als Download: form.phtml.zip

Weiterlesen:

Ein Gedanke zu „Kontaktformular mit Checkbox (DSGVO-Schutz)“

  1. Damit die Checkbox beim Klick auf den Text auch aktiviert wird, kann in das label-Tag folgender JavaScript eingefügt werden:

    onclick=“$(‚#gdpr_consent‘).trigger(‚click‘);“

    Damit der Kunde wenigstens nicht so genau zielen muss 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.