Die Voraussetzungen
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:
- Eine Webseite mit eine Elementor Pro – Lizenz (für das Formularwidget)
- Eine Lizensierte Version von Dynamic Content for Elementor
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.
45 Features - ein Überblick
Address Autocomplete – Vervollständigt Adressen mittels Google
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.
Amount field – Berechnungsfunktionen
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.
Range Field – Bereichsfeld
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.
Field Description – Feld Beschreibung
Unter dem Eingabefeld kann ein zusätzlicher Text zur Erklärung des Feldes angegeben werden.
Dynamic Email – Mailvorlagen mit dynamischen Inhalten
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:
- kann man mehrere E-Mails an verschiedene Empfänger senden;
- Abhängig von den Formulardaten können Bedingung zum Versenden einer E-Mail festgelegt werden;
- Schnelles aktivieren oder deaktivieren der Funktion.
- Dynamische Felder auch für TO-, CC- und Bcc-Empfänger.
Favorites Action – Lesezeichen erstellen
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.
Export – Daten exportieren
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:
- POST- oder GET-Methode;
- Alle Elemente mit dynamischem Wert festlegen (aus Formular, Beitrag, Benutzer usw.);
- SSL-Prüfung;
- Portauswahl;
- JSON-Daten;
- Vollständiger LOG-Bericht für jeden Anruf.
Icons – Symbole im Formular
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.
Inline Align – Checkboxen und Radiobuttons ausrichten
Mit Inline Align kann man den Inline-Ausrichtungstyp für Radiobuttons auswählen, soferne diese horizontal angeorndnet wurden.
Field Length – Feldlänge
Wähle eine minimale und maximale Zeichenlänge für Ihre Text- und Textbereichsfelder.
Message Generator – Zeigt Dialog nach Submit
Mit dieser Nachrichtengenerator-Erweiterung kann ein benutzerdefinierter Inhalt erstellet werden, indem man eine Elementor-Vorlage mit dynamischem Inhalt verwenden.
Dank dieser Erweiterung kann mann:
- Eine „Dangeschön-Nachricht“ anzeigen im eigen Corporate Design;
- Reservierte Inhalte, wie z. B. einen Download-Button, nur für die Benutzer anzuzeigen, die ihre E-Mail-Adresse angeben;
- optional das Formular nach dem Absenden ausblenden.
Method – Methode
Elementor verwendet standardmäßig AJAX. Mit dieser Erweiterung kann man die POST- oder die GET-Methode wählen.
Password Visibility – Passwort Sichtbarkeit
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.
Unique ID Field – Eindeutige ID
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.
Counter Field – Zählfeld
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.
PDF Generator
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.
PHP Action – eigener PHP Code nach Submit
Mit diesem Widget kann man einem Elementor Pro-Formulars PHP-Code hinzuzufügen. Dieser wird dann nach dem Submit ausgeführt.
Dynamic Redirect – unterschiedliche Weiterleitungen
Die Dynamic Redirect-Erweiterung ermöglicht es, den Benutzer basierend auf seiner Wahl auf den Wert der übermittelten Formularfelder zu verschiedenen URLs umzuleiten.
Regex Field – Eingebeprüfungen mit Regular Expressions
Diese Funktion ermöglicht die Validierung von Formularfeldern mit beliebigen regulären Ausdrücken.
Reset Button – Formular zurücksetzen
Die Reset-Schaltfläche gibt die Möglichkeit, alle Formularwerte auf dem Elementor Pro Form auf ihre Anfangswerte zurückzusetzen.
Save – Formularwerte speichern
Die Save-Erweiterung ermöglicht es, die übermittelten Formulardaten im Front-End zu speichern als:
- Beitrag, Titel, Inhalt und alle seine Metas, als Entwurf oder öffentlich;
- Benutzer, der einen neuen Benutzer mit einer definierten Rolle erstellt, sich automatisch anmeldet und den aktuell angemeldeten Benutzer aktualisiert;
- Term, schnell, einfach, intuitiv.
Selbst wenn die E-Mail verloren geht, bleiben die gespeicherten Daten erhalten.
Select2 – Zusätzliches Auswahlfeld
Fügen Sie Select2 zu den Auswahlfeldern hinzu, um ein anpassbares Auswahlfeld mit Unterstützung für die Suche zu erhalten.
Signature – Signaturfeld
Mit dieser Funktion kann man ein Signaturfeld hinzufügen und es auch in einem PDF verwenden.
Enhanced Multi-Step – Erweitertes Mehrstufiges Formular
Diese Erweiterung kann:
- Beschriftung als Legende;
- alle Schritte anzeigen;
- bei Schrittwechsel nach oben scrollen;
- Zusammenfassung der Schritte.
Submit On Change – Abschicken bei Auswahl
Man kann das Formular automatisch senden, wenn User ein Optionsfeld oder ein Auswahlfeld auswählen.
Submit Button – Absende Button
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.
Telegram
Schickt das Formular an den Telegram Bot
Conditional Fields – Bedingte Felder
Mit dieser Erweiterung kann man ein Feld basierend auf dem Inhalt anderer Felder ausblenden oder aktivieren.
WYSIWYG Field – Editor im Textbereichsfeld
Mit dem WYSIWYG-Editor kann man Textbereichsfeldern ganz einfach einen Texteditor hinzufügen. So kann der user seinen Text auch formatieren.
PayPal
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.
Stripe Field
Verbinden mit Online-Zahlungen über Stripe, eines der beliebtesten Zahlungssysteme der Welt.
PHP Validation – Feldüberprüfung mit PHP
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.
JS Field – Javascript Feld
Das Festlegen des Werts eines Felds mit JavaScript ist eine großartige Möglichkeit, Formularwerte aus einem oder mehreren Feldern in Ihrem Formular abzurufen.
Live HTML Field
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.
Hidden Label – Verborgende Beschriftung
Das verborgene Beschriftungsfeld ermöglicht es, die Beschriftung zu erhalten, die dem Wert eines anderen Felds entspricht.
Dynamic Select – Dynamisches Auswahlfeld
Das dynamische Auswahlfeld ist ein Auswahlfeld, bei dem sich die Liste der Optionen dynamisch entsprechend dem Wert eines anderen Felds ändert.
Confirm Dialog – Bestätigungsdialog
Sofortiges Feedback zum Formular, bevor es gesendet wird. Eine benutzerfreundliche Komponente, mit der man Bestätigungs-/Abbruchdialoge im Formular verwenden kann.
