Nach oben
Hier zeige ich das "Contact Form Generator 4.1" Script von PHP Jabbers, das sehr einfach in Mobirise einzubauen geht.
Gerne könnt ihr das Formular testen. Nach dem Absenden erhaltet ihr automatisch eine Bestätigung.
Bitte stellt eventuelle Fragen zu diesem Formular in meinem Forum.
Erstellt euch bei eurem Provider über das Kundenmenü zunächst eine MySQL-Datenbank und schreibt euch die Zugangsdaten zu dieser Datenbank auf, die ihr während der Installation von dieser Anwendung eintragen müsst.
Das sieht bei meinem Provider "1&1 IONOS" dann ungefähr so aus:
Hostname:
db1234567890.hosting-data.io
Username:
dbu1234567
Passwort:
mein!unlesbares-Passwort
Database / Datenbank:
dbs12345678
Den Eintrag "Table prefix" könnt ihr leer lassen. Ein Tabellenpräfix ist ein Präfix (Vorsilbe), das jedem Tabellennamen vorangestellt wird.
Die Tabellen der Datenbank werden dann automatisch während der Installation angelegt.
Ich habe dieses Script im April 2024 installiert und zu diesem Zeitpunkt nichts für die "Developer License" (Entwickler Lizenz) bezahlt. Es scheint, dass sich die Preispolitik im April 2024 geändert hat. Nun besteht die Möglichkeit, täglich ein Skript kostenlos herunterzuladen oder das gesamte Paket aller Skripte für EUR 279,00 zu erwerben. Der Support wurde aber leider komplett eingestellt.
PHPJabbers wurde bereits im April 2021 von Online Only übernommen.
Im Kunden-Bereich auf der Webseite von PHP Jabbers muss man sich zunächst mit neuen Zugangsdaten registrieren und einloggen. Dort findet man den Download der Skripte sowie den Lizenz-Schlüssel.
Hier geht es zum Download dieser Anwendung von phpjabbers.com .
Ihr entpackt also die ZIP Datei vom Download und kopiert sämtliche Dateien und Ordner auf den Server, am besten in ein Verzeichnis, das ihr beliebig benennen könnt, wie z.B. "scripts". Ich habe dieses Verzeichnis bei mir "contact-form" genannt.
Nun ruft ihr im Browser das Verzeichnis mit den hochgeladenen Skripten von PHP Jabbers auf, indem sich auch eine Startseite "index.php" dieser Anwendung befindet, also ungefähr so:
www.DeineDomain.de/contact-form/
Die Installation ist sehr einfach und jeder Schritt wird sorgfältig erklärt. Unten zeige ich, von den wichtigen Schritten der Installation, einige Screenshots. Nach der erfolgreichen Installation, ruft man mit dieser URL dann den Administratorbereich auf.
Man kann im Benutzerbereich beliebig viele Benutzer hinzufügen, die ebenfalls eine Mail erhalten können. Weiterhin kann man auch eine automatische Antwort, so wie ich es hier getan habe, hinterlegen.
Unter "Optionen" kann man komfortabel ein Backup von der Datenbank und auch von den Einstellungen der Anwendung erstellen. Dort kann man auch unter "Languages" alle Bereiche der Oberfläche in seine Sprache übersetzen.
Die Mails werden alle in der Datenbank gespeichert und man kann die Datenbank und Einstellungen auch sehr komfortabel in der Anwendung sichern, bzw. bearbeiten.
Es können Dateitypen für den Upload festgelegt werden, ebenso wie die maximale Dateigröße. Es besteht die Möglichkeit, entweder mehrere Dateien hochzuladen oder nur eine, wie in meinem Beispiel hier. Die Dateien werden automatisch als Anhang mit der E-Mail versendet und zusätzlich auf dem Server in einem geschützten Verzeichnis gespeichert. Diese Dateien werden auch automatisch gelöscht, wenn die entsprechenden E-Mails über das CMS gelöscht werden.
Auch bei dieser Anwendung wird der Einbettungscode direkt zu jedem Formular unter dem Tab "Install" generiert, den ich unten im Screenshot vom Mobirise "Code Editor" rot markiert habe. Jedes Formular erhält eine eindeutige ID und kann somit an jeder beliebigen Stelle der Webseite eingefügt werden.
Wer über HTML-Erfahrung verfügt und das Formular direkt anpassen möchte, kann auch eine zweite Integrationsmethode verwenden. Kopiert dann einfach den bereitgestellten Formular-Code und fügt ihn in den "Code Editor" ein. Man kann das Layout, die Farben, Schriftarten, Rahmen usw. nach Belieben ändern. Achtet jedoch darauf, die Formularfelder "Anzahl" und "Namen" nicht zu verändern.
Ich habe hier noch zusätzlich dem <img> Selektor etwas CSS gegeben, damit der Captcha Code nicht zu groß erscheint, auch das habe ich im Screenshot rot markiert. Im Nachhinein habe ich noch etwas zusätzliche CSS geschrieben, die ihr unten sehen könnt.
Das Formular kann entweder als PHP-Formular oder über SMTP gesendet werden. Aus Sicherheitsgründen empfehle ich die Verwendung von SMTP. Bitte verwendet hierfür die gleichen SMTP-Daten wie bei der Konfiguration eures Postfachs in Programmen wie beispielsweise Microsoft Outlook.
/* Hintergrundfarbe Upload Feld */
#pjWrapperContactForm_1 .pjCfUploadField input {
background-color: #9fdbf8 !important;
}
/* Button Upload Feld */
input::file-selector-button {
font-weight: bold;
color: #4479d9;
background-color: #9fdbf8;
padding: 0.4em;
border: 1px solid #4479d9;
border-radius: 6px;
transition: 0.8s;
}
/* Button Upload Feld hover */
input[type="file"]::file-selector-button:hover {
color: #ffffff;
background-color: #4479d9;
border: 1px solid #02569a;
}
/* Captcha Code */
img {
max-width: 100px;
height: 48px;
border-radius: 6px;
margin-left: 15px;
float: inline-start;
}
/* Captcha Eingabefeld */
#pjCaptchaWrapper_1 {
margin-left: 4px;
}
/* Button Senden */
.btn-lg {
padding: 5px 40px!important;
margin-left: -16px;
margin-top: 30px;
}
/* Button Senden hover */
.btn-lg:hover {
outline: #0177d7 solid 2px;
outline-style: outset;
}
/* Erfolgsmeldung nach dem Senden */
.alert-success {
color: #ffffff!important;
background-color: #4479d9!important;
border-color: black!important;
margin-top: 7rem;
}
/* Erfolgsmeldung nach dem Senden am Smartphone */
@media (max-width: 767px) {
.alert-success {
margin-top: 2rem;
}
}
Einbettungscode im Mobirise Block
Ansicht vom Mail Versand via PHP oder SMTP
Ansicht Formular Generator
Mail an Admin
Bitte achtet darauf, dass ihr am Tab "Confirmation Email" den Token:
{Fields}
in dieser Form, mit den geschweiften Klammern, eintragt. Durch diesen Token werden alle Felder vom Formular als Mail an den Administrator gesendet.
Falls weitere Empfänger unter dem Menü "Users" erstellt wurden, können auch diese eine Kopie erhalten.
Am Tab "Auto responder" kann eine automatische Antwort eingetragen werden und am Tab "Install" findet ihr den Code zum Eintragen im Code Editor.