Ein Kontaktformular gehört für viele WordPress-Webseiten zur Grundausstattung. Besucher können eine Frage stellen, ein Angebot anfordern oder einen Rückruf vereinbaren, ohne dafür erst ein E-Mail-Programm öffnen zu müssen.
Contact Form 7 ist dafür besonders beliebt. Das Plugin ist kostenlos, flexibel und lässt sich auch in bestehende Webseiten relativ leicht einbauen. Nach der Installation ist ein einfaches Formular schnell erstellt.
Genau darin liegt aber auch eine kleine Falle.
Nur weil ein Formular auf dem Bildschirm ordentlich aussieht, ist es noch lange nicht für alle Menschen gut nutzbar. Ein Besucher mit Screenreader erlebt das Formular anders als jemand, der es mit der Maus bedient. Auch Menschen mit eingeschränkter Feinmotorik, schwächerem Sehvermögen oder Konzentrationsproblemen stoßen schnell auf Hindernisse.
Contact Form 7 kann durchaus für barrierearme Formulare genutzt werden. Das Plugin erledigt diese Arbeit aber nicht automatisch. Entscheidend ist, wie die einzelnen Felder aufgebaut, beschriftet und getestet werden.
Ein Formular kann gut aussehen und trotzdem schwierig sein
Nehmen wir ein typisches Kontaktformular mit vier Elementen:
- Name
- E-Mail-Adresse
- Nachricht
- Absenden-Button
Für einen sehenden Besucher wirkt das unkompliziert. Die Felder sind vielleicht mit dünnen grauen Linien gestaltet, in jedem Feld steht ein kurzer Hinweis und darunter befindet sich ein farbiger Button.
Mit der Tastatur zeigt sich dann möglicherweise ein anderes Bild. Der aktuell ausgewählte Bereich ist kaum zu erkennen. Ein Screenreader nennt nur „Eingabefeld“, aber nicht, ob dort der Name oder die E-Mail-Adresse eingetragen werden soll. Nach dem Absenden erscheint irgendwo eine rote Meldung, die nicht erklärt, was eigentlich fehlt.
Das Formular ist also vorhanden. Wirklich zugänglich ist es trotzdem nicht.
Bei Contact Form 7 entstehen solche Probleme häufig nicht durch einen großen technischen Fehler. Meist sind es mehrere kleine Entscheidungen, die zusammenkommen.
Sichtbare Feldnamen machen einen großen Unterschied
Bei modernen Formularen werden Beschriftungen gerne direkt in die Felder geschrieben. Dort steht dann zum Beispiel „Ihr Name“. Sobald man zu tippen beginnt, verschwindet dieser Hinweis.
Das spart Platz und wirkt optisch ruhig. Für die Bedienung ist es allerdings nicht immer die beste Lösung.
Wer mehrere Felder ausfüllt und später noch einmal nach oben scrollt, sieht möglicherweise nicht mehr, welche Angabe wo verlangt wurde. Besonders bei längeren Formularen wird das schnell unübersichtlich.
Besser sind dauerhafte Beschriftungen über den Feldern:
Name
[Eingabefeld]
E-Mail-Adresse
[Eingabefeld]
Ihre Nachricht
[Textfeld]
So bleibt jederzeit erkennbar, wofür ein Feld gedacht ist. Ein Platzhalter darf zusätzlich verwendet werden, sollte die sichtbare Beschriftung aber nicht ersetzen.
Beschriftung und Feld müssen technisch verbunden sein
Eine Überschrift über einem Feld reicht für Screenreader nicht immer aus. Im Hintergrund muss eindeutig festgelegt sein, dass diese Beschriftung genau zu diesem Eingabefeld gehört.
In Contact Form 7 kann das über ein Label gelöst werden. Eine einfache Form sieht zum Beispiel so aus:
<label>
Ihr Name
[text* your-name]
</label>Der Text und das Feld gehören dadurch zusammen.
Bei komplexeren Formularen ist eine eindeutige Verbindung über eine Feld-ID noch übersichtlicher. Wichtig ist weniger, welche Variante verwendet wird. Entscheidend ist, dass ein Screenreader nicht nur „Textfeld“ ausgibt, sondern beispielsweise „Ihr Name, Pflichtfeld“.
Das hört sich nach einer Kleinigkeit an. Für jemanden, der das Formular nicht sehen kann, ist es jedoch der Unterschied zwischen Orientierung und Raten.
Pflichtfelder nicht nur mit einem Sternchen markieren
Ein kleines Sternchen ist die übliche Kennzeichnung für Pflichtfelder. Viele Besucher kennen diese Bedeutung. Darauf verlassen sollte man sich trotzdem nicht.
Ein Sternchen kann übersehen werden. Manche Screenreader lesen es unverständlich vor, andere Nutzer wissen möglicherweise nicht, was damit gemeint ist.
Bei einem kurzen Formular spricht nichts dagegen, die Information auszuschreiben:
Name – Pflichtfeld
E-Mail-Adresse – Pflichtfeld
Nachricht – Pflichtfeld
Das ist eindeutig und spart Rückfragen.
Wer das Wort nicht bei jedem Feld wiederholen möchte, kann am Anfang des Formulars erklären, wie verpflichtende Angaben gekennzeichnet sind. Die Markierung muss dann allerdings konsequent und gut sichtbar verwendet werden.
Nur Angaben abfragen, die wirklich gebraucht werden
Formulare wachsen schnell.
Am Anfang werden nur Name und Nachricht benötigt. Später kommt eine Telefonnummer hinzu. Dann ein Feld für das Unternehmen, ein Auswahlmenü für die gewünschte Leistung, ein Budgetfeld und eine Frage nach dem bevorzugten Rückrufzeitpunkt.
Für den Betreiber sind zusätzliche Informationen bequem. Für Besucher wird der Kontakt dadurch länger und anstrengender.
Gerade auf mobilen Geräten wirkt ein umfangreiches Formular schnell abschreckend. Wer mit einer Bildschirmtastatur arbeitet oder Schwierigkeiten beim Tippen hat, spürt jedes zusätzliche Feld.
Vor jeder neuen Abfrage lohnt sich daher die Frage: Brauche ich diese Angabe wirklich vor der ersten Antwort?
Für viele Unternehmenswebseiten genügt ein schlankes Formular:
- Name
- E-Mail-Adresse
- Nachricht
- optional eine Telefonnummer
Alles Weitere kann später persönlich geklärt werden.
Passende Eingabefelder erleichtern die Nutzung
Contact Form 7 bietet unterschiedliche Feldarten. Für eine E-Mail-Adresse sollte deshalb kein gewöhnliches Textfeld verwendet werden. Dasselbe gilt für Telefonnummern oder Internetadressen.
Das bringt mehrere Vorteile.
Der Browser kann Eingaben besser prüfen. Auf dem Smartphone erscheint eine passendere Tastatur. Bei E-Mail-Adressen werden zum Beispiel das @-Zeichen und die Punkttaste leichter erreichbar.
Zusätzlich kann die automatische Vervollständigung genutzt werden. Der Browser erkennt dann, dass in einem Feld der Name, die E-Mail-Adresse oder die Telefonnummer erwartet wird.
Gerade Menschen mit motorischen Einschränkungen profitieren davon. Statt jede Angabe erneut einzutippen, können bereits gespeicherte Daten übernommen werden.
Technisch ist das nur eine kleine Ergänzung. In der Praxis spart sie Zeit und reduziert Tippfehler.
Fehlermeldungen sollten nicht zum Suchspiel werden
Fast jeder hat schon einmal ein Formular abgeschickt und anschließend die Meldung erhalten:
„Bitte überprüfen Sie Ihre Eingaben.“
Damit weiß man, dass etwas nicht stimmt. Welches Feld betroffen ist, bleibt aber offen.
Eine gute Fehlermeldung beantwortet zwei Fragen:
Was ist falsch?
Wie kann ich es korrigieren?
Zum Beispiel:
„Bitte geben Sie eine E-Mail-Adresse ein.“
Oder:
„Die E-Mail-Adresse scheint unvollständig zu sein.“
Oder:
„Bitte schreiben Sie eine kurze Nachricht.“
Der Hinweis sollte möglichst in der Nähe des betroffenen Feldes erscheinen. Nur eine rote Umrandung genügt nicht. Farbe kann die Aufmerksamkeit lenken, darf aber nicht die einzige Erklärung sein.
Das ist nicht nur für Screenreader wichtig. Auch Menschen mit Farbsehschwäche oder einem schlecht eingestellten Bildschirm erkennen eine rein farbliche Markierung möglicherweise nicht.
Freundliche Meldungen helfen mehr als technische Sprache
Standardmeldungen in Formularen klingen manchmal wie eine Fehlermeldung aus einem Computerprogramm. Für Besucher ist das wenig hilfreich.
Statt:
„Validierungsfehler bei einem oder mehreren Feldern“
klingt Folgendes verständlicher:
„Einige Angaben fehlen noch. Bitte prüfen Sie die markierten Felder.“
Statt:
„Die Übermittlung ist fehlgeschlagen“
ist diese Formulierung klarer:
„Ihre Nachricht konnte leider nicht gesendet werden. Bitte versuchen Sie es später noch einmal.“
Ein Formular ist ein Gespräch zwischen Webseite und Besucher. Die Meldungen sollten sich deshalb auch wie verständliche Kommunikation lesen.
Nach dem Absenden braucht es eine eindeutige Rückmeldung
Ein Besucher klickt auf „Nachricht senden“ und wartet. Hat es funktioniert? Lädt die Seite noch? Wurde die Anfrage vielleicht zweimal verschickt?
Diese Unsicherheit lässt sich mit einer klaren Bestätigung vermeiden.
Eine passende Erfolgsmeldung könnte lauten:
„Vielen Dank. Ihre Nachricht wurde erfolgreich gesendet.“
Die Meldung muss gut sichtbar sein und sollte von Screenreadern wahrgenommen werden. Bei langen Formularen darf sie nicht unbemerkt weit unterhalb des sichtbaren Bereichs erscheinen.
Contact Form 7 bietet Möglichkeiten, die Rückmeldung innerhalb des Formulars zu platzieren. Die genaue Position sollte praktisch getestet werden. Was im Editor logisch aussieht, kann nach dem Absenden auf einem Smartphone ganz anders wirken.
Der Absenden-Button sollte die Handlung erklären
„Senden“ ist nicht falsch. Ein etwas genauerer Buttontext hilft Besuchern aber besser zu verstehen, was passiert.
Je nach Formular können diese Formulierungen sinnvoll sein:
- Nachricht senden
- Anfrage absenden
- Rückruf anfordern
- Terminwunsch übermitteln
- Angebot anfragen
Sehr allgemeine Begriffe wie „Los“, „Weiter“ oder „OK“ sind weniger geeignet. Ein reines Pfeilsymbol ohne sichtbaren Text ist ebenfalls ungünstig.
Der Button sollte außerdem klar als Schaltfläche erkennbar sein. Er braucht ausreichend Kontrast und darf nicht so dezent gestaltet werden, dass er wie normaler Text wirkt.
Tastaturbedienung selbst ausprobieren
Eine der einfachsten Prüfungen kostet nichts und dauert nur wenige Minuten.
Die Maus wird beiseitegelegt. Danach geht es nur mit der Tab-Taste durch das Formular.
Dabei sollte man auf folgende Punkte achten:
Erreicht der Fokus jedes Feld?
Ist deutlich sichtbar, welches Feld aktiv ist?
Stimmt die Reihenfolge?
Kann die Datenschutz-Checkbox bedient werden?
Ist der Absenden-Button erreichbar?
Bleibt man an irgendeiner Stelle hängen?
Ein häufiges Problem ist ein fast unsichtbarer Fokusrahmen. Technisch lässt sich das Feld zwar erreichen. Der Nutzer erkennt aber nicht, wo er gerade ist.
Der Fokus darf optisch zum Design passen. Er muss trotzdem deutlich sichtbar bleiben.
Die Reihenfolge sollte dem sichtbaren Aufbau folgen
Ein Formular wird normalerweise von oben nach unten ausgefüllt. Genau so sollte auch die Tastaturreihenfolge funktionieren.
Bei einfachen Contact-Form-7-Formularen klappt das meist gut. Schwierigkeiten entstehen eher, wenn Felder mit Spalten, Page Buildern oder individuellen Layouts angeordnet werden.
Auf dem Desktop stehen vielleicht zwei Eingabefelder nebeneinander. Technisch springt der Fokus aber erst nach rechts, dann weit nach unten und anschließend wieder nach links.
Für sehende Mausnutzer fällt das kaum auf. Bei Tastaturbedienung wirkt es verwirrend.
Mehrspaltige Formulare sollten deshalb nicht nur schön aussehen, sondern auch in der richtigen Reihenfolge durchlaufen werden können.
Datenschutz-Checkboxen brauchen klare Texte
Viele Kontaktformulare enthalten eine Bestätigung zur Datenschutzerklärung. Auch dieses Element muss verständlich und einfach bedienbar sein.
Schlecht wäre eine kleine Checkbox mit dem Text:
„Datenschutz akzeptieren.“
Besser ist eine konkrete Formulierung, die erklärt, worum es geht.
Der Link zur Datenschutzerklärung sollte klar benannt sein. „Hier klicken“ ist weniger hilfreich als „Datenschutzerklärung lesen“.
Die Checkbox selbst muss mit der Tastatur erreichbar sein. Außerdem sollte ein Klick auf den zugehörigen Text ebenfalls die Auswahl aktivieren. Gerade auf dem Smartphone ist das wichtig, weil ein winziger Kasten schwer zu treffen sein kann.
Welche rechtliche Formulierung für die jeweilige Webseite notwendig ist, sollte separat geprüft werden. Eine barrierefreie Darstellung ersetzt keine datenschutzrechtliche Bewertung.
Auswahlfelder und Checkbox-Gruppen verständlich aufbauen
Manche Formulare fragen nach einer gewünschten Leistung:
Webdesign
SEO
Wartung
Die einzelnen Optionen brauchen einen gemeinsamen Zusammenhang. Besucher müssen erkennen, zu welcher Frage sie gehören.
Eine Überschrift wie „Für welche Leistung interessieren Sie sich?“ schafft diese Orientierung.
Bei mehreren Checkboxen sollte jede Auswahlmöglichkeit eine eigene Beschriftung besitzen. Contact Form 7 kann diese Verbindung über die entsprechende Label-Funktion herstellen.
Zusammengehörige Optionen sollten außerdem optisch und technisch als Gruppe behandelt werden. So versteht ein Screenreader, dass mehrere Auswahlmöglichkeiten zu derselben Frage gehören.
Das Formular auf dem Smartphone ausfüllen
Eine Desktop-Vorschau reicht nicht.
Auf einem echten Smartphone zeigen sich häufig Probleme, die am großen Bildschirm nicht auffallen:
- Beschriftungen brechen ungünstig um.
- Checkboxen sind zu klein.
- Felder stehen zu dicht beieinander.
- Fehlermeldungen rutschen aus dem sichtbaren Bereich.
- Die Tastatur verdeckt den Absenden-Button.
- Die Erfolgsmeldung erscheint an einer unerwarteten Stelle.
Das Formular sollte deshalb einmal vollständig auf einem Mobilgerät ausgefüllt werden. Auch ein absichtlich fehlerhafter Durchgang ist sinnvoll.
Erst dabei sieht man, ob die Fehlermeldungen verständlich bleiben und ob die Korrektur ohne mühsames Scrollen möglich ist.
Spam-Schutz ohne zusätzliche Hürden
Contact Form 7 benötigt auf vielen Webseiten einen Spam-Schutz. Klassische Bilderrätsel sind dafür jedoch keine besonders zugängliche Lösung.
Aufgaben wie „Wählen Sie alle Bilder mit Ampeln aus“ schließen blinde Besucher praktisch aus. Verzerrte Buchstaben sind auch für Menschen mit eingeschränktem Sehvermögen schwierig. Audio-Varianten lösen das Problem ebenfalls nicht für alle.
Besser sind Schutzmechanismen, die möglichst im Hintergrund arbeiten. Sie sollten echte Besucher nicht mit zusätzlichen Aufgaben belasten.
Nach der Einrichtung muss das Formular erneut getestet werden. Auch unsichtbare Schutzsysteme können dazu führen, dass Nachrichten nicht gesendet werden oder Fehlermeldungen unverständlich ausfallen.
Eine einfache Vorlage ist oft besser als ein kompliziertes Layout
Für ein gewöhnliches Kontaktformular braucht es keine besondere Inszenierung. Eine saubere Einspalten-Ansicht ist häufig die beste Lösung.
Oben steht eine kurze Erklärung. Danach folgen die Felder in logischer Reihenfolge. Pflichtangaben sind verständlich gekennzeichnet. Unter dem Nachrichtenfeld folgt die Datenschutzbestätigung und anschließend ein klar beschrifteter Button.
Ein solches Formular wirkt vielleicht weniger spektakulär als ein aufwendig animiertes Mehrschrittformular. Dafür versteht man es sofort.
Barrierefreiheit profitiert oft von Einfachheit. Je weniger ein Besucher überlegen muss, desto besser.
Contact Form 7 mit Divi, Elementor oder Gutenberg
Contact Form 7 lässt sich in unterschiedliche WordPress-Systeme einbinden. Das eigentliche Formular bleibt dabei grundsätzlich gleich. Die Darstellung wird aber häufig durch das Theme oder den verwendeten Page Builder beeinflusst.
Divi, Elementor und andere Builder verändern zum Beispiel Abstände, Farben, Feldhöhen oder Fokuszustände. Manchmal werden eigene CSS-Regeln ergänzt, die gut aussehen, aber wichtige Markierungen abschwächen.
Nach dem Einbau sollte deshalb nicht nur das Formular selbst geprüft werden. Auch das Zusammenspiel mit dem Seitendesign ist wichtig.
Besonders aufmerksam sollte man bei diesen Punkten sein:
- Farbkontrast der Feldbeschriftungen
- sichtbarer Fokus
- Darstellung der Fehlermeldungen
- Größe von Checkboxen
- mobile Abstände
- Buttonzustände
Ein technisch ordentlich aufgebautes Formular kann durch ungünstiges Design wieder schwer bedienbar werden.
Was automatische Prüfungen finden – und was nicht
Prüfwerkzeuge können einige typische Probleme erkennen. Sie melden zum Beispiel Felder ohne Beschriftung, zu schwache Kontraste oder unklare technische Strukturen.
Ob eine Fehlermeldung wirklich hilfreich klingt, kann ein automatisches Werkzeug jedoch kaum beurteilen. Auch eine schlechte Bedienreihenfolge oder eine leicht zu übersehende Erfolgsmeldung fällt nicht immer auf.
Deshalb gehören automatische Prüfung und echte Bedienung zusammen.
Ein Formular sollte mindestens mit Maus, Tastatur und Smartphone getestet werden. Ein zusätzlicher Screenreader-Test zeigt, ob die Beschriftungen und Rückmeldungen sinnvoll ausgegeben werden.
Macht Contact Form 7 eine Webseite BFSG-konform?
Ein gut aufgebautes Formular ist ein wichtiger Schritt. Die gesamte Webseite wird dadurch aber nicht automatisch BFSG-konform.
Navigation, Inhalte, Cookie-Banner, PDFs, Bilder, Links und andere Funktionen müssen ebenfalls betrachtet werden. Bei einem Shop oder einer Buchungsseite gehört der komplette Ablauf zur Prüfung.
Trotzdem sollte das Kontaktformular nicht unterschätzt werden. Für viele Unternehmensseiten ist es der wichtigste Weg zur Anfrage. Ist dieser Weg blockiert, kann ein Besucher die angebotene Leistung möglicherweise nicht nutzen.
Fazit: Ein gutes Formular erklärt sich selbst
Contact Form 7 bietet genügend Möglichkeiten, um verständliche und barrierearme Formulare zu erstellen. Das Plugin entscheidet aber nicht von allein, welche Beschriftung sinnvoll ist oder ob eine Fehlermeldung verständlich klingt.
Dauerhaft sichtbare Feldnamen, eine klare Kennzeichnung von Pflichtangaben und konkrete Rückmeldungen gehören zu den wichtigsten Grundlagen. Dazu kommen eine logische Reihenfolge, sichtbarer Tastaturfokus und eine saubere Darstellung auf mobilen Geräten.
Viele Verbesserungen wirken unscheinbar. Ein eindeutiger Buttontext, eine ausgeschriebene Pflichtangabe oder eine hilfreiche Fehlermeldung verändert das Design kaum.
Für die Bedienung kann genau dieses Detail entscheidend sein.
Ein gutes Kontaktformular zwingt niemanden, über seine Funktionsweise nachzudenken. Es führt verständlich durch die Eingabe, erklärt Fehler und bestätigt zuverlässig, dass die Nachricht angekommen ist.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.