Tutorial Google reCAPTCHA in NetObjects Fusion (NOF) einbinden

im Januar 2016

Zunächst möchte ich mich an dieser Stelle bei Werner von Webbausteine.de ganz herzlich für seine große Unterstützung zum Einbau bedanken. Der Einbau mit diesen Änderungen ist nur für fortgeschrittene Benutzer zu empfehlen.

Nachtrag am 21.02.2016: Der Formular Generator verfügt nun über eine Option bei ‘Sicherheitsabfrage’, diesen reCAPTCHA Code gleich mit zu generieren.

Für dieses Formular habe ich den Formular Generator von Webbausteine.de verwendet. Ich habe hier die Standard-Konfiguration des Generators verwendet - also lediglich 2 x am Button “weiter” geklickt, um das Formular generieren zu lassen.

Das so generierte Formular könnt Ihr in NOF in einem Iframe anzeigen lassen oder (besser) direkt in NOF einbauen. Bitte lest für den direkten Einbau in NOF mein Tutorial hier.

Das Formular von Webbausteine.de hat selbst schon verschiedene Möglichkeiten für einen effektiven Spamschutz, hier wollte ich jedoch diesen alternativen Spamschutz von Google reCAPTCHA einmal ausprobieren. Voraussetzung ist die Skriptsprache PHP 5.4 oder höher am Sever.

Dazu müsst Ihr bei Google ein Konto haben und Euch dort anmelden. Ruft dann Google reCAPTCHA auf. Klickt auf den Button “Get reCAPTCHA”. Tragt dort einen Titel (Label) für Euer API sowie die zu verwendenden Domain-Namen von Euch ein - bei mir ist das “www.nof-tutorials.com”.

Klickt nach der Erstellung auf den Link "Schlüssel" und kopiert Euch die beiden Codes "Webseitenschlüssel" und "Geheimer Schlüssel", die Ihr zum Einbau in das Formular benötigen werdet. Auf dieser Seite von Google wird Euch auch später eine Statistik der Verwendung von diesem API angezeigt.

Google reCAPTCHA

Ihr solltet zum Testen zunächst den kompletten Code (unten) kopieren und in einen Editor einfügen. Speichert dann die Datei als z.B. “formular.php”, kopiert sie auf Euren Server und ruft sie im Browser auf. Bitte ändert vorher die Weiterleitung dann in “formular.php” und tragt Eure korrekte e-Mail Adresse sowie Eure persönlichen Texte ein.

Unten mein generierten und modifizierter Code vom Formular-Generator. Ich markiere hier lediglich die Verlinkung zum Google reCAPTCHA API in blau, die Schlüssel habe ich hier abgeändert und auch fett blau markiert. Ersetzt diese Schlüssel mit Euren Schlüsseln. Bitte passt bei Bedarf die weiteren blauen Bereiche an Euer Formular an, da Ihr ja eventuell andere Formular-Felder verwendet.


<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title></title>
 
  <!-- Google reCAPTCHA API -->
  <script src='https://www.google.com/recaptcha/api.js'></script>


  <style>
  body, textarea {
   font-family: Verdana, Sans-Serif;
   font-size: 14px;
  }

  span.pflichtfeld {
   font-size: 12px;
   color: Red;
  }
  </style>

 </head>

<body>

<?php
/*
   Aktion: Formulardaten als E-Mail versenden.
   Formular - PHP 5.4+, Zeichenkodierung: UTF-8
   Siehe: www.webbausteine.de/tipps/schriftzeichen_richtig_darstellen.php

   Erstellt mit dem Formular Generator (23.01.2016) -
   www.webbausteine.de/tools/formulargenerator.php

   Bitte testen Sie das Formular ausführlich und
   beachten Sie die Hinweise im Quelltext!
*/

// PHP Fehlermeldungen (1 um das Formular zu testen) anzeigen.
error_reporting(0); // (0/1)

// Weiterleitung - Nach dem absenden des Formulars,
// gelangt der Benutzer über einen Link auf folgende Seite (hier die gleiche Seite):
$Weiterleitung = "formular.php";

$name = isset($_POST["name"]) ? strip_tags(trim($_POST["name"])) : ""; // Name
$email = isset($_POST["email"]) ? strip_tags(trim($_POST["email"])) : ""; // E-Mail
$betreff = isset($_POST["betreff"]) ? strip_tags(trim($_POST["betreff"])) : ""; // Betreff
$nachricht = isset($_POST["nachricht"]) ? strip_tags(trim($_POST["nachricht"])) : ""; // Nachricht
$KopieCk = isset($_POST["Kopie"]) ? " checked='checked'" : null; // E-Mail Kopie


// Benutzereingaben überprüfen
// Die Meldungen müssen hier eventuell angepasst werden.
$Fehler = ["name"=>"", "email"=>"", "betreff"=>"", "nachricht"=>"", "recapcha"=>""];
if (isset($_POST["submit"])) {
 $Fehler["name"] = strlen($_POST["name"]) < 1 ? " Bitte füllen Sie dieses Feld aus!" : "";
 $Fehler["email"] = filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) === false ? " Geben Sie eine gültige E-Mail-Adresse ein!" : "";
 $Fehler["betreff"] = strlen($_POST["betreff"]) < 1 ? " Bitte füllen Sie dieses Feld aus!" : "";
 $Fehler["nachricht"] = strlen($_POST["nachricht"]) < 10 ? " Bitte füllen Sie dieses Feld aus (min. 10 Zeichen)!" : "";
 $Fehler["recapcha"] = strlen($_POST['g-recaptcha-response']) < 100 ? " Bitte das reCAPCHA bestätigen!" : "";
}

// Formular erstellen
$Formular = "
<form action='" . $_SERVER["SCRIPT_NAME"] . "' method='post'>

<p>
 <label> Name:
<span class='pflichtfeld'>&#10034; " . $Fehler["name"] . "</span><br>
  <input type='text' name='name' value='" . $name . "' size='35'>
 </label>
</p>

<p>
 <label> E-Mail:
<span class='pflichtfeld'>&#10034; " . $Fehler["email"] . "</span><br>
  <input type='email' name='email' value='" . $email . "' size='35'>
 </label>
</p>

<p>
 <label> Betreff:
<span class='pflichtfeld'>&#10034; " . $Fehler["betreff"] . "</span><br>
  <input type='text' name='betreff' value='" . $betreff . "' size='45'>
 </label>
</p>

<p>
 <label> Nachricht:
 <span class='pflichtfeld'>&#10034; " . $Fehler["nachricht"] . "</span><br>
 <textarea name='nachricht' cols='40' rows='8'>" . $nachricht . "</textarea>
 </label>
</p>

<p>
 <label>
 <input type='checkbox' name='Kopie'" . $KopieCk . ">
 Eine Kopie dieser Nachricht an meine E-Mail Adresse
 </label>
</p>

<div class='g-recaptcha' data-sitekey='6LtSMBYUAAAAOHsOQ_UVcllvsnOJTMAAQNJNaJFd'></div>
<span class='pflichtfeld'>" . $Fehler["recapcha"] . "</span>

<p>
 <br>
 <input type='submit' name='submit' value='Formular absenden'>
</p>

<p>
 <small>Bitte alle mit <span class='pflichtfeld'>&#10034;</span>
 markierten Felder ausfüllen.</small>
</p>

</form>
";

// Formular abgesendet
if (isset($_POST["submit"])) {

 // Sind keine Benutzer-Eingabefehler vorhanden
 if (implode("", $Fehler) == "") {

  $captcha = $_POST['g-recaptcha-response'];

  // Hier muss der geheime Schlüssel (Secret Key) eingefügt werden
  $SecretKey = "5LiSMBYTAAAOAIi2MmPkm3Rx2-hO4bMyoYmY2KNO";


  $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=" . $SecretKey . "&response=" .
   $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']);

  if ($response.success==true) {

   // Daten als E-Mail versenden (Vorschlag) - Bitte anpassen!
 
   // Zeitzone und das aktuelle Datum setzen
    // http://de3.php.net/manual/de/timezones.europe.php
   date_default_timezone_set("Europe/Berlin");
   $Datum = date("d.m.Y H:i");
 
   // Empfänger E-Mail
   $Mailto = "eMail@DeineDomain.de";
 
   // Inhalt der E-Mail setzen
   $Text = "   Gesendet am: $Datum Uhr
    Name: $name
    E-Mail: $email
    Betreff: $betreff
    Nachricht: $nachricht
   ";
 
   // E-Mail versenden
   mb_internal_encoding("UTF-8");
   $Betreff = mb_encode_mimeheader($betreff, "UTF-8", "Q");
   $Kopfzeile = "MIME-Version: 1.0;\nFrom: " . mb_encode_mimeheader($name, "UTF-8", "Q") .
    "<" . $email . ">" . "\nContent-Type: text/plain; Charset=UTF-8;\n";
 
   if (mail($Mailto, $Betreff, $Text, $Kopfzeile)) {
 
    echo "<p>Vielen Dank, die Nachricht wurde versendet.</p>";
   }
   else {
 
    // Wenn die Daten nicht versendet werden konnten,
    // wird die E-Mail-Adresse für den direkten Kontakt eingeblendet.
    echo "<p>Beim Senden der Nachricht ist ein Fehler aufgetreten!<br>" .
    "Bitte wenden Sie sich direkt an: <a href='mailto:" . $Mailto . "'>" . $Mailto . "</a></p>";
   }
 
   // E-Mail Kopie versenden (Vorschlag) - Bitte anpassen!
   if (isset($_POST["Kopie"])) {
 
    // Diese Nachricht wird an die E-Mail-Adresse des Besuchers gesendet.
 
    // Name/Signatur
    $Signatur = "Deine Unterschrift";
 
    // Betreff
    $Betreff = "Kopie einer Formular Nachricht";
 
    // Inhalt der E-Mail setzen
    $Text = "   Vielen Dank für Ihren Besuch ...
    Wir haben folgende Nachricht erhalten:
 
    Name: $name
    E-Mail: $email
    Betreff: $betreff
    Nachricht: $nachricht

 
    Mit freundlichen Grüßen
     $Signatur 
    ";
 
    // E-Mail Kopie versenden
    $Betreff = mb_encode_mimeheader($Betreff, "UTF-8", "Q");
    $Kopfzeile = "MIME-Version: 1.0;\nFrom: " . mb_encode_mimeheader($Signatur, "UTF-8", "Q") .
     "<" . $Mailto . ">" . "\nContent-Type: text/plain; Charset=UTF-8;\n";
    if (mail($email, $Betreff, $Text, $Kopfzeile)) {
     echo "<p>Sie erhalten eine Kopie der Nachricht an Ihre E-Mail-Adresse.</p>";
    }
   }
 
    // Weiterleitung
    echo "<p><a href='" . $Weiterleitung . "' target='_top'>Weiter</a></p>";

  }
  else {
   echo '<h2>You are spammer ! Get out</h2>';
  }

 }
 else {

  // Formular und Benutzer-Eingabefehler ausgeben
  echo $Formular;
 }
}
else {

 // Formular ausgeben
 echo $Formular;
}
?>

</body>
</html>
 

Bitte beachtet, dass das gesamte, vom Formular-Generator erstellte Skript, hier modifiziert wurde. Es wurden verschiedene IF-Bedingungen und die Codes für das Google reCAPTCHA eingefügt.

Ihr müsst also genau aufpassen, dass Ihr lediglich die formularspezifischen Eigenschaften an Euer Formular anpasst.

Für den Einbau in NOF dürft Ihr nur die Verlinkung zum API, eventuelle Style Eigenschaften “Zwischen Head Tags” (von <style> ... bis ... </style>) einfügen und für das Formular den gesamten PHP-Teil (von <?php ... bis ... ?>) in den HTML-Code Editor eines Textfeldes einfügen, so wie in meinem Tutorial zum Formular-Generator bereits explizit erklärt.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik