Kontakt Formular von Mobirise mit einem eigenen Mail-Skript und
Rückkehr zur Formularseite
Zur Variante mit Weiterleitung zu einer Erfolgsseite
Vielen Dank an Werner-Zenk.de für die Entwicklung von diesem Skript.
Mein Tutorial findet Ihr unten.
aktualisierte Version vom 05. Mai 2021 von PHP 5.5 bis PHP 8
Bitte ladet Euch die Mailscripts an dem Button unten von meinem Server herunter.
Downloads insgesamt seit 23.09.2017: 1451
Entpackt das ZIP-Archiv und öffnet im Verzeichnis "2021-05-05-mailscript_2_phpmailer640" das Mailscript (mailscript.php) mit einem Editor wie z.B. Notepad++ und tragt im oberen Teil des Mailscripts Euren Namen und Eure e-Mail Adresse ein. Weiterhin müsst Ihr den Dateinamen Eurer Formularseite auf das Extension .php umstellen und diesen, hier also:
Kontakt-Mailscript-Formular.php
eintragen. Achtet darauf, dass das Mailscript die Kodierung UTF-8 ohne BOM beibehält. Dieses Skript zeigt den Status vom Versand direkt auf dieser Seite an, kehrt also nach der Verarbeitung der Datei "mailscript.php" auf diese Seite zurück.
Kopiert, mit Eurem FTP-Programm, dieses Script "mailscript.php", sowie das gesamte Verzeichnis "PHPMailer-master" dann in das Stammverzeichnis Eures Mobirise-Projektes, also in das Verzeichnis, indem sich auch alle anderen Webseiten befinden.
// Empfänger
// An diese E-Mail-Adresse wird die Nachricht gesendet. Namen und eMail sowie den Seitennamen der Formularseite eintragen:
$empfaengerName = "John Doe"; // Name des Empfängers
$empfaengerEmail = "john@example.com"; // E-Mail des Empfängers
$formularSeite = "Kontakt-Mailscript-Formular.php"; // Dateiname des Formulars anpassen (meine Fomularseite ist eingetragen)
Formular Beispiel
Tragt nun lediglich im Mobirise-Formular anstelle eurer e-Mail Adresse im Feld "Notification Email or Action URL"
den Namen vom Script "mailscript.php" ein, das ihr ja bereits in das Stammverzeichnis am Server kopiert habt.
Denkt daran die von euch verwendeten Formular-Feld-Namen im Skript "mailscript.php" eventuell zu ergänzen oder zu entfernen, je nachdem welche Feldnamen ihr nun verwendet habt. In meinem Formular-Beispiel Screenshot oben, habe ich also das Feld "Phone" deaktiviert und entsprechend im Skript auch diese Zeile entfernt bzw. mit 2 Slash // am Beginn der Zeile deaktiviert.
// Inhalt der E-Mail setzen
$inhaltEmail = "Gesendet am: $datum Uhr
Name: " . $_POST["name"] . "
E-Mail: " . $_POST["email"] . "
// Phone: " . $_POST["phone"] . "
Nachricht: " . $_POST["message"] . "
";
Kopiert Euch die weiteren Code-Bereiche aus der dem Download beiliegenden Beispielseite "test-example-form.php". Fügt das JavaScript unten zur Anzeige, nach dem Versand der Mail, in die
> "Page Settings" > "Inside <head> code"
ein. Weiterhin habe ich an dieser Stelle auch noch eine zusätzliche
<!-- JavaScript Status -->
<script>
window.addEventListener("load", function() {
if (window.location.search != "") {
var W = window.location.search.split("=");
if (W[1] == 'OK') {
document.getElementById("status").innerText = 'Die Nachricht wurde erfolgreich versandt.';
document.getElementById("status").classList.add("erfolgreich");
}
if (W[1] == 'KO') {
document.getElementById("status").innerText = 'Beim versenden der Nachricht ist leider ein Fehler aufgetreten!';
document.getElementById("status").classList.add("fehler");
}
}
});
</script>
<!-- CSS Status -->
<style>
.erfolgreich {
color: #000000;
background-color: #00CA33;
padding: 10px;
max-width: 100%;
border-radius: 5px;
margin: auto 15px 20px 15px;
text-align: center;
}
.fehler {
color: #000000;
background-color: #FFFFBF;
padding: 10px;
max-width: 100%;
border-radius: 5px;
margin: auto 15px 20px 15px;
text-align: center;
}
</style>
Zur Anzeige dieser Status-Meldung zieht Ihr Euch noch das DIV mit der id="status" unten an beliebiger Stelle im Code-Editor auf. Ich habe dieses DIV hier direkt über dem <form> Tag eingebaut.
<div id="status"></div>
In der Datei "mailscript.php" wird ganz unten die Umleitung zu Euer Formularseite gesetzt. Mit der PHP-Aktion ?status=OK wird die entsprechende Status-Meldung angezeigt. Ich habe hier noch den Anker mit meiner Block-ID #Formular hinzugefügt, sodass mein Formular-Block nach dem Senden auch sogleich, inklusive der Status-Meldung, angezeigt wird. Passt dies auf Eure Block-ID entsprechend an.
// E-Mail versenden
if ($mail->Send()) {
header("Location: " . $formularSeite . '?status=OK#Formular');
}
else {
header("Location: " . $formularSeite . '?status=KO#Formular');
}
Erfolgs Nachricht
Hier ein Screenshot als Beispiel wie die Status Meldung, nach dem Versand der eMail, aussehen kann.
Google Translator
Funktionale Cookies akzeptieren