Elementor Formulare alles was du wissen musst.
in ,

Alles über Formulare in Elementor

Mit dem Page-Builder Elementor für WordPress, erhälst du ein praktisches Widget mithilfe du einfache Formulare erstellen kannst. Ich schreibe extra „einfache“ weil tatsächlich nur die nötigsten Funktionen abgedeckt werden. Das reicht in der Regel aber vollkommen für Kontakt-Formulare oder Bestellformulare aus. Möchtest du hingegen komplexe Formulare mit logischen Bedingungen erstellen, wirst du mit dem Formular-Widget in Elementor nicht glücklich werden. Eine gute Alternative für Formulare mit Bedingungen möchte ich dir in diesem Beitrag ebenfalls vorstellen. In diesem Beitrag gehe ich nur auf die Technik im Einzelnen ein. Layout und Design überlasse ich dir.

Elementor Formular-Widget

Das Formular-Widget Elementor Formular Widget kannst du, wie jedes andere Widget in jede beliebe Seite oder Beitrag integrieren.

Elementor Formular Widget

Nachdem hinzufügen des Formular-Widgets sollte das ganze nun so aussehen. Elementor fügt standardmäßig ein einfaches Kontaktformular ein. Schauen wir uns einmal die verfügbaren Formularfelder an.

Elementor Formularfelder

  • Text – Ein einfaches Textfeld für beispielsweise Namen
  • E-Mail – Ein E-Mail-Feld mit einfacher Validierung
  • Textbereich – Textfeld mit mehreren Zeilen, die du beschränken kannst
  • URL – Ein Webseiten-URL-Feld
  • Telefon – Ein Telefonfeld
  • Radio – Radio-Auswahl-Typ, wähle dieses Feld wenn du eine Antwortauswahl beschränken möchtest
  • Auswahlliste – Klassische Drop-Down-Auswahlliste, trage dabei jede Auswahlmöglichkeit in eine neue Zeile
  • Auswahlbox – Klassische Checkbox, wähle dieses Feld wenn du mehrere Antwortauswahlen erlauben möchtest
  • Akzeptanz – Fügt ein Akzeptanz-Feld ein, mithilfe dessen kannst du beispielsweise deine Datenschutzerklärung integrieren
  • Zahl – Ein Zahlenfeld
  • Datum – Ein Datumsfeld
  • Zeit – Eine Zeitauswahl
  • Datei hochladen – Ermögliche es deinen Benutzern, Dateien hochzuladen
  • Passwort – Ein Passwortfeld
  • HTML – Ein unformatiertes Feld, indem du deinen HTML-Code integrieren kannst
  • Versteckt – Fügt ein verstecktes Feld ein, das nur du als Administrator sehen kannst
  • reCAPTCHA – Füge ein reCaptcha-Feld ein, mit diesem Feld kannst du prüfen ob der Benutzer kein „Roboter oder Bot“ ist
  • Honeypot – Füge deinem Formular ein Honeypot hinzu

Die meisten Felder sind selbsterklärend, du kannst jederzeit weitere hinzufügen oder einzelne löschen. Da Elementor von hause aus kein „Datenschutz-Feld“ anbietet, müssen wir das ganze über ein „Akzeptanz-Feld“ lösen. Praktischerweise akzeptiert das Eingabefeld auch HTML, sodass du einen Link zu deiner Datenschutzerklärung einbauen kannst.

Elementor Formular Datenschutz

Du kannst dabei einen Text wie folgenden verwenden, achte darauf das du dieses Feld als „Pflichtfeld“ markierst. So muss dein Benutzer dieses erst akzeptieren, bevor er das Formular absenden kann.

Ich habe die <a target="_blank" href="https://deine-url.de/datenschutzerklaerung/" >Datenschutzerklärung</a> gelesen und bin damit einverstanden

Wichtig ist dann natürlich, dass du auch deine Datenschutzerklärung anpasst. Elementor sendet dabei stets folgende Informationen an dich:

  • Datum
  • Zeit
  • Seiten-URL (Der Pfad zu deinem Formular)
  • Benutzer-Agent (Verwendeter Browser & Betriebssystem)
  • IP-Adresse
  • Kredit

Da sich speziell die IP-Adresse nicht anonymisieren lässt, solltest du das für die Übertragung deines Formulars deaktivieren. Wie du die einzelnen „Meta-Daten“ entfernst, erfährst du im nächsten Absatz.

Aktion nach dem Versenden

Mit dieser Funktion hast du die Möglichkeit, neben der eigentlichen Mail, die du erhalten möchtest, auch noch weitere Aktionen hinzuzufügen.

  • E-Mail – Das Standardfeld, es ist immer ausgewählt, du kannst es je nach bedarf aber auch entfernen.
  • E-Mail 2 – Eignet sich besonders dann, falls du eine zweite Benachrichtigung nachdem Absenden des Formulars erhalten möchtest, dies kann eine andere Mail-Adresse sein.
  • Weiterleiten – Mit dieser Aktion kannst du dein Besucher nach dem Absenden des Formulars zu einer anderen URL weiterleiten. Ein Beispiel hierfür wäre eine „Danke“-Seite.
  • Webhock
  • MailChimp – Verbinde dein Formular mit MailChimp
  • Drip – Verbinde dein Formular mit Drip
  • ActiveCampaign – Verbinde dein Formular mit ActiveCampain
  • GetResponse – Verbinde dein Formular mit GetResponse
  • CoverKit – Verbinde dein Formular mit CoverKit
  • MailerLite – Verbinde dein Formular mit MailerLite
  • Slack – Verbinde dein Formular mit Slack
  • Discord – Verbinde dein Formular mit Discord
  • Popup – Mit dieser Aktion kannst du ein Popup öffnen lassen, welches zu weiteren Interaktionen mit deiner Webseite dienen kann

Aktion – E-Mail

Elementor E-Mail Aktion
Elementor Formularfelder Übertragung nach dem Absenden.

Trage im „An“-Feld deine E-Mail-Adresse ein und lasse den Betreff unverändert. Im Feld „Nachricht“ ist standardmäßig immer [all-fields] eingetragen. Das bedeutet nichts anderes als das, alle eingebenden Benutzerfelder zu dir übermittelt werden.

Elementor Formularfelder Shortcode

Du kannst auch einzelne Felder auswählen, indem du die „Shortcodes“ der Formularfelder hier einträgst. Wähle dazu ein Formularfeld an und klicke auf die Schaltfläche „Erweitert“.

Die Felder „Von E-Mail“ und „Von Name“ kannst du individuell anpassen. Wichtig ist jedoch das du das „Antwort an“-Feld mit „E-Mail Feld“ auswählst. Sonst passiert es dir, dass du aus deinem E-Mail-Programm heraus dir selbst antwortest.

E-Mail Meta-Daten

Elementor Formular Mail Meta-Daten

In diesem Feld findest du alle Daten (auch Personenbezogene) die dein Formular nach dem Absenden an dich übermittelt. Wenn du auf sichergehen möchtest, solltest du zu mindestens die Übertragung der IP-Adresse entfernen.

Aktion – Weiterleiten

Elementor Formular Aktion Weiterleiten

Verwende diese Aktion, um deinen Besucher nach dem Absenden des Formulars auf eine neue Seite weiterzuleiten. Das kann beispielsweise eine „Dankeseite“ sein.

Aktion – MailChimp

Möchtest du MailChimp oder einen anderen Newsletter-Anbieter in deinem Formular verwenden, musst du zuerst die entsprechende Aktion hinzufügen.

Werbung, dieser Werbebanner enthält einen Affiliate-Link. Vielen Dank für deine Unterstützung.

Nun kannst du die Einstellungen für MailChimp vornehmen. Unter „API Schlüssel“ wird der verwendet den du unter Elementor-Integrationen hinzugefügt hast. Mit Audience und Gruppe wählst du deine unter MailChimp angelegten Werte aus. Wie du MailChimp konfigurierst und verschiedene Gruppen in Elementor nutzt, erkläre ich dir in diesem Beitrag.

Wichtig ist in diesem Abschnitt, dass du zwingend die Schaltfläche für „Double Opt-In“ aktivierst. Unter „Feld-Abbildung“ solltest du das E-Mail-Feld abfragen.

Aktion – Popup

Füge erst wieder unter „Aktion nach dem Versenden“ „Popup“ hinzu. Anschließend kannst du konfigurieren, was geschehen soll. Du kannst beispielsweise ein zuvor erstelltes Popup anzeigen lassen, sobald dein Benutzer den „Senden“ Button gedrückt hat.

Weitere Optionen

Nach Aktivieren dieser Option kannst du eigene Texte festlegen, das ist besonders dann hilfreich, falls du nach dem „Absenden“ keine weitere Aktion geplant hast.

So kannst du beispielsweise die ausgegebene Nachricht beim Erfolgreichen versenden ändern.

The form was sent successfully.

Überschreibe einfach den Standardtext mit deinem geänderten Inhalt. Dieser könnte dann wie folgt lauten:

Ihre Anfrage wurde erfolgreich übermittelt.

Alternative zum Formular-Widget

Falls dir die Funktionen nicht ausreichen oder du gerne logische Verbindungen zwischen den einzelnen Eingabefeldern hättest, wirst du mit dem Formular-Widget schnell an die Grenzen des machbaren stoßen. Zum Glück gibt es in der WordPress-Welt genügend Formular-Plug-ins die diesen Job übernehmen können. Eins davon habe ich mir einmal etwas genauer angeschaut.

Caldera Forms

Caldera Forms für WordPress

Caldera Forms ist in der Basis gratis verfügbar, du kannst dieses Plug-in wie gewohnt über dein WordPress-Backend installieren. Möchtest du weitere Funktionen dazu haben, kosten diese natürlich extra. Die meisten dieser Funktionen wie MailChimp oder ActiveCampaign sind aber bereits Bestandteil von Elementor. Es empfiehlt sich also Caldera Forms nur für komplexe Aufgaben zu verwenden.

Caldera Forms übersicht

Mit Caldera Forms kannst du Formulare mit mehreren Seiten und logischen Bedingungen erstellen. Es erfordert zwar etwas Einarbeitungszeit bis man den Aufbau verstanden hat, aber dann kannst du durchaus sinnvolle Abfrage mit Caldera Forms erstellen.

Caldera Forms Bedingungen

Mithilfe der Bedingungen in Caldera Forms kannst du logische Abfragen stellen. Stelle dir beispielsweise einen Produktberater vor, indem dein Benutzer anhand einiger Fragen die er beantwortet, auf der letzten Seite passende Produkte angezeigt bekommt.

Warum Caldera Forms als Alternative?

Ich persönlich fand den Funktionsumfang für ein Gratis-Plug-in überraschend vielfältig und die Funktionen die Extra kosten, haben wir ja bereits mit Elementor abgedeckt. Die Einarbeitung in die Bedingungen nimmt zwar etwas Zeit in Anspruch aber einmal verstanden eröffnen sich einem, neue Möglichkeiten. So lassen sich beispielsweise auch Berechnungen anstellen, und so kannst du auch Produkte konfigurieren. Beispiel T-Shirt Preis 9,99 € + Aufdruck Preis 5,99 €, eine direkte Verbindung mit „WooCommerce“ ist dann zwar nicht möglich aber du könntest den Umweg über „Zapier“ gehen.

Einige Formular-beispiele findest du auf der Seite des Plug-in Entwicklers.

Fazit

Mit dem hauseigenem Formular-Widget von Elementor, hast du eine einfache und unkomplizierte Methode dein Formular zu erstellen. Klar, komplexe Funktionen lassen sich so nicht realisieren, jedoch dürften die vorhandenen, für die meisten reichen. Für alle anderen gibt es ja noch alternativen.

Was denkst du über diesen Beitrag?

135 points
Upvote Downvote
wp-pagebuilder-info

Written by wp-pagebuilder-info

Mit einem Faible für Grafikdesign und Webseiten begann ich meine Karriere in einer Werbeagentur für Großformatdrucke. Webgestaltung und Webseiten ließen mich aber nie ganz los, sodass ich nebenbei noch einige Webprojekte und Blogs betreibe. Vor einigen Jahren noch mit Joomla, bin ich nun gänzlich auf WordPress umgestiegen und bedaure diesen Schritt bis heute nicht. Mit dem Page-Builder Elementor habe ich dabei recht früh begonnen zuarbeiten und war von Anfang an begeistert wie dieser mit WordPress harmoniert. So war es nur eine Frage der Zeit bis ich ein Webprojekt, das sich auf diesen Page-Builder konzentriert gestartet habe. Mit diesem Blog möchte ich nun mein gesammeltes Wissen zu WordPress und Elementor weitergeben und hoffe, das du von dieser Erfahrung für deine Projekte profitieren kannst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Alles über Bedingungen in Elementor

Elementor Bedingungen – Conditions

Elementor Handbuch Ebook Taschenbuch

Elementor Handbuch: E-Book Digistore24