So machen Sie Ihre Website fit für die neue Datenschutzgrundverordnung / Teil 1

Umsetzung der Datenschutzgrundverordnung für die Website / Teil 1 - Das HTML-Formular vorbereiten

Wenn Sie die neue Datenschutzgrundverordnung für Ihre Website umsetzen wollen, müssen Sie eventuell Ihre Kontaktformulare anpassen. Der Nutzer muss vor dem Absenden des Kontaktformulars den Datenschutzbedingungen der Website zustimmen. Ich stelle einfach mal die Methode vor, wie ich es hier bei zwanzig12 webdesign umsetze. Zum Einsatz kommt auch Googles Invisible Recaptcha. Sonst müsste der Nutzer zwei Kreuzchen machen, um das Formular abzusenden - einmal für die Datenschutzbedingungen und einmal um zu bestätigen, dass er kein Roboter ist.

Also brauchen wir zunächst mal ein handelsübliches HTML-Kontaktformular:

<form action="#" method="post" id="kontaktformular">
 <input required="" value="" name="name" type="text">
 <input required="" value="" name="email" type="email">
 <input required="" value="" name="telefon" type="text">

 <div id="erfolg_kontaktformular">
   <p></p>
 </div>
 <input type="checkbox" name="datenschutz_checkbox" id="datenschutz_checkbox"> Bitte bestätigen Sie vor dem Absenden die <a href="datenschutz.php" target="_blank">Datenschutzbestimmungen</a>.
 <p><br>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular
  inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von
  Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p>
 <button type="submit" id="absende_button" class="g-recaptcha" data-sitekey="xxx" data-callback="onSubmit"><i class="fa fa-check"></i> NACHRICHT ABSENDEN</button>
</form>

Sie sehen schon, ganz handelsüblich ist das Kontaktformular nicht. Unter den Eingabefeldern haben wir einen Bereich, der später die Rückmeldung aus dem PHP-Script entgegennimmt, dass für die Auswertung des Recaptchas und das Versenden der Formulardaten zuständig ist. Sie ahnen es bereits, das Formular wird per AJAX an PHP weitergereicht.

Danach kommt eine Checkbox, in der die Datenschutzbedinungen bestätigt werden müssen. Die Checkbox darf standardmäßig nicht gecheckt sein!

Nach der Checkbox folgt ein kurzer Text, der dem Nutzer vermittelt, was mit seinen Daten anschließend passiert. Und schließlich folgt der Submit-Button. Die Attribute sind hier wichtig. Wir brauchen später noch die id des Buttons. Er soll nämlich von vornherein erstmal deaktiviert sein, bis der Nutzer die Datenschutzbedinungen bestätigt hat. Damit das unsichtbare Recaptcha funktioniert, brauchen wir die Klasse "g-recaptcha". Außerdem natürlich die Website-Schlüssel, den uns Google Recaptcha bereitgestellt hat. Auf Google Recaptcha gehe ich jetzt nicht näher ein. Wer sich darüber informieren möchte findet hier alle notwendigen Infos: https://www.google.com/recaptcha

So, das HTML-Formular hätten wir schonmal. Aber ohne Javascript geht's nicht. Wie es weiter geht erfahren Sie demnächst in Teil 2...