Formular-Generator - von Werner-Zenk.de  und Tutorial zu NOF und Mobirise. Leider hat Werner-Zenk.de seine Webseiten am 10.07.2022 eingestellt.
Hier noch ein Beispiel zum Ein- und Ausblenden von Feldern mit diesem Quelltext-Tutorial.

Dieser Kontakt-Formular Generator ist eigentlich selbsterklärend. Bitte erstellt Eurer Formular hier:

Zum Formular-Generator auf meiner Seite “Mobirise-Tutorials.com”

Es gibt jede Menge Optionen für das Formular. Felder hinzufügen eine Mail an den Benutzer senden lassen oder auch einen Spamschutz einstellen, die Farben ändern und unendlich viele andere Anpassungen vornehmen. Auch HTML5 kann berücksichtigt werden. Unten eine Ansicht vom neuen Generator.

Formular Generator

... auf der letzten Seite (Formular erstellen) generiert das Programm eine vollständige HTML-Seite, die auch direkt zu verwenden ist, indem man den gesamten Code (unten) z.B. als “index.php” speichert und auf den Server in ein Verzeichnis seiner Wahl kopiert und z.B. mittels Iframe verlinkt.

Unten ein Beispiel des Codes. Ich habe hier die Bereiche, die Ihr zum direkten Einbau in NOF oder Mobirise benötigt, farbig markiert. Lest bitte unten weiter.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title></title>

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

  span.pflichtfeld {
   font-size: 12px;
   color: Red;
  }

  span.hilfetext {
   font-size: 10px;
   font-style: Oblique;
  }

  blockquote {
   width: 385px;
  }
  </style>

 </head>
<body>

<?php
/*
   Aktion: Formulardaten als E-Mail versenden.
   Formular - PHP 5.4+, Zeichenkodierung: UTF-8

   Erstellt mit dem Formular Generator (28.03.2016) -
   http://www.nof-tutorials.com/Webbausteine-Formular-Generator/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(1); // (0/1)

// Weiterleitung - Nach dem absenden des Formulars,
// gelangt der Benutzer über einen Link auf folgende Seite:
$Weiterleitung = "index.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

// Benutzereingaben überprüfen
// Die Meldungen müssen hier eventuell angepasst werden.
$Fehler = ["name"=>"", "email"=>"", "betreff"=>"", "nachricht"=>"", "sicherheit"=>""];
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["sicherheit"] = (md5($_POST["zip"]) != $_POST["zip2"]) ? "Die Rechenaufgabe ist leider falsch!" : "";
}

// Sicherheitsabfrage - Rechenaufgabe
$Z0 = [mt_rand(1, 9), mt_rand(1, 9)];
$Z1 = max($Z0); $Z2 = min($Z0);
$Spam = $Z1 . " &#43; &#" . (48 + $Z2) . ";";
$Schutz = md5($Z1 + $Z2);

// 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' required='required'>
 </label>
</p>

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

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

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

<p>
 <label> Sicherheitsabfrage:
 <span class='pflichtfeld'>&#10034; " . $Fehler["sicherheit"] . "</span><br>
 <em>" . $Spam . "</em> =
 <input type='text' name='zip' size='4' pattern='[0-9]{1,2}' required='required' autocomplete='off'>
 </label>
 <input type='hidden' name='zip2' value='" . $Schutz . "'>
 <br><span class='hilfetext'> Bitte lösen Sie die Rechenaufgabe. </span><br>
</p>

<p>
 <br>
 <input type='submit' name='vorschau' value='Vorschau' formnovalidate='formnovalidate'> -
 <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>
";

// Vorschau
if (isset($_POST["vorschau"])) {
 echo strip_tags("<blockquote>
 <h4>Vorschau</h4>
 <b>Name:</b> $name <br>
 <b>E-Mail:</b> $email <br>
 <b>Betreff:</b> $betreff <br>
 <b>Nachricht:</b> <br>" . nl2br($nachricht) . "
 </blockquote>", "<blockquote><h4><b><br>");
}

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

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

  // 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 = "name@example.com";

  // 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>";
  }

  // Weiterleitung
  echo "<p><a href='" . $Weiterleitung . "' target='_top'>Weiter</a></p>";
 }
 else {

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

 // Formular ausgeben
 echo $Formular;
}
?>

</body>
</html>

 

  • Stellt die Seite, auf der Ihr das Formular einbaut, auf die Dateierweiterung .php um

    > Menü oben > Bearbeiten > Benutzerdefinierte Namen > Dateierweiterung > .php wählen

     
  • Oben habe ich die CSS für das Formular gelb markiert. Diese Style-Anweisungen gehören in die HTML des Layouts Eurer Formular-Seite.

    > Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head-Tags” einfügen.

     
  • Nun lest Ihr Euch bitte aufmerksam alle Kommentare in dem blau markierten Bereich durch. Hier habe ich zusätzlich noch die von Euch einzutragenden Daten fett markiert. Dies ist Eure korrekte e-Mail Adresse und die URL (Seite), die als Link für die Weiterleitung erscheinen soll.

    Nun kopiert Ihr den gesamten blau markierten Bereich, also von

    <?php

    bis

    ?>

    in den HTML-Code Editor eines Textfeldesvon NOF und fertig.

    > Textfeld aufziehen (Cursor blinkt) > Fenster “Textfeld Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML”


    Der Einbau in der Software “Mobirise” funktioniert ganz genauso, nur verwendet Ihr dort die Erweiterung “Code Editor” und nehmt dazu einen einfachen Textblock aus der Rubrik “Article”. Hier eine Beispielseite mit einem Formular von diesem Generator in meiner Mobirise-Seite. Hier geht es zu meinem Tutorial zum direkten Einbau in die Software Mobirise.

Beachte bitte, dass persönliche Daten eines Benutzers, nur über eine verschlüsselte Verbindung (https:) zum Webserver gesendet werden sollten! Dies betrifft insbesondere gewerbliche Seiten.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann