bootstrap slider

Formular

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.

Formular

Dies ist ein Mobirise-Block mit einem Formular. Die Mail wird über ein eigenes Mailskript verschickt und nicht über den Formoid-Server, den Mobirise verwendet.

Ihr dürft gerne testen.

Tutorial und Download Mailscript

23. September 2017

Bitte ladet Euch die Mailscripts an dem Button unten von meinem Server herunter.

Downloads insgesamt seit 23.09.2017: 79

Entpackt das ZIP-Archiv und öffnet im Verzeichnis "2017-09-23-Mobirise_Mailscripte" 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-5.2-stable" dann in das Stammverzeichnis Eures Mobirise-Projektes, also in das Verzeichnis, indem sich auch alle anderen Webseiten befinden.

// mailscript.php

// Version vom 23.09.2017

// Empfänger

// An diese E-Mail-Adresse wird die Nachricht gesendet. Bitte einen Namen und eMail sowie den Seitennamen der Formularseite eintragen:

$empfaengerName = "John Doe"; // Name des Empfängers anpassen

$empfaengerEmail = "john@example.com"; // E-Mail des Empfängers anpassen

$formularSeite = "Kontakt-Mailscript-Formular.php"; // Dateiname des Formulars anpassen (hier ist bereits meine Fomularseite eingetragen)

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 Feldernamen Ihr nun verwendet habt. In meinem Formular-Beispiel auf dieser Seite habe ich also das Feld "Phone" nicht deaktiviert. Wollte man dieses Feld deaktivieren, so müsste man entsprechend im Skript auch diese Zeile entfernen bzw. mit 2 Slash // am Beginn der Zeile deaktivieren.

  // 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 <style> Anweisung für diese Anzeige eingebaut.

  <!-- 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 entsprechene Status-Meldung angezeigt. Ich habe hier noch den Anker mit meiner Block-ID #extHeader10-en 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#extHeader10-en');

 }

 else {

  header("Location: " . $formularSeite . '?status=KO#extHeader10-en');

 }

Status Meldung

Hier ein Screenshot als Beispiel wie die Status Meldung,
nach dem Versand der eMail,
aussehen kann.

Status

Dieses Script verwendet den PHPMailer 5.2. Diese Skripte stammen von hierIch habe lediglich das gesamte Verzeichnis "examples" aus dem Verzeichnis "PHPMailer-5.2-stable" gelöscht, da die Skripte aus diesem Beispiel-Verzeichnis zu einem eventuellen Anschlagen des Viren-Scanners von 1&1, wegen des verwendeten Datei-Typs .phps, führen können. 


Verwendet also den PHPMailer aus meinem Download. Bitte lest dazu auch meine Bemerkung unten:

Bemerkung:


... es gibt bei 1&1 bei manchen das Problem, dass der Viren-Scanner von 1&1 anschlägt, wenn man das Verzeichnis "PHPMailer-5.2-stable" vom PHPMailer auf den Server lädt. Bei mir gab es diese Meldung nicht.


Solltet Ihr diese Meldung erhalten, dann müsst Ihr Euer ursprüngliches FTP-Passwort im Kunden-Center von 1&1 wieder herstellen:


> 1&1 Control Center > Hosting > Sicherer FTP-Zugang > am Zahnrad das Passwort neu eintragen


Löscht dann das Verzeichnis "examples" aus dem Verzeichnis "PHPMailer-5.2-stable", bevor Ihr das Verzeichnis "PHPMailer-5.2-stable" erneut auf den Server kopiert - dann sollte es funktionieren. In meiner Download-Datei ist das Verzeichnis "examples" bereits entfernt.

Viel Spaß beim Einbau Eures eigenen Mailscripts.