Formulare mit Elementor

Formulare mit Elementor

tl;dr: Wenn du Formulare auf einer Elementor-Seite einsetzt benötigst du die PRO-Version. Damit wird es sehr einfach, funktionelle und elegante Feedbackelemente zu erstellen. Wie man diese gestalten kann und konfiguriert erfährst du in diesem Beitrag.

Beispiel: ein Kontaktformular

Ein Formular dient dazu Daten, die der User im Browser eingibt, an eine E-Mailadresse oder eine Software zu schicken. Diese Daten sind immer ein Paar aus dem Namen der Daten und dem Wert (also den Daten selber). Damit ein Formular abgeschickt wird, muss entweder ein Button gedrückt werden oder irgendwie anders eine Aktion gesetzt werden (zB. die Return-Taste gedrückt werden).

Im hier behandelten Beispiel werden Daten über eine Webformular an eine E-Mail-Adresse gesendet. Wir bauen also ein klassisches Kontaktformular. Dabei verwenden wir die Funktionalität des Elementor für Form und Funktion und sichern das Formular mittels Google reCAPTCHA gegen Spam ab.

Das Widget „Formular”

Um ein Formular auf einer Seite, in einem Beitrag oder auch in einem Template zu positionieren gibt es das Widget, das genau so heisst: Formular.

Formular Widget

Wenn man das Widget wie gewohnt im Elementor per Drag&Drop in die Arbeitsfläche zieht wird ein Formular eingefügt, das bereits die Elemente

  • Name
  • E-Mail
  • Nachricht
  • Senden-Button
enthält. 
Das Formularwidget erzeugt eine Basisstruktur, von der man in seiner Formulargestaltung ausgehen kann.
5 Reiter bei Inhalt und 4 bei Stil, da gibt es viel einzustellen. ”Erweitert" unterscheidet sich nicht von anderen Widgets.

Formularfelder

Bei aktiviertem Formular-Widget bieten sich 5 Abschnitte beim Inhalt an, immerhin 4 bei Stil. Der erste Abschnitt Formularfelder ist der Container für unsere Felder, die wir anlegen wollen. Zuvor jedoch geben wir dem Formular einen geeigneten Formularnamen

Jedes Formularfeld bietet eine Reihe von Optionen, die einzustellen sind.

Schauen wir uns also als Beispiel gleich das erste Feld Name an im Bereich Inhalt an. Es ist definiert als Typ Text, die Option für Feldnamen anzeigen lautet Name, der Platzhalter heisst Name. Weiters kann ich angeben, ob es sich um ein Pflichtfeld handelt und schliesslich kann ich die Spaltenbreite des Feldes – relativ zur Umgebung – in verschiedenen Schritten einstellen. 

Unter Erweitert kann ich weiters einen Standardwert eingeben und auch eine ID vergeben. Der Standardwert kann dynamisch sein, also zum Beispiel auch die ID des Beitrages oder den Namen der Seite beinhalten, auf der das Formular genutzt wird.

Die Feldtypen sind natürlich all jene, die eben in HTML möglich sind. Ergänzt durch ein paar Besonderheiten, die im Zusammenhang mit der Inhaltsüberprüfung der eingegebenen Daten Sinn ergeben.

Ob eine Feld also Text, E-Mail URL oder Telefonnummer akzeptieren soll hat mehr mit der Logik zu tun als mit den Zeichen die der User eingibt, während der Unterschied zwischen Text, Textbereich, Auswahlliste, Auswahlbox und Datum auch mit der Art der Daten zu tun hat.

Einen Überblick über alle möglichen Typen und Datenformen bietet die Seite von Selfhtml:

Je nach Feldtyp bietet das Interface von Elementor unterschiedliche Optionen direkt unter der Typeneinstellung an. Eine Zahl kann natürlich andere Formen haben wie ein Datum, eine Checkbox oder eine Auswahlliste haben ganz andere Optionen als ein Passwortfeld.

Allen gemein ist wiederum, dass sie als Pflichtfeld ausgeführt werden können. Angaben zur Feldbreite sind auch – wo sinnvoll – möglich. Ich muss also jedes gewünschte Feld einzeln anlegen und die gewünschten Optionen einstellen.

Für das gesamte Formular stelle ich dann die Eingabegröße ein. Auch ob die Feldnamen angezeigt werden sollen, und wenn ja, ist die Option Pflichtfeld hier der Ein/Ausschalter für das Zeichen, ob alle Pflichtfelder als solche gekennzeichnet werden sollen. 

 

Absenden Schaltfläche 

Der Abschnitt hier beschäftigt sich nur mit dem Button zum Abschicken des Formulars. Hier kann ich ein Icon vor oder nach dem Buttontext hinzufügen und eine auch andere Größe also bei den Formularfeldern einstellen. Selbsterklärend.

Aktion nach dem Versenden

Hier wiederum stelle ich nun ein, was den mit den Daten  passieren soll bzw. was überhaupt geschehen soll, sobald ein User ein Formular abgeschickt hat. 

Voreingestellt ist hier E-Mail. Hier können aber auch andere Dinge gewählt werden. In unserem Beispiel sollen 2 Dinge geschehen:

  1. Eine E-Mail wird mit den Daten verschickt.
  2. Der Webuser soll ein PopUp eingeblendet bekommen, womit ihm für die Nachricht gedankt wird. 
Nach dem Versenden wird ein E-Mail erstellt und ein Popup geöffnet.

Nachdem wir die enstprechenden Optionen im Feld Aktion nach dem Versenden hinzugefügt haben tauchen darunter die Einstellungsflächen eben hierfür auf. 

Bei der E-Mail müssen wir Empfängeradresse und Betreff angeben. wenn in der Nachricht 

[all-fields]

steht werden alle Felder des Formulars in den Body der Mail übernommen. Wer bei Antwort an das Feld E-Mail Feld auswählt kann nach Mailempfang durch einfaches Antworten direkt an den Versender zurückschreiben, ohne dessen Antwortadresse eingeben zu müssen. 

Die Meta Daten und Senden als … legen schliesslich fest, welche Informationen ich vom Versender noch haben möchte bzw. welche Mailcodierung verwendet werden soll.

Für das gewünschte Popup müssen wir dieses anlegen. Und zwar unter

Dashboard > Templates > Popup > Neu hinzufügen

wird ein passendes erstellt oder ausgewählt. Der hier zu vergebende Namen wird dann in im Reiter Popup (siehe Pfeile im Bild grün) eingetragen.

Und das war’s eigentlich technisch auch schon. Unser Formular kann angezeigt und getestet werden. Es sollte eine E-Mail generiert werden und auch ein Popup nach dem Versand eingeblendet werden.

Es gibt ein paar besondere Feldtypen, die wir uns kurz näher anschauen sollten:

Feldtyp: Datei hochladen

Elementor Form FileuploadDamit kann der Benutzer ein File mit dem Formular mitschicken. Das kann naturgemäss ein wenig kritisch werden, wir müssen also ein paar Einschränkungen vornehmen:
  1. Maximale Dateigröße: damit verhindern wir, dass der User zu große Files mit dem Formular mitschickt. Achtung: die Filegrößen die der Webhost bzw. die Mailprogramme akzeptieren können hier nicht beeinflusst werden. 
  2. Erlaubte Datei-Typen: hier kann ich zumindest den Namen des Files auf die Fileart checken. Ob in einem .jpg genannten File auch wirklich ein Bild drinnen ist und nicht ein .zip mit Schadsoftware kann ich so jedoch nicht überprüfen.
  3. Maximale Dateianzahl: damit ermöglich ich es, mehr als nur ein File mitzuschicken. Ein Beispiel für eine Anwendung wäre ein Formular für eine Kostenanfrage einer Reparatur eines Möbelstückes, wo der User seine Bilder des Schadens mit der Anfrage mit schickt.

Feldtyp: Akzeptanz

Elementor Formular AkzeptanzDamit erzeuge ich eine Checkbox die sicher stellt, dass nur Formulare Abgeschickt werden wo der Benutzer auch den Bedingungen zugestimmt hat.

Normalerweise wird man es als Pflichtfeld ausführen. 

Hinweis: Wenn man so ein Feld Einsetzt um eine DSGVO-konforme Zustimmung zu erhalten darf die Option Standardmäßig ausgewählt nicht gesetzt werden. Ausserdem ist bitte vorab zu klären, ob dieses Feld überhaupt notwendig ist (oft ist sie das nämlich nicht).

Feldtyp: Datum

Elementor Formular DatumEin sehr praktischer Feldtyp, wenn man vom User eine Datumsangabe benötigt (zB. für eine Terminvereinbarung). Es öffnet sich beim Verwenden ein kleines Modalfenster mit Datumsauswahl. 

Die Elementor-Umsetzung bietet die Optionen für eine untere bzw. obere Datumsgrenze. Das Standardformat ist YYYY-MM-DD, wenn man den Schalter Normales HTML5 setzt ändert sich das Datumsformat auf DD.MM.YYYY

Feldtyp: Zeit

Elementor Formular ZeitAnalog zum Feld Datum gibt es auch einen Feldtyp Zeit. Der Schalter für Normales HTML5 wechselt zu einer in unserem Kulturkreis üblicherem Zeitformat. So wirklich smart wirkt jedoch die Umsetzung dieses Features nicht.

Feldtyp: HTML

Für weitere Anwendungen bietet Elementor die Möglichkeit mit einem HTML-Feld Code im Formular unter zu bringen. Zum Beispiel kann man damit die leider nicht unterstütze Funktion des Schiebereglers (Input type=range) umsetzen:

  1. Ein Feld mit dem Typ HTML einbauen
  2. den Code einfügen, zB:
<input type="range" name="zahlen" id="zahlen"  min="0" max="100" value="30">
  1. Die Gestaltung im CSS (wo wird hier beschrieben) einbinden.
Elementor input type=range
Im Feldtyp HMTL kann man den Feldtyp input type=range einbauen, der noch nicht nativ unterstützt wird.

Einen sehr guten Artikel wie man den Schieberegler gestaltet gibt es auf CSS-Tricks. Mit dem CSS-Code auf dieser Seite wurde der Schieberegler am Screenshot gestaltet.

Feldtypen: reCAPTCHA, Honeypot

Zur Einbindung bietet Elementordie Typen reCAPTCHA sowie reCAPTCHA V3 an. (siehe auch weiter unten in diesem Artikel).

Ausserdem gibt es auch eine Honeypotfunktion an. Die Idee dieser Technik ist es, Formularspam dadurch zu verhindern, dass Spambots auf die schlichte Existenz eines solchen Feldes reagieren und sich dadurch verraten, denn Menschen sehen dieses Feld gar nicht.

Gestaltung der Formularelemente

Wie immer im Elementor findet man im Reiter Stil die Optionen zur Gestaltung. Seit Einführung der Theme Style Option werfen wir jedoch zuvor einen Blick in diese seitenübergreifenden Gestaltungsmöglichkeiten. Dazu links oben auf das Hamburgemenu klicken und danach Theme Style wählen. (Seit Mai 2020 auf deutsch jetzt Theme-Stil)

Formularfelder
Formularfelder werden global im Theme Stil gestaltet

Der 4. Punkt Formularfelder bietet alle Möglichkeiten zur Typographie, Rahmen Gestaltung etc. Für den Senden-Button wechseln wir dann zur Theme Stil-Option Buttons. Alle hier eingestellten Gestaltungen wirken sich auf die gesamte Webseite aus. Es kann aber jeder einzelne Punkt überschrieben werden, indem im Stil-Tab direkt beim Formular zB. eine andere Farbe für den Absenden-Button gesetzt wird. 
Beispiel: Grundsätzlich sind alle Buttons grün, nur bei einem Formular einer besonderen Promotion wird der Button extra auf rot gesetzt.

Der Reiter Stil im Formular bietet die zu erwartenden typographischen Möglichkeiten, konfigurierbare Abstände, Farben für Texte, Hintergründe, Markierungen etc. 

In eigener Sache:
werkform hilft bei der grafischen Konzeption einer Webseite und der Gestaltung von Seiten und Templates - und Formularen! Drücke auf den Button um ein Angebot zu bekommen.
Werbung

reCAPTCHA V3 verwenden

Wer eine Wette abschliessen will, ob über ein Webformular zuerst eine echte Anfrage oder eine Spamnachricht in der Mailbox landet sollte auf’s Zweite setzen. Auch wenn die Erfolge gering sind: anscheinend kann immer noch irgendwer einen Nutzen daraus ziehen sinnlose Nachrichten über Webformulare zu verschicken.

Ein Mittel um sich dagegen zu wehren besteht im Einsatz von Captchas, also kleinen Suchspielen, Rätseln oder Aufgaben die ein Mensch vermeindlich einfach, ein Robot aber nur schwer lösen kann. Daraus weiter entwickelt hat Google eine Technik, die versucht Spam über Forms zu verhindern. Ohne, dass der User belästigt wird indem er ein Hakerl setzen muss und bestätigt, kein Roboter zu sein. Das kostenfreie Produkt das daraus entstanden ist heisst Google reCAPTCHA V3.

An dieser Stelle bewerte ich weder die datenschutzrechtlichen Auswirkungen noch die moralische oder technische Qualität, schon wieder einmal ein Google-Service zu benutzen. Es funktioniert recht gut, hier beschäftigen wir uns jetzt nur mit dem wie.

Wir benötigen eine Google-Konto, mit dem wir uns beim Service einloggen. Dort können wir in einem Panel verschiedene Webseiten anlegen. Dabei müssen wir jeweils festlegen, ob wir die Version 2 oder 3 verwenden wollen. Die beiden Dienste benötigen unterschiedliche Schlüssel, dh. ein ev. Umstieg in der Version bedarf eine erneuten Registrierung der Seite.

Recaptcha registrieren
Aufpassen welche Version gewählt wird. Eine durch V3 geschützte Seite erkennt man am Badge rechts unten.

Für jede Webseite (bei der man übrigens mehrere Domainnamen eintragen kann) erhält man ein Schlüsselpaar, bestehend aus einem Webseitenschlüssel und einem geheimen Schlüssel.

Recpatcha V3
Das Schlüsselpaar für unsere Testseite ist über die Einstellungen jederzeit abrufbar.

Die Schlüssel werden nun auf der eigenen Webseite eingetragen, dazu

Dashboard > Elementor > Einstellungen >Integration > reCAPTCHA V3

aufrufen und die beiden Zeichenketten entsprechend hineinkopieren. Wie sich der erst kürzlich hinzugekommene Scorewert auswirkt weiss ich im Augenblick noch nicht. Also einfach belassen.

 

Elementor Recaptcha Einstellungen
Die Schlüssel im Dashboard in die Elementor Einstellungen kopieren.

Damit das Ganze nun funktioniert muss nun das auch das Formular darüber informiert werden. Dazu gibt es das entsprechende Formularfeld reCAPTCHA V3. Das Besondere an dieser Lösung ist, dass die reCaptcha-Plakette konfiguriert werden kann, ob sie links, rechts oder innerhalb der Formularelemente auftauchen soll.

Dies Plakette ist Teil der Nutzungsvereinbahrung, die man mit Google eingeht sobald man dieses Service verwendet. Es muss entweder die Plakette angezeigt werden oder ein bestimmter, verlinkter Text eingeblendet werden. Die mit Elementor umgesetzte Lösung zeigt die Plakette wirklich nur dann an, wenn auch ein Formular verwendet wird. Man kann sich den Umweg über eine CSS-Ausblendung der Plakette und dafür eine Einblendung des Textes sparen.

Recaptcha Einbindung
Das Formularfeld reCAPTCHA V3 sorgt für die ordnungsgemäße Nutzung des Google Service.

Nach dem Speichern ist nun das Formular abgesichert. Über das reCaptcha-Adminkonto bekommst du nach einiger Zeit Informationen über die letzten 90 Tage, wieviele Anfragen über das Tool analysiert wurden.

Mehrstufige Fomulare

Ab Version 2.10. kann Elementor Pro auch mehrstufige Formulare. (Die Angaben und Screenshots stammen aus der Beta-Version Ende Mai 2020). Die Idee beim mehrstufigen Formular ist es, dem User die Bedienung zu vereinfachen indem eine ev. Lange Liste an Eingabefeldern in zusammenhängende Abschnitte geteilt wird. Technisch bedeutet das, dass bis zum Absenden des Formulars die vom User eingegebenen Daten serverseitig aufgehoben werden müssen und erst nach dem Senden weitergeleitet werden (zB. als E-Mail, siehe oben).

In dem Beispiel hier wurde das Formular in 3 Schritte geteilt, zuerst sollen die persönlichen Daten eingeben werden, im 2. Schritt kann eine Nachricht geschrieben werden und im 3. Schritt kann eine Datei zur Nachricht gehängt werden, die dann mit dem Formular übertragen werden soll.

Zwischen den einzelnen Schritten kann navigiert werden, dh es ist möglich zB. im dritten Schritt zurück zum Nachrichtenfenster in Schritt 2 zu wechseln und dort seine Nachricht zu überarbeiten.

Die Umsetzung dieser Funktionalität erfolgt mittels dem neuen Feldtyp Step, der jeweils am Anfang bzw. zwischen den zu trennenden Feldern eingesetzt wird.

Elementor Mehrstufiges Formular mit Steps
Die 3 Schritte wurden als eigene Felder im Formular angelegt.
Der Schritt im Detail
Jeder Schritt kann einen eigenen Namen bekommen und eine individuelle Beschriftung der Navigation.

Die Gestaltungsmöglichkeiten sind 2geteilt. Zum einen gibt es den neuen Abschnitt Step Settings in dem angelegt wird, ob und wie die einzelnen Schritte grafisch dargestellt werden sollen. Es gibt:

  • none
  • Text
  • Icon
  • Number
  • Progress Bar
  • Number & Text
  • Icon & Text

Letztere Einstellung wurde für das Beispiel oben verwendet. 

Dann kommen wie üblich im Bereich Stil eine Reihe von Einstellungsmöglichkeiten dazu. Beispielsweise kann man die Icons je nach Stufe verschieden einfärben. 

Grundsätzlich schauen diese Optionen schon in der Beta-Version sehr gut aus. Mit Verbesserungen im Detail bis zum Release wird gerechnet. Es wird also wirklich einfach, die Formulare nutzerfreundlicher zu gestalten und somit den Weg zur Convertion zu unterstützen.

Formular Step Settings
Step Stiles Formular

Probleme beim E-Mail-Versand

Es kommt häufig zu Fehlern beim Formularversand über E-Mail.  Hier einige öfter auftretende Problem und Lösungsansätze:

Problem: Das E-Mail landet im Spam-Ordner.
Lösung: entweder die Absenderadresse oder die IP des Webservers auf die Whitelist setzen. Besonders bei Nachrichtenfeldern die freie Texteingabe ermöglichen werden Spamer versuchen, irgendwelchen Müll über das Formular zu versenden. Dh die Spamsoftware erkennt eigentlich korrekt, dass es sich um Spam handelt, leider kann so die Absenderadresse fälschlich unter Spamverdacht geraten.

 

Problem: E-Mail werden gar nicht erst verschickt.
Lösung 1: Eine gültige Absenderadresse eintragen. Sinnvoll ist hier, eine E-Mailadresse mit der selben Domain wie die Webseite einzutragen. 

Lösung 2: Es liegt nicht an der Webseite sondern am Webserver (siehe auch hier). Der Lösungsweg ist: 

  1. Checken, ob der Webserver überhaupt E-Mails verschickt. (also zb. im WordPress eine Passwortanforderung absetzen oder  das Plugin Check-Emails verwenden.
  2. Elementor verwendet die WordPress-Funktion wp_mail die wiederum die PHP-Funktion send_mail verwendet. Das kann man umgehen, indem man einen anderen Mailserver verwendet, indem man ein SMTP-Plugin verwendet.
von_email
Die Absenderadresse muss korrekt formatiert sein und sollte die Domain der Webseite beinhalten.

Lösung 3: Stelle sicher, daß die IDs passen und eindeutig sind.  

Formfeld ID
Jedes Feld hat eine muss eine eindeutige ID haben, damit der Formularversand funktioniert.

Problem: Wie kann ich die Daten die über das Formular verschickt wurden am Server speichern?
Lösung: Das Plugin Elementor Contact Form DB macht genau das. Bitte unbedingt auf die DSGVO achten!

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.