Meetup #43: Formulare

Ganz gleich ob Bestellungen, Steuererklärung oder sowas wie in unserer Kopfgrafik – ohne Formulare geht heute auch im Netz nicht mehr viel. Selbstverständlich gibt es hierzu auch Lösungen für WordPress-Seiten, welche wir am Dienstag, den 12. Mai 2020 vorgestellt und gemeinsam diskutiert haben.

Einsatzzwecke und Vorteile

Formulare können für die verschiedensten Zwecke eingesetzt werden. Bspw.

Kontaktformulare
Bestellungen
Umfragen
Registrierungen
Login
Passwort vergessen
Stammdaten
Bewerbungen
Tests
Berechnungen
Generatoren

Die Vorteil dabei ist, dass Daten

strukturiert,
einheitlich,
und vollständig

erhoben werden können.

Formularelemente

Formulare können aus verschiedenen Elementen bestehen. Auch Formularelemente werden in der Auszeichnungssprache HTML deklariert. Beim Einsatz von Formularen in WordPress nutzt man üblicherweise ein Plugin.

Textfeld

Für kurze bzw. einzeilige Angaben.
Platzhaltertext möglich.
Minimale oder maximal Anzahl Zeichen definierbar.
Viele weitere vordefinierte Formate z.B. E-Mail, Zahlen, URL, Datum möglich.

Checkboxen

Wenn (mehrere) Möglichkeiten an/abwählbar sein sollen.
Zustand kann vordefiniert werden.

Radio-Button

Es kann immer nur eine Option einer Radio-Gruppe gewählt werden.
Erste Auswahl kann vordefiniert werden.

Select

Auswahl aus einer vorgegeben Liste von Werten.
Auch Mehrfachauswahl definierbar.
Der “value” kann von der Anzeige abweichen.

Textarea

Für längere und mehrzeilige Texte.
Platzhaltertext möglich.

Weitere Elemente findet man bei selfHTML in der Übersicht.

Gestalten

Logischer Aufbau: Sinnvolle Reihenfolge und Gruppierung
Bei mehrspaltigen Formularen mit dem “tabindex”-Attribut arbeiten.
Umfangreiche Formulare auf mehrere Seiten aufteilen
- Am besten mit Einleitungstext / Fortschrittsanzeige
Eingaben überprüfen
- Beim Absenden
- Direkt nach der Eingabe
Signalfarben nutzen (Barrierefreiheit beachten!)
- Rot ➡️ Eingabe fehlerhaft
- Grün ➡️ Eingabe in Ordnung (im Best-Case)

Übermitteln / Speichern

Beim Abschicken des Formulars kann man zwischen folgenden zwei Übermittlungswegen Unterscheiden:

Übertragung

Eingabe wird nach dem Absenden per E-Mail an eine vordefinierte Adresse gesendet. Die Daten werden nicht weiter gespeichert.

Speichern

Die Eingaben werden in der Datenbank gespeichert um sie weiterzuverarbeiten, auszuwerten oder vorzuhalten.

Datenschutz

Wie viel Daten darf/sollte ich abfragen?

So viel wie nötig, so wenig wie möglich!

Welche Daten brauche ich wirklich?

Beispiel: Vorname und Nachname

Brauche ich beides einzeln für die Weiterverarbeitung oder reicht auch ein Feld für Name.

Beispiel: Anrede

Select-Feld mit Auswahl für einheitliche Daten oder reicht auch ein Freitextfeld und Nutzer kann seine Anrede frei vergeben.

Vorteil

Je weniger Daten abgefragt werden, desto höher ist die Wahrscheinlichkeit, dass der Nutzer das Formular auch ausfüllt und nicht abbricht.

Wichtig!

HTTPS-Verbindung bei Formularen
Nutzer auf Datenschutzerklärung hinweisen und verlinken.
Ggf. Einwilligung per Checkbox holen
Löschfristen beachten
Werden Daten per Mail übertragen?
Das ist wie eine Postkarte, die auch jeder lesen kann, der sie in die Hände bekommt.

Absicherung

Warum?

Schätzungen zufolge wird über die Hälfte des Internet-Traffics durch Computer (Bots) produziert:

Formulare werden automatisiert von Bots ausgefüllt
Zeitverlust durch
- Spam von echten Daten zu unterscheiden
- Bereinigung von Spam
Schutz der eigenen Nerven

Honeypots

Zusätzliche Formularfelder im Quelltext die nicht sichtbar sind und somit von einem echten Nutzer nicht ausgefüllt werden.
Wenn das Feld also ausgefüllt wurde, war es mit ziemlicher sicherheit ein Bot.
Gute Bots können natürlich überprüfen ob das Feld sichtbar ist.

Schutzwirkung: Mittel – Schlecht
Barrierefreiheit: Gut

Fragen oder Matheaufgaben?

Es wird eine Textaufgabe gestellt und die Lösung muss vom Nutzer in ein Feld eingetippt werden.
Wenn es nicht immer die selbe Aufgabe ist, kann der Schutz gut sein. Für Nutzer sind manche Aufgaben aber auch herausfordernd.

Schutzwirkung: Mittel – Gut
Barrierefreiheit: Mittel – Schlecht

Bild-Captchas

Es wird ein zufälliger Code in einem Bild angezeigt, welcher verzerrt dargestellt wird und teilweise von anderen Linien oder Zeichen überlagert wird.

Ein typisches Captcha.

Kann mittlerweile trotzdem von vielen Bots erkannt werden oder es ist so schwer erkennbar das es auch für Menschen kaum noch möglich ist.

Schutzwirkung: Schlecht
Barrierefreiheit: Mittel – Schlecht

Google reCaptcha

Google kann relativ gut erkennen ob ein Nutzer sich eher wie ein Bot oder wie ein Mensch verhält.
Daher kann der Nutzer oft ohne weitere Aufgabe das Formular absenden.
Bei untypischen Verhalten muss der Nutzer verschiedene Aufgaben lösen. Z.B. Bilder mit Autos auswählen.

ACHTUNG: Unbedingt DSGVO beachten!

Schutzwirkung: Gut – Mittel
Barrierefreiheit: Gut – Mittel

Technische Fallstricke

Formulare Regelmäßig Testen!
Fehlerhafte Überprüfung verhindert das Absenden
E-Mails können nicht vom Server verschickt werden oder werden vom Empfänger Postfach abgelehnt
- Ggf. mit SMTP Plugin arbeiten
Falsche Überprüfung bzw. Datenformate
- PLZ sind keine Nummern!
  Es gibt PLZ die vorne eine 0 haben.
- Ebenso bei Telefonnummern.

Auswerten

Auswertung der Datenbankeinträge (sofern vorhanden)
Weiterleitung auf eine Vielen Dank-Seite
- Seitenaufrufe messen
Event-Tracking z.B. mit Google Analytics oder Matomo
- Worüber kamen die meisten Anfragen / Bestellungen
- Wie viele Leute haben abgebrochen?

Plugins für WordPress

Contact Form 7

Contact Form 7

Der Klassiker unter den Kontaktformularen.

Im Gegensatz zu vergangenen Versionen sind Bestätigungsseiten nur noch über zusätzliche Plugins möglich. Standardmäßig erfolgt die Bestätigung nach dem Absenden auf der Formularseite selbst.

Dieses Plugin bietet zahlreiche vordefinierte Feldtypen und konfigurierbare Meldungen. Alles in allem ist es dadurch sehr komfortabel, wenn es darum geht, eine einfache Kontaktmöglichkeit zu bieten.

Calculated Fields Form

Calculated Fields Form

Dieses Plugin bietet die Möglichkeit, verschiedene Berechnungen in unterschiedlichen Ausprägungen durchzuführen.

Es ist in der freien Version nicht dazu geeignet, eingegebene Daten abzusenden, sondern lediglich dazu, Services anzubieten oder Prozesse zu veranschaulichen.

Die hier abgebildeten Berechnungen sind bei der Installation bereits vorhandene Beispiele.

Website des Anbieters: https://cff.dwbooster.com/

Ninja Forms Contact Form

Ninja Forms Contact Form – The Drag and Drop Form Builder for WordPress

Ninja Forms bietet gegenüber anderen Plugins ein paar nette Features, wie Stern-Bewertungen oder Bildmarkierungen.

Die zahlreichen Feldtypen sind zum Teil leider sehr auf die Anwendung im US-amerikanischen Raum ausgerichtet.

Wem das nichts ausmacht, erhält hier ein schönes Plugin, mit dem sich z.B. auch ein kleines Bestellformular ohne Shop (eine häufige Anforderung, wennes darum geht, nur einen Artikel anzubieten) finden.

Mit AddOns wird Ninja Forms sehr leistungsfähig. Allerdings muss man für Features, die in anderen Plugins schon vorhanden sind, hier bezahlen.

Torro Forms

https://de.wordpress.org/plugins/torro-forms/

Torro Forms eignet sich für nahezu alle Arten der Kontaktaufnahme, für Anmeldungen und Anträge.

Durch mehrseitige Formulare und frei konfigurierbare Mailings wird dieses Plugin den meisten Anforderungen schnell gerecht.

Besonderes Feature: Die Daten aus mehrseitigen Formularen, die nicht vollständig bearbeitet / abgeschickt wurden, sind in im Backend einsehbar.

Gravity Forms

Gravity Forms ist ein reines Premium Plugin, also kostenpflichtig.
Für $ 59,- / Jahr erhält man verschiedenen Urteilen zufolge jedoch ein Formular-Plugin, das keine Wünsche offen lässt.

Mehrseitigkeit und Datei-Upload, wie bei Torro Forms sind auch hier problemlos möglich, und für alles andere gibt es angeblich einen gut funktionierenden Support auf Basis eines Ticketsystems.

Elementor Form Widget

Das Erstellen von Formularen in Elementor ist sehr einfach und intuitiv.

Erstaunlich viele Funktionen
schönes Erscheinungsbild
man benötigt kein Extra-Plugin
Möglichkeit andere Formulare per Shortcode einzubinden
responsive Formulare
dynamische Formulare möglich ohne zusätzliches Plugin
leider ist der Datepicker nur mit englischem Datum

Wir bedanken uns ausdrücklich für eure Teilnahme und Beiträge!