Mobirise Tutorials

Formular-Generator

Formular-Generator

Aufrufe insgesamt seit 28.03.2016: 10.942 x

Der Formular-Generator speichert eure Eingaben zur Erstellung des Formulars im Local Storage eures Browser, sodass ihr bis zur Löschung dieser Daten an dem Formular weiter arbeiten könnt. Ihr findet zum Löschen der Local Storage unten auf der Seite -1- vom Formular-Generator einen Button:

 Angaben und Einstellungen löschen

Diese Daten werden also ausschließlich in eurem Browser hinterlegt.

Tutorial zum Formular-Generator

Formular-Generator - von Werner-Zenk.de und Tutorial zu Mobirise und NetObjects Fusion.

Werner-Zenk.de hatte seine Webseiten am 10.07.2022 eingestellt. Mit freundlicher Genehmigung von Werner stelle ich daher hier seinen Formular-Generator vom 24.11.2022 weiterhin zu Verfügung. Der alte Generator wurde hier seit dem Jahr 2016 bereits 9670 Mal aufgerufen.

Am 27.11.2022 hat Werner seine Domain Werner-Zenk.de wieder online gestellt.

Diesen Formular-Generator hat Werner am 13.02.2024 eingestellt. Hier geht es zu dem neuen Kontaktformular-Generator auf der Seite von Werner-Zenk.de, der in Verbindung mit dem bekannten Script PHPMailer arbeitet. Bei diesem Generator könnt ihr auch am Zahnrad oben bei den Formular-Optionen "SMTP" für das Mail Protokoll wählen und somit die Zugangsdaten von eurem Provider anwenden.

Dieser Formular-Generator ist eigentlich selbsterklärend, dennoch hier einige Tipps.

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. Das Formular besteht lediglich aus einer Datei und lässt sich sehr einfach in eine Website, die PHP 5.4 oder höher unterstützt, integrieren.

Formular-Generator Seite 1

Formular-Generator -1-

Formular in drei Schritten

Ruft den Formular-Generator oben am Button auf. 

Der Generator zeigt drei Seiten.

Hier im Screenshot die Seite -1- mit den Grundeinstellungen. Dort könnt ihr bereits die für euer Formular gewünschten Felder mit ihren Bezeichnungen einsetzen und auch sortieren.

Unter den Optionen könnt ihr unterschiedliche Auswahlen treffen. Hakt auf jeden Fall "HTML 5" an.

Ich empfehle einen Spamschutz gegen Spambots, wie z.B. eine einfache Rechenaufgabe. Für Mobirise ist es sinnvoll auch "Bootstrap verwenden" anzuhaken, damit die Eingabefelder die entsprechende Bootstrap-Class erhalten.

Probiert einfach alle Optionen einmal aus.

Der Formular-Generator sichert eure Einträge im Local Storage von eurem Browser. So könnt ihr, solange dieser Webspeicher von euch nicht gelöscht wird, jederzeit zum Generator zurückkehren und das Formular nochmals ändern oder weiter bearbeiten.

Auf der Seite -2- könnt ihr dann jedes Feld nochmals weiter bearbeiten, den Feldtyp ändern oder es zum Pflichtfeld machen. Bitte guckt euch sämtliche Möglichkeiten ganz genau an.

Auf der Seite -3- wird dann das fertige Formular dargestellt und darunter der generierte Code, den ihr dann in Mobirise direkt einbaut.

Ihr könnt jederzeit zwischen den Seiten vor und zurück gehen. Die Änderungen passen sich selbstständig sofort an.

Formular-Generator Seite 2

Formular-Generator -2-

Formular-Generator Seite 3

Formular-Generator -3-

Auf der dritten und letzten Seite generiert das Programm eine vollständige HTML-Seite mit dem Quelltext, die auch direkt zu verwenden ist, indem man den gesamten, generierten Code zum Beispiel als “kontakt.php” speichert und auf den Server in ein Verzeichnis seiner Wahl kopiert. Dann könnt ihr diese Datei über einen Iframe einbinden.

Unten ein Beispiel des Codes eines einfachen Formulars. Auch wenn der generierte Code vielleicht zunächst kompliziert erscheint, ist der Einbau kinderleicht.

Ich habe hier die Bereiche, die Ihr zum direkten Einbau in Mobirise benötigt, farbig markiert.

Lest dazu bitte unten weiter 

Beispiel Quelltext:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Den Dateipfad zu Bootstrap eventuell anpassen! -->
<link rel="stylesheet" href="bootstrap.min.css">

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

span.pflichtfeld {
font-size: 0.90rem;
color: Red;
}

span.hilfetext {
font-family: Arial, Tahoma, Sans-Serif;
font-size: 0.80rem;
font-style: Oblique;
color: #009500;
}

</style>

</head>
<body>

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

Erstellt mit dem Formular Generator (24.11.2022) -
https://www.mobirise-tutorials.com/Formular-Generator/

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 = "kontakt.php"; // Relativer Pfad, ausgehend vom Formular.

$name = isset($_POST["name"]) ? htmlspecialchars(trim($_POST["name"])) : ""; // Name
$email = isset($_POST["email"]) ? htmlspecialchars(trim($_POST["email"])) : ""; // E-Mail
$betreff = isset($_POST["betreff"]) ? htmlspecialchars(trim($_POST["betreff"])) : ""; // Betreff
$nachricht = isset($_POST["nachricht"]) ? htmlspecialchars(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"=>"", "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["nachricht"] .= strlen($_POST["nachricht"]) > 5000 ? " Es sind maximal 5000 Zeichen erlaubt!" : "";
$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 . " + &#" . (48 + $Z2) . ";";
$Schutz = md5($Z1 + $Z2);

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

<p>
<label> Name:
<span class='pflichtfeld'>✲ " . $Fehler["name"] . "</span><br>
<input type='text' name='name' value='" . $name . "' size='35' required='required' class='form-control' tabindex='1'>
</label>
</p>

<p>
<label> E-Mail:
<span class='pflichtfeld'>✲ " . $Fehler["email"] . "</span><br>
<input type='email' name='email' value='" . $email . "' size='35' required='required' class='form-control' tabindex='2'>
</label>
</p>

<p>
<label> Betreff:
<span class='pflichtfeld'>✲ " . $Fehler["betreff"] . "</span><br>
<input type='text' name='betreff' value='" . $betreff . "' size='35' required='required' class='form-control' tabindex='3'>
</label>
</p>

<p>
<label> Nachricht:
<span class='pflichtfeld'>✲ " . $Fehler["nachricht"] . "</span><br>
<textarea name='nachricht' cols='40' rows='8' placeholder='maximal 5.000 Zeichen' maxlength='5000' required='required' class='form-control' tabindex='4'>" . $nachricht . "</textarea>
</label>
</p>

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

<p>
<label> Sicherheitsabfrage:
<span class='pflichtfeld'>✲ " . $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='submit' value='Senden' class='btn' tabindex='5'>
</p>

<p>
<small>Bitte alle mit <span class='pflichtfeld'>✲</span>
markierten Felder ausfüllen.</small>
</p>

</form>
";

// 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
// Eine beim Provider registrierte E-Mail Adresse verwenden!
$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_language("de");
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") .
"<" . $Mailto . ">" . "\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 Signatur";

// Betreff
$Betreff = "Kopie einer Nachricht";

// Inhalt der E-Mail setzen
$Text = " Vielen Dank für Ihren Besuch bei ...
Wir haben folgende Nachricht erhalten:

Name: $name
E-Mail: $email
Betreff: $betreff
Nachricht: $nachricht

Mit freundlichen Grüßen
$Signatur
";

// E-Mail Kopie versenden
mb_language("de");
mb_internal_encoding("UTF-8");
$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 {

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

// Formular ausgeben
echo $Formular;
}
?>


</body>
</html>

Erklärung zum Beispiel Quelltext oben

Ich habe also im Code oben zum einen die Style-Anweisung (CSS) in grün markiert, die ihr eigentlich ganz weglassen könnt oder die CSS-Anweisungen, die ihr haben wollt dann in den Bereich CSS Editor vom Code Editor kopieren könnt, dann also ohne das <style> Tag </style>.

Die Seite mit dem Formular muss in Mobirise die Dateierweiterung .php haben. Ändert also in den Seiteneinstellungen den Dateinamen der Seite von meinetwegen kontakt.html in kontakt.php

Bitte bedenkt, dass die PHP-Skriptsprache erst nach der Publizierung auf den Server arbeiten kann, denn am PC habt ihr, wenn ihr keinen lokalen Host installiert habt, ja kein PHP und könnt bei der lokalen Publizierung nicht das Ergebnis sondern nur den Code sehen.

Die Seite, die nach dem Senden aufgerufen werden soll und die E-Mail Adresse, an die das Formular gesendet werden soll, sowie eure Signatur habe ich rot markiert. Ändert also diese Einträge entsprechend, also den Seitennamen eurer Kontaktseite und eure gültige E-Mail Adresse, die beim Provider eurer Domain auch hinterlegt sein muss. Die Signatur ist eine beliebige Unterschrift der Mail.

Für das Formular selbst verwendet ihr am besten ein einfaches Textfeld aus der Rubrik "Article" und ersetzt den Beispieltext von Mobirise mit dem gesamten blau markierten PHP Code.

Viel Spaß und Erfolg beim Einbau eures eigenen Formulars.

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren