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

Umsetzung der Datenschutzgrundverordnung für die Website / Teil 2 - Javascript und PHP

Im ersten Teil haben wir das HTML-Formular erstellt. Jetzt geht es an die Funktionalität unseres Formulars. Validierung lasse ich mal außen vor, da es für unser Kernanliegen uninteressant ist.

Zunächst mal binden wir im HEAD die Google-API für das Invisible Recaptcha ein:

 <script src="https://www.google.com/recaptcha/api.js" async defer></script>

Irgendwo müssen Sie auch noch jQuery einbinden, wenn der nachfolgende Code funktionieren soll. Irgendwo am Ende der Seite binde ich folgendes Script ein:

<script defer>
function onSubmit(token) {
$.post("kontaktformular_senden.php",$("#kontaktformular").serialize(),function(msg){
    if(msg=="erfolg"){
        $("#erfolg_kontaktformular").html("<div class='alert alert-success margin-bottom-30'>\n<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>\n<strong>Vielen Dank!</strong> Ihre Nachricht wurde an uns versendet!\n</div>\n");
    }
    else
    {    
        if(msg=="fail2"){
            $("#erfolg_kontaktformular").html("<div class='alert alert-danger margin-bottom-30'>\n<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>\n<strong>Fehler!</strong> Ihre Nachricht konnte nicht versendet werden. Bitte reCaptcha-Feld ankreuzen!\n</div>\n");
        }
        else{
            $("#erfolg_kontaktformular").html("<div class='alert alert-danger margin-bottom-30'>\n<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>\n<strong>Fehler!</strong> Ihre Nachricht konnte nicht versendet werden. Bitte kontaktieren Sie uns per eMail!\n</div>\n");
        }
    }
});
}
</script>

Das Script sendet die Daten mittels AJAX-Post-Request an ein serverseitiges Script. Dort wird das Recaptcha ausgewertet und im Erfolgsfall eine eMail mit dem Inhalt des Kontaktformulars gesendet. Außerdem gibt es eine Message zurück, die darauf schließen lässt, ob der Vorgang erfolgreich war, damit der Nutzer eine Rückmeldung erhält. Diese Rückmeldung wird mittels jQuery im Bereich mit der id "erfolg_kontaktformular", den wir in Teil 1 als Bestandteil des Formulars angelegt haben, eingeblendet. Genauso wird natürlich eine Meldung angezeigt, falls das serverseitige Script "fail2" zurückgibt.

Wir sind aber noch nicht ganz fertig mit Javascript folgendes müssen wir unbedingt noch einbinden, damit überpüft wird, ob der Haken bei den Datenschutzbestimmungen gesetzt wurde:

$("#datenschutz_checkbox").click(function(){
    if( $('#datenschutz_checkbox').is(':checked') ) {
        $("#absende_button").prop('disabled', false);
    }
    else
    {
        $("#absende_button").prop('disabled', true);
    }    
});
setTimeout(function(){ document.getElementById("absende_button").disabled = true; }, 2000);

jQuery überprüft damit, ob das Häkchen gesetzt wurde und der Nutzer somit den Datenschutzbedingungen zustimmt. Andernfalls ist der Absende-Button "disabled", das heißt er funktioniert nicht. Die setTimeout-Funktion ist eine Krücke, die kurz nach dem Laden der Seite den Button deaktiviert. Die Bindung der Recaptcha-Funktion an den Button verhindert nämlich, dass ein einfaches "disabled" als Attribut bei dem Button funktioniert. Warum das so ist, weiß ich nicht, aber so funktioniert es definitiv.

Am Ende brauchen wir nun nur noch das serverseitige Script, die "kontaktformular_senden.php":

<?php
function getCurlData($url)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16");
$curlData = curl_exec($curl);
curl_close($curl);
return $curlData;
}

$msg='';
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$recaptcha=$_POST['g-recaptcha-response'];
if(!empty($recaptcha))
{
$google_url="https://www.google.com/recaptcha/api/siteverify";
$secret='xxx';
$ip=$_SERVER['REMOTE_ADDR'];
$url=$google_url."?secret=".$secret."&response=".$recaptcha."&remoteip=".$ip;
$res=getCurlData($url);
$res= json_decode($res, true);
//reCaptcha success check
if($res['success'])
{
    $to = 'info@xyz.de';
    $subject = 'Kontaktformular Website';
    $headers = 'From: ' . $_POST['email'] . "\r\n" .
    'Reply-To: ' . $_POST['email'] . "\r\n" .
    'Content-type: text/html; charset=utf-8' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();    

    $message = 'Name: ' . $_POST['name1'] . "<br>" .
               'E-mail: ' . $_POST['email'] . "<br>" .
               'Nachricht: ' . $_POST['nachricht'];
               
    if(mail($to, $subject, $message, $headers)){    
        echo "erfolg";
    }
    else
    {
        echo "fail";
    }
}
else   
    {
        echo "fail2";
    }
}
else   
    {
        echo "fail2";
    }
}
else   
    {
        echo "fail2";
    }
?>

Hier wird, wie schon erwähnt das Recaptcha überprüft und bei Erfolg die Mail gesendet. Dafür wird auf jeden Fall der passende Secret-Key von Google Recaptcha benötigt. Natürlich könnte man hier auch noch diverse serverseitige Validierungen durchführen lassen.

Ich hoffe der kleine Einblick hat Ihnen gefallen und kann dem einen oder anderen nützlich sein. Was die richtigen Datenschutzbedingungen für Ihre Website sind, kann ich Ihnen natürlich nicht sagen. Vielleicht hilft aber ein Blick auf https://www.e-recht24.de/ weiter.