tl;dr: Wie man Elementor Pro Formulare sinnvoll durch die Erweiterung Dynamischer Content für Elementor erweitert und so mehr Funktionalität und bessere Usability erreichen kann.
Am Beispiel eines erweiterten Supportformulars werden 8 Funktionen vorgestellt.
Das Forumularsystem von Elementor ist Out-Of-The-Box schon sehr gut und ermöglicht ohne Coding oder tiefe CSS-Kenntnisse ansprechende, funktionierende und auch formschöne Formulare zu erstellen. Das geht bis zu mehrstufigen Fomularen und der Einbindung von reCaptcha. Mehr dazu in im Artikel Formulare mit Elementor.
Manchmal darf es aber ein bisschen mehr sein. In diesem Artikel geht es darum einen Einblick in die Möglichkeiten der Formularerweiterungen des Plugins von dynamic.ooo zu erhalten. Benötigt wird also:
Für diesen Artikel wurde eine Trainingsumgebung mit Hilfe der kostenlosen Software Local WP erstellt. Gearbeitet wurde innerhalb eine Beta-Umgebung mit Elementor 3.8 unter PHP 8.0.
Schon alleine die Anzahl der Widgets/Features die man mit dem Plugin von dynamic.ooo zu Thema Form aktivieren kann ist beeindruckend: 37 Widgets können aktiviert werden. Wenn man die Features auf der Herstellerwebsite filtert kommt man sogar auf 45. Jedes Einzelne kann aktiviert/deaktiviert werden. Zu empfehlen ist nur die benötigten Features zu aktivieren um so das System nicht unnötig zu belasten.
In dieser Kurzübersicht werden alle Funktionen vorgestellt. Die Bezeichnungen entsprechen den Originalen untern denen sie gefunden werden können. Daneben der Versuch einer kurzen Erklärung in deutsch.
Verwende Address Autocomplete, um Formularfeldern das Typ-Ahead-Suchverhalten des Google Maps-Suchfelds zu geben. Diese Erweiterung kann vollständige Wörter und Teilzeichenfolgen abgleichen und Ortsnamen und Adressen auflösen.
Die Amount-Field-Erweiterung ist die perfekte Möglichkeit, die Benutzer deiner Website den Preis deiner Produkte oder Dienstleistungen in Echtzeit berechnen zu lassen. Dieses Rechnerfeld ist mit allen numerischen Feldern von Elementor Pro kompatibel, einschließlich Input, Radio und Select. Mit dieser Erweiterung jeder User ein genaues und individuelles Angebot erstellen, das auf seinen individuellen Bedürfnissen basiert.
Lege ein Range Field fest und verwende einen Schieberegler anstelle eines Textfelds für numerische Eingabetn. Lasse den Benutzer einen numerischen Wert angeben, der zwischen zwei angegebenen Werten liegen muss.
Es kann in Verbindung mit anderen Formularerweiterungen verwendet werden, beispielsweise mit Betragsfeld.
Unter dem Eingabefeld kann ein zusätzlicher Text zur Erklärung des Feldes angegeben werden.
Mit dieser Funktion kann man eine E-Mail-Vorlage erstellen und die benötigten E-Mails mit den vom Benutzerformular übermittelten dynamischen Daten senden. Dank dieser Funktion:
Die Favoritenaktion für Elementor Pro Form ist ein großartiges Tool, das in Kombination mit den Widgets „Zu Favoriten hinzufügen“ und „Favoriten“ verwendet werden kann. Auf diese Weise können Sie Ihre Lieblingsartikel mit nur wenigen Klicks ganz einfach über Ihre Elementor-Formulare hinzufügen.
Die Export Data-Erweiterung ermöglicht es, übermittelte Formulardaten an einen externen Dienst wie eine Marketingplattform, benutzerdefinierte API oder CRM zu exportieren.
Die wichtigsten Features:
Mit Icons kannst du Symbole auf dem Etikett oder im Eingabebreich von Formularfeldern hinzufügen. Dadurch können Besucher leichter verstehen, welche Informationen von ihnen benötigt werden.
Mit Inline Align kann man den Inline-Ausrichtungstyp für Radiobuttons auswählen, soferne diese horizontal angeorndnet wurden.
Wähle eine minimale und maximale Zeichenlänge für Ihre Text- und Textbereichsfelder.
Mit dieser Nachrichtengenerator-Erweiterung kann ein benutzerdefinierter Inhalt erstellet werden, indem man eine Elementor-Vorlage mit dynamischem Inhalt verwenden.
Dank dieser Erweiterung kann mann:
Elementor verwendet standardmäßig AJAX. Mit dieser Erweiterung kann man die POST- oder die GET-Methode wählen.
Password Visibility ist die perfekte Möglichkeit, die Passwörter der Benutzer beim Ausfüllen der Formulare verborgen zu halten. Mit nur einem einfachen Klick können sie ihre Passwörter anzeigen.
Mit diesem versteckten Feld kann man nach dem Absenden eines Elementor Pro-Formulars eine eindeutige ID generieren, die in PDF Generator oder Dynamic Email verwendet werden kann.
Perfekt, um den Überblick über die Anzahl der abgeschickten Formulare zu behalten. Man kann dem Zähler einen festen Wert oder einen Wert aus einem anderen Formularfeld hinzufügen. Beispielsweise kann man die Anzahl der verkauften Tickets zum Zähler hinzufügen, damit man das Limit mit der Erweiterung „Max Submissions “ überprüfen kann. Es kann auch nützlich sein, wenn man eine fortlaufende Nummer haben möchte, um die Nummerierung von Rechnungen zu verwalten, die mit der Erweiterung „PDF Generator for Elementor Pro Form“ erstellt wurden.
Mit der PDF-Generator-Erweiterung kann man aus einer Elementor-Vorlage ein PDF generieren, das alle dynamischen Daten aus dem Formular, dem Beitrag oder dem angemeldeten Benutzer enthält.
Mann kann die generierten PDFs als Medien speichern, um an anderen Stellen wieder.zu verwenden, oder man kann als E-Mail-Anhang in einer dynamischen E-Mail verwenden.
Mit diesem Widget kann man einem Elementor Pro-Formulars PHP-Code hinzuzufügen. Dieser wird dann nach dem Submit ausgeführt.
Die Dynamic Redirect-Erweiterung ermöglicht es, den Benutzer basierend auf seiner Wahl auf den Wert der übermittelten Formularfelder zu verschiedenen URLs umzuleiten.
Diese Funktion ermöglicht die Validierung von Formularfeldern mit beliebigen regulären Ausdrücken.
Die Reset-Schaltfläche gibt die Möglichkeit, alle Formularwerte auf dem Elementor Pro Form auf ihre Anfangswerte zurückzusetzen.
Die Save-Erweiterung ermöglicht es, die übermittelten Formulardaten im Front-End zu speichern als:
Selbst wenn die E-Mail verloren geht, bleiben die gespeicherten Daten erhalten.
Fügen Sie Select2 zu den Auswahlfeldern hinzu, um ein anpassbares Auswahlfeld mit Unterstützung für die Suche zu erhalten.
Mit dieser Funktion kann man ein Signaturfeld hinzufügen und es auch in einem PDF verwenden.
Diese Erweiterung kann:
Man kann das Formular automatisch senden, wenn User ein Optionsfeld oder ein Auswahlfeld auswählen.
Eine zusätzliche Schaltfläche „Senden“ im Formular. Hilfreich, wenn bei wirklich langen Formularen und wenn der User das Form abschicken können soll ohne alle Felder ausfüllen zu müssen.
Schickt das Formular an den Telegram Bot
Mit dieser Erweiterung kann man ein Feld basierend auf dem Inhalt anderer Felder ausblenden oder aktivieren.
Mit dem WYSIWYG-Editor kann man Textbereichsfeldern ganz einfach einen Texteditor hinzufügen. So kann der user seinen Text auch formatieren.
Damit verbindet man ein Formular mit PayPal.
Man kann es für Produktverkäufe, Serviceverkäufe und Spenden verwenden.
In Verbindung mit anderen Erweiterungen wird die User Journey intuitiver. Beispielsweise kann man mit dem PDF-Generator ein PDF mit der aufgegebenen Bestellung generieren, Man kann dieses PDF mit der Signature-Erweiterung signieren oder die Bestätigung per E-Mail mit Dynamic Email zustellen.
Verbinden mit Online-Zahlungen über Stripe, eines der beliebtesten Zahlungssysteme der Welt.
Mit dieser Erweiterung kann man das Formular basierend auf den festgelegten Bedingungen validieren. Über die Variable $fields kann man auf Feldwerte zugreifen (zB $fields[„field_id“]). Die Validierung ist nur erfolgreich, wenn der PHP-Code nicht oder false zurückgibt. Wenn es [$field_id, $error_message] zurückgibt, wird die Fehlermeldung für dieses spezifische Feld gemeldet.
Das Festlegen des Werts eines Felds mit JavaScript ist eine großartige Möglichkeit, Formularwerte aus einem oder mehreren Feldern in Ihrem Formular abzurufen.
Mit dem Live-HTML-Feld kann man Feldwerte ganz einfach in Echtzeit aktualisieren, ohne die Seite aktualisieren zu müssen. Füge einfach die Werte der Felder in ein Live-HTML-Feld ein und diese Änderungen werden live aktualisiert, sobald sie passieren.
Das verborgene Beschriftungsfeld ermöglicht es, die Beschriftung zu erhalten, die dem Wert eines anderen Felds entspricht.
Das dynamische Auswahlfeld ist ein Auswahlfeld, bei dem sich die Liste der Optionen dynamisch entsprechend dem Wert eines anderen Felds ändert.
Sofortiges Feedback zum Formular, bevor es gesendet wird. Eine benutzerfreundliche Komponente, mit der man Bestätigungs-/Abbruchdialoge im Formular verwenden kann.
In dem nun folgendem Beispiel werden einige der oben vorgestellten Features in einem fiktivem Supportformular zusammengefasst.
Bei diesem Supportformular soll der User auswählen, welche Art der Hilfe er benötigt: technische Hilfe, Hilfe beim Einkauf oder eine andere Hilfe. Wenn nun die Option „Andere Hilfe“ gewählt wird soll ein Feld eingeblendet werden, wo der Benutzer die Art der Hilfe eingeben kann.
Dazu benötigt man die Extension Conditional Fields for Elementor Pro Form.
Die Funktion Conditional Fields taucht also bei jedem Formularfeld auf. Man kann die Sichtbarkeit festlegen (immer sichtbar, zeige wenn…, verberge wenn …) und dann die Bedingungen, zu welchen diese Sichtbarkeit angewandt werden soll: Conditions Expressions. Das kann eine oder auch mehere Bedingungen sein. Dynamic.ooo bietet auch ein Tool an (den Conditions Generator) der syntaktisch richtige Bedingungen online erstellt.
Eine solche Bedingung kann also wie in dem Beispiel eine Auswahl sein, es kann aber auch abgefragt werden ob ein Wert exisitiert oder eine Zahl eine bestimmte Größe hat etc.
Nicht immer ist dem User klar, welche Eingabe in einem Feld erwartet wird. Hier kann man dem User mit dem Feature Icon helfen: für jedes Feld kann ein Icon gewählt werden, das wahlweise im Label oder im Eingabebereich angezeigt wird. Ausserdem kann für jedes Feld eine Description (also eine Beschreibung der erwarteten Eingabe) eingebaut werden.
Icons und Description sind über eigene Tabs im Stil-Menu zu gestalten. Dadurch kann man die Usabilty des Formulars verbessern: Vereinfachen durch (auch selbst gestaltete) Icons (jeder weiss, was bei einem Telefonsymbol oder einem E-Mail-Symbol erwartet wird. Erklären, wenn die Feldbezeichnung nicht ausreicht um zu erklären, wozu dieses Feld dient und was erwartet wird.
Ausserdem kann man dieses Funktion auch als Tooltip konfigurieren: bei angezeigten Labels (Feldbeschriftung) taucht dann ein kleines Fragezeichen auf, on Over wird dann eine Blase mit dem Beschreibungstext angezeigt.
Wir können eine Supportanfrage speichern – und zwar nicht nur als Submission ( also den Inhalt innerhalb von Elementor mittels Aktion nach dem Versenden), sondern in einem eigenen Post-Typ. Dieser muß zuvor angelegt werden und bekommt ein paar eigene Felder. Man benötigt dafür zusätzlich 2 Plugins:
Beide sind kostenlos verfügbar, es gibt natürlich auch andere Plugins mit der selben Funktionalität.
Zuerst legt man über
Dashboard > CPU UI > Inhaltstypen hinzufügen
einen neuen Typ mit dem Slug support an. Danach über
Dashboard > Individuelle Felder > Feldgruppen (neu hinzufügen)
eine Gruppe Supportfelder mit Feldern. Diese Feldgruppe soll beim Inhaltstyp Support angezeigt werden.
Wichtig: Die technischen Namen der Felder müssen den ID’s der Formularfeldern entsprechen.
Nun kann die Option Save in den Aktionen nach dem Versenden aktiviert werden. Der Umfang der Optionen lässt schon ahnen wie flexibel man dieses Werkzeug einsetzen kann.
Zuerst muss die Option Save fields as gesetzt werden. Neben Post stehen noch User, Term und Option zur Verfügung.
Ignore Empty fields lässt das Abspeichern zu wenn Felder nicht ausgefüllt wurden.
Save Files as Media speichert Anhänge als Einträge in die Mediathek und deren ID anstelle der URL des Anhangs.
Save Multiple as Array macht genau das: es speichert Array-Felder als Array und nicht als Wert.
Redirect to ruft nach dem Speichern das soeben erstellte Post auf.
Anonymous Data verhindert das Speichern von IP, referrer und der aktuelle ID.
Update existent data erlaubt das Update von Datensätzen. Sollte kein Datensatz gefunden werden wird ein neuer erstellt.
Form fields to save as meta. Damit kann einzelne Felder zum Speichern festlegen, wenn alle gespeichert werden sollen einfach leer lassen. FormID = Feldname!
Post Title erlaubt das Festlegen des Beitragstitels. Über die dynamischen Optionen kann man auch komplexere Titel generieren. die Kombination aus freiem Text wie zB Anfrage an und eines Formshortcodes wie zB [field id=“support“] ist möglich.
Post Content legt fest, was als Beitragsinhalt gespeichert werden soll. In diesem Beispiel wäre der Wert des Nachrichtenfeldes eingetragen.
Post Type dient der Auswahl eben des Post Types. Hier wurde der angelegte Typ Support ausgewählt.
Post Term erlaubt das Abspeichern von Taxonomien.
Post Status legt schliesslich fest, ob der soeben erstellte Beitrag als Entwurf etc. gespeichert werden soll.
Diese Funktion ist hilfreich wenn man übereilte Abfragen durch den User vermeiden will oder (zB bei kostenpflichtigen angeboten) explizit eine Sicherheitsabfrage einbauen will.
Zur Anwendung kommt hier eine etwas andere Syntax. Die Felder werden mit {{ form.feldID }} eingegeben.
Title entspricht dem Titel des Dialogfeldes.
Content ist ein Textfeld, in dem der Text für den Dialog festgelegt wird.
Die Gestaltung des Dialogfeldes ist ein wenig rudimentär, aber ausreichend: mit Width (Breite) und Theme legt man das grundsätzliche Erscheinungsbild fest. Ausserdem kann man noch die beiden Buttons Beschriften und eine Farbe zuweisen.
Zu den am wenigsten gut gelungenen Dingen im Elementor Pro Form-System zählen die Nachrichten, die unter dem Formular eingeblendet werden wenn es verschickt wurde bzw. ein Fehler aufgetreten ist. Die Funktion Message Generator nimmt sich genau dieses Umstand an und erlaubt es eigene formatierte Texte oder auch Templates mit zB Bildern anzuzeigen, sobald ein Formular abgeschickt wurde.
Der Message Generator wird im Dialog Aktion nach dem Versenden aktiviert.
Message Type legt fest, ob ein Textfeedback oder ein Template angezeigt werden soll.
Danach muss der Message Text oder das Template (auch Post oder User) festgelegt werden.
Ein Close Button und die Option Hide Form after Submit runden die Sache ab.
Über das Redirect / Weiterleiten kann man bestimmen, welche Seite nach dem Abschicken angezeigt werden soll. Das Feature Dynamic Redirect ermöglicht nun, verschiedene Bedingungn zu definieren und zu unterschiedlichen Seiten weiter zu leiten.
Vorstellbar sind hier unterschiedliche Seiten zu technischen oder kaufmännischen Anfragen. Vorstellbar ist aber natürlich auch eine Weiterleitung auf eine weitere Formularseite die eine vertiefende Abfrage startet.
Die Weiterleitung eines Formulars als E-Mail ist im Elementor pro Form voreingestellt. Die hier angewandte Funktion stellt eine gute Alternative dar, kann sie jedoch mit einigen spannenden Features aufwarten, ua:
Jedes E-Mail wird als Reapeater-Element verwaltet, mann kann also beliebig viele E-Mails aus einem Formular mit unterschiedlicher Funktionalität generieren.
Enable email erlaubt es, ein einzelnes Element zu deaktivieren ohne die Einstellungen zu verlieren.
Condition. Die Funktionalität ist von der weiter oben beschriebenen Funkton bereits bekannt: im Beispiel rechts wird das E-Mail nur abgeschickt, wenn das Feld andere einen Wert enthält. Das bedeutet, dass nur dann, wenn es sich beim abgeschickten Form um keine technische oder kaufmanännische Anfrage handelt und der User eine Eintrag in dieses Feld gemacht hat ein Mail abgeschickt wird.
Subjekt. Erlaubt die Eingabe eine Betreffs, dieser kann dynamische gesetzt werden.
To erlaubt die bekannten Möglichkeiten der Eingabe der E-Mail Parameter
Send As bietet die Wahlmöglichkeiten HTML / Plan (also Text).
Email body erlaubt die Auswahl eines Shortcode-unterstützen Textfeldes oder eines Elementor Templates.
Add Uploades files as Attachments sendet die Dateien aus File-Upload Felden als Attachments.
Delete PDF attachments after Emails are sent. Löscht PDF-Dateien nach dem Versenden. Hilfreich, wenn zB. dynamische PDF-Rechnungen o.ä. erstellt werden.
Das ist natürlich nur ein kleiner Einstieg in die sehr umfangreichen Möglichkeiten, die sich mittels dieser Erweiterungen auftun. Der Weg sollte immer sein: sich zuerst die Funktion vorstellen und dann das geeignete Werkzeug suchen. Die Paarung Elementor Pro und die Dynamischen Erweiterungen dazu haben sich schon sehr oft als flexible Problemlöser erwiesen, wenn man mehr aus einem Formular herausholen will.
