Mobirise Tutorials

Ich lehne jede Verantwortung für die Sicherheit oder die Funktionen der Skripte von diesem Generator ab.

Bearbeitet das Skript anschließend mit einem Editor wie Notepad oder Notepad++, sodass die Codierung UTF-8 erhalten bleibt. Lest auch alle Bemerkungen in der Datei README.txt aufmerksam durch.

Im Skript send.php müsst ihr dann lediglich ab Zeile 34 im Abschnitt 'Konfiguration' die E-Mail des Empfängers und die SMTP-Daten eures Hosting-Anbieters eintragen. Die E-Mail-Adresse des Empfängers entspricht somit der E-Mail-Adresse von euch, die beim Internet-Anbieter (Provider) hinterlegt sein muss. Beim Versand von E-Mails über SMTP muss eine E-Mail-Adresse auf dem Server des E-Mail-Dienstleisters angelegt und für den Versand freigeschaltet sein. Andernfalls können E-Mails entweder nicht gesendet werden oder der SMTP-Server lehnt sie als Spam ab, da eine fehlende oder nicht autorisierte Absenderadresse ein Sicherheitsrisiko darstellt.

Speichert das so vervollständigte Skript anschließend ab.

Kopiert anschließend sämtliche Dateien sowie das komplette Verzeichnis PHPMailer unverändert in ein Verzeichnis eurer Wahl auf den Server.

Ruft zum Testen zunächst die URL zu der Datei index.php auf.

Einbau im iFrame

Für die Integration in Mobirise habe ich ein iFrame vorgesehen. Dieses Skript von Werner Zenk wurde nachträglich in der Version vom 25. August 2025 in den Download des Formulargenerators aufgenommen, sodass ihr den nachträglichen Einbau sparen könnt. Dennoch bleibt meine Beschreibung hier bestehen. 

Das iFrame muss die id="myFrame" erhalten, und der Mobirise-Block muss die id="Formular" tragen. Die entsprechende ID für den Formular-Block muss oben links im Code-Editor angepasst werden, wie im unten stehenden Screenshot zu sehen ist.

Das dazugehörige dynamische Skript unten von Werner Zenk gehört vor das schließende </head> Tag in der Datei index.php und in der Datei success.php:

<!-- Resize-Skript für ein dynamisches iFrame von Werner Zenk -->
<script>
  window.addEventListener("load", fenster);
  window.addEventListener("resize", fenster);
  function fenster() {
   if (parent.document.getElementsByTagName("iframe")[0]) {
    parent.document.getElementsByTagName("iframe")[0].style.height =
     document.getElementsByTagName("html")[0].offsetHeight +'px';
   }
  }
</script>

Zieht euch einen Block eurer Wahl auf. Hier habe ich einen einfachen Textblock aus der Rubrik 'Article' des Standard-Themas 'Mobirise5' verwendet und meine Hintergrundfarbe in den Skripten index.php und success.php eingetragen.

Fügt nun den iFrame Code unten mit eurer URL zur Startseite der Anwendung, dem Skript index.php ein. Bitte lasst die id="myFrame" unverändert, denn diese wird in den Skripten als Sprung-Anker, den ich hier nachträglich eingebaut habe, mit diesem ID-Namen angesprochen.

<iframe id="myFrame" src="https://www.mobirise-tutorials.com/Tutorials-3/SMTPMail-KI-Volker/index.php"></iframe>

Sprung-Anker

Ich habe hier also noch zusätzlich Sprung-Anker gesetzt. Dafür müssen zwei Dateien angepasst werden. Meine Skripte für die Sprung-Anker wurden nachträglich in der Version vom 25. August 2025 in den Download des Formulargenerators aufgenommen, sodass ihr den nachträglichen Einbau sparen könnt. Dennoch bleibt meine Beschreibung hier bestehen.

Anpassung der Datei index.php:

Fügt dieses JavaScript direkt vor dem schließenden </body> Tag ein:

<!-- Script Sprunganker für die id="myFrame" vom iFrame und die id="Formular" der Mobirise-Sektion -->
<script>
function scrollParentToAnchor() {
  try {
    if (window.parent && window.parent !== window) {
      // IFrame Höhe anpassen
      var ifr = window.parent.document.getElementById('myFrame');
      if (ifr) {
        ifr.style.height = document.documentElement.scrollHeight + 'px';
      }
      // Zum Anker #Formular scrollen
      var anchor = window.parent.document.getElementById('Formular');
      if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  } catch (e) {
    console.warn("Scroll zu #Formular nicht möglich:", e);
  }
}
</script>

Ändert das JavaScript darüber in der index.php, direkt unter: // CAPTCHA bei Fehler neu laden , indem ihr den hier rot markierten Teil hinzufügt:

// CAPTCHA bei Fehler neu laden
if (result.errors && result.errors.includes("captcha")) {
  refreshCaptcha();
}

// **Hier neu: Bei Fehlern zum Formular-Anker scrollen**
scrollParentToAnchor();

Anpassung der Datei success.php:

Fügt dieses JavaScript direkt vor dem schließenden </body> Tag ein:

<!-- Script Sprunganker für success.php für die id="myFrame" vom iFrame und die id="Formular" der Mobirise-Sektion -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Kurz warten bis Layout fertig
  setTimeout(function() {
    try {
      if (window.parent && window.parent !== window) {
        var ifr = window.parent.document.getElementById('myFrame');
        if (ifr) {
          ifr.style.height = document.documentElement.scrollHeight + 'px';
        }
        var anchor = window.parent.document.getElementById('Formular');
        if (anchor) {
          anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }
    } catch (e) {
      console.warn("Scroll auf Erfolgsseite nicht möglich:", e);
    }
  }, 200);
});
</script>

Natürlich ist für diese Anpassungen der Sprung-Anker Voraussetzung, dass das iFrame die id="myFrame" und der Mobirise Block für den Einbau des iFrames die id="Formular", oben links im Code Editor, erhält - so wie auch im unten stehenden Screenshot zu sehen ist.

Aufruf der geframten Seiten verhindern

Ihr solltet noch den direkten Aufruf der geframten Seiten verhindern, damit diese nicht ohne irgendwelche Hinweise auf den Betreiber von den Suchmaschinen gefunden und eventuell im Index gelistet werden. Dazu tragt ihr mein Skript direkt unterhalb vom META-Tag der beiden geframten Seiten `index.php` und `success.php` ein. Dadurch wird auf die angegebene URL umgeleitet, wenn diese geframten Seiten direkt aufgerufen werden:

  <!-- Tommy added -->
  <script>
    if ( self == top ) { location.href = "https://www.DeineDomain.de/Formularseite.html"; }
  </script>

PHPMailer

Ihr könnt PHPMailer jederzeit durch eine neuere Version ersetzen. Der Verzeichnisname muss jedoch unverändert bleiben: PHPMailer. Kopiert in diesem Fall einfach alle Dateien der neuen Version in dieses Verzeichnis auf dem Server. Damit habt ihr stets eine zukunftssichere Anwendung, denn PHPMailer wird laufend an neue PHP-Versionen angepasst.

Hier findet ihr die jeweils aktuellste PHPMailer-Version: https://github.com/phpmailer/phpmailer/releases