Tailwind CSS Kontaktformular per Ajax mit PHPMailer absenden
Wie in dem Beitrag bereits beschrieben, kann man mit Publii keine Formulare direkt erzeugen bzw. weiterverarbeiten. Wenn der Webserver PHP unterstützt (was sehr oft der Fall ist), können E-Mails aber sehr einfach mit PHPMailer versendet werden.
Wir verwenden PHPMailer anstelle der PHP internen mail() Funktion, weil es einige Vorteile bringt. In dem Beispiel versenden wir die E-Mails per SMTP Server. Für z.B. Google Mail sind Anpassungen vorzunehmen. Beispiele dazu gibt es im PHPMailer Projekt.
Für das Design unsere Publii Vorlagen verwenden wir in der Regel Tailwind CSS. Für komplexere Formulare bzw. Seiten erstellen wir eine eigene Seitenvorlage und wählen diese in Publii dann aus. Kontaktformulare die z.B. auf allen Seiten im Footer angezeigt werden soll, landen im "partials" Ordner der Vorlage.
Das Formular wird per Ajax / fetch Aufruf die eingegeben Daten an ein PHP Script (z.B. send.php) übergeben. Dort werden die Angaben noch einmal geprüft bzw. die E-Mail versendet.
Wie bereits geschrieben, verwenden wir PHPMailer für das Versenden der E-Mails. Dazu benötigen wir aus dem PHPMailer Projekt im Grunde nur diese zwei Dateien:
require 'PHPMailer.php';
require 'SMTP.php';
Das PHP Script prüft die Eingaben und versendet dann die Daten mit der PHPMailer Klasse. Gemeinsam mit dem Formular brauchen wir also nur 4 Dateien.
Die Beispieldateien (Formular und PHP Script) stehen auf GitHub zur Verfügung:
Ihre Kanzlei verdient einen Webauftritt, der so professionell und sicher ist wie Ihre Beratung. Ich realisiere moderne, datenschutzkonforme Webseiten, die einfach funktionieren und Vertrauen schaffen – ohne Datenbank-Risiko und Wartungsstress.
Progressive Web Apps (PWAs) sind Webseiten, die wie native Apps funktionieren. Sie bieten ein app-ähnliches Erlebnis direkt im Browser, ohne Installation aus einem App-Store. Mit dem Brave Browser kannst du PWAs nutzen, um deine Lieblingsdienste wie Gmail effizienter zu verwenden.
LanguageTool ist ein vielseitiges, Open-Source-Tool zur Überprüfung von Grammatik, Rechtschreibung und Stil in über 30 Sprachen. Es kann als eigenständige Anwendung, Webservice oder als Plugin in Programmen wie Browsern und Office-Suiten genutzt werden.
Bereit für Ihr Projekt?
