Kontaktformulare, die tatsächlich ausgefüllt werden, und wie Sie sie gestalten
Wie Sie Kontakt- und Angebotsformulare mit weniger Feldern, klaren Beschriftungen und hilfreichen Fehlermeldungen gestalten, die alle nutzen können.
- Nº
- 21
- Veröffentlicht
- Lesezeit
- 9 Min.
- Kategorie
- Notes
- Geschrieben von
- Revylio
Kontaktformulare, die tatsächlich ausgefüllt werden: kurz, beschriftet, barrierefrei
Kontaktformulare, die tatsächlich ausgefüllt werden, fragen nur das Nötige ab und beschriften jedes Feld eindeutig. Sie zeigen verständliche Fehlermeldungen und funktionieren mit Tastatur, Spracheingabe und Screenreader. Zudem übergeben sie jede Anfrage zuverlässig an Ihr Team. Fehlt einer dieser Punkte, brechen Besucher ab oder die Anfrage geht unterwegs verloren.
Ein Kontaktformular ist ein Webformular, über das Besucher eine Anfrage direkt von Ihrer Website an Ihr Unternehmen senden. Das Angebotsformular ist eine Variante davon mit zusätzlichen Angaben zum gewünschten Auftrag. Das Formular-Tutorial der W3C-Initiative WAI nennt Formulare als gängigen Weg für Interaktion auf Websites. Beispiele sind Anmelden, Registrieren, Kommentieren und Kaufen.
Die WAI betont außerdem, dass dieselben Grundsätze für alle Formulare gelten. Es spielt keine Rolle, ob Ihr Formular im Browser oder auf dem Server verarbeitet wird. Die folgenden Abschnitte stützen sich auf dieses Tutorial und auf den Kurs Learn Forms von web.dev. Sie behandeln Felder, Beschriftungen, Eingabetypen, Fehlermeldungen, ein Beispiel und eine Checkliste.
Weniger Felder: Jede Angabe im Kontaktformular braucht einen Zweck
Jedes zusätzliche Feld im Kontaktformular ist ein Grund, abzubrechen. Laut WAI bevorzugen Nutzer in der Regel einfache und kurze Formulare. Werden irrelevante oder übermäßig viele Daten verlangt, brechen sie das Formular eher ab.
Prüfen Sie deshalb jedes Feld mit einer einzigen Frage: Brauchen wir diese Angabe, um die erste Antwort zu schreiben? Für eine einfache Anfrage reichen meist drei Dinge. Sie benötigen einen Namen, einen Kontaktweg und eine kurze Beschreibung des Anliegens. Alles Weitere klären Sie im ersten Gespräch.
Felder, die oft entbehrlich sind
Typische Kandidaten zum Streichen sind diese Felder:
- Anrede und Titel, wenn Sie sie für die Antwort nicht verwenden
- Postanschrift, solange kein Vor-Ort-Termin ansteht
- Firmengröße oder Umsatz bei einer ersten Kontaktaufnahme
- Eine zweite Eingabe der E-Mail-Adresse zur Bestätigung
Markieren Sie die verbleibenden freiwilligen Felder deutlich als optional. Weniger Felder haben einen zweiten Vorteil. Sie erheben weniger personenbezogene Daten, die Sie anschließend schützen und löschen müssen.
Beschriftungen mit label, zusammengehörige Felder mit fieldset und legend
Jedes Formularfeld braucht eine sichtbare Beschriftung, die technisch mit dem Feld verknüpft ist. Die WAI empfiehlt dafür das Element <label>. Nur in bestimmten Fällen kommen andere Mechanismen in Frage, etwa WAI-ARIA oder das Attribut title. WAI-ARIA ist ein Satz zusätzlicher HTML-Attribute, der Hilfstechnologien Bedeutung und Zustand von Elementen mitteilt.
Zusammengehörige Felder fassen Sie mit <fieldset> und <legend> zusammen. Das gilt etwa für eine Gruppe von Auswahlknöpfen zur gewünschten Leistung. Die Legende ist dann die Frage, die über der Gruppe steht.
Wem saubere Beschriftungen helfen
Die WAI nennt drei Gruppen, die besonders profitieren:
- Menschen mit Spracheingabe aktivieren Felder per Sprachbefehl über die Beschriftung und springen so direkt ins richtige Feld.
- Menschen mit eingeschränkter Feinmotorik profitieren von großen Klickflächen, die die Beschriftung einschließen, vor allem bei Auswahlknöpfen und Kontrollkästchen.
- Menschen mit Screenreader erkennen und verstehen Felder leichter, wenn sie mit Beschriftungen, Feldgruppen und anderer Struktur verknüpft sind.
Die WAI fasst es so zusammen: Barrierefreie Formulare sind für alle leichter zu bedienen, auch für Menschen mit Behinderungen.
Eingabetypen und automatisches Ausfüllen sparen Tipparbeit auf dem Smartphone
Passende Formularattribute verkürzen die Eingabe spürbar, vor allem auf dem Smartphone. Der Kurs Learn Forms von web.dev erklärt, wie Attribute das Layout der Bildschirmtastatur verändern. Für ein Telefonfeld erscheint so eine Zifferntastatur statt der vollen Buchstabentastatur. Dieselben Attribute aktivieren außerdem die im Browser eingebaute Prüfung der Eingaben.
Automatisches Ausfüllen mit dem Attribut autocomplete
Browser können Name, E-Mail-Adresse und Telefonnummer aus gespeicherten Angaben selbst eintragen. web.dev widmet diesem automatischen Ausfüllen und dem Attribut autocomplete ein eigenes Kapitel. Ist das Attribut korrekt gesetzt, füllt der Besucher die Kontaktfelder mit einem Fingertipp. Das spart Zeit und verringert Tippfehler in der E-Mail-Adresse, an der Ihre Antwort sonst scheitert.
Internationale Formate einplanen
Wenn Sie auch Anfragen aus dem Ausland erhalten, darf das Formular keine Formate erzwingen, die nur in Deutschland üblich sind. web.dev rät, sich auf internationale Datenformate vorzubereiten und Formulare von Anfang an für die Lokalisierung zu planen. Ein Telefonfeld, das nur deutsche Nummern annimmt, weist sonst einen Teil Ihrer Interessenten ab.
Fehlermeldungen und Prüfung der Eingaben: früh, konkret und ohne Zeitlimit
Gute Fehlermeldungen sagen, welches Feld betroffen ist und wie der Besucher den Fehler behebt. Eine Meldung wie "Ungültige Eingabe" hilft niemandem weiter. Besser ist eine Meldung wie "Bitte geben Sie eine E-Mail-Adresse mit @ ein". Die Meldung steht direkt am Feld und bleibt sichtbar, bis der Fehler behoben ist.
web.dev behandelt die Prüfung der Eingaben im Browser in einem eigenen Kapitel mit dem Ziel, Nutzern bei der richtigen Eingabe zu helfen. Die eingebaute Prüfung des Browsers ist ein guter Anfang. Sie ersetzt aber keine durchdachte Formulierung der Meldungen.
Kein Zeitdruck beim Ausfüllen
Ein Kontaktformular sollte nach Möglichkeit kein Zeitlimit haben. Die WAI empfiehlt: Ist ein Zeitlimit etwa aus Sicherheitsgründen nötig, muss der Nutzer es abschalten oder verlängern können. Ausgenommen sind laut WAI Live-Ereignisse wie Auktionen oder Spiele. Ebenso ausgenommen sind Fälle, in denen die Bearbeitungszeit für eine gültige Übermittlung wesentlich ist. Für eine Anfrage an einen Betrieb trifft keine dieser Ausnahmen zu.
Wer langsam tippt, Hilfstechnologie nutzt oder zwischendurch einen Anruf annimmt, darf seine Eingaben nicht verlieren.
Lange Angebotsformulare in logische Schritte mit Fortschrittsanzeige teilen
Ein Angebotsformular mit vielen Angaben wirkt kürzer, wenn Sie es in Schritte aufteilen. Die WAI empfiehlt, lange Formulare in mehrere kleinere Formulare zu gliedern. Diese bilden eine Folge logischer Schritte, und der Nutzer erfährt jeweils, wie weit er ist.
Eine sinnvolle Gliederung folgt der Reihenfolge, in der Ihr Team die Anfrage bearbeitet. Für viele Dienstleister bieten sich drei Schritte an:
- Was wird benötigt: Auswahl der Leistung
- Worum geht es genau: Umfang, Ort, gewünschter Zeitraum
- Wie erreichen wir Sie: Name und Kontaktweg
Zeigen Sie über dem Formular an, in welchem Schritt sich der Besucher befindet, etwa "Schritt 2 von 3". Erlauben Sie den Weg zurück, ohne dass bereits eingegebene Daten verloren gehen.
Stellen Sie die Kontaktdaten möglichst ans Ende. Wer zuerst sein Anliegen beschreibt, hat bereits investiert und schließt die letzten Felder eher ab. Ein kurzes Kontaktformular mit drei oder vier Feldern braucht dagegen keine Schritte. Dort würde die Aufteilung nur zusätzliche Klicks erzeugen.
Beispiel: Angebotsformular eines Malerbetriebs Feld für Feld aufgebaut
Das folgende Beispiel zeigt ein Angebotsformular für einen fiktiven Malerbetrieb, aufgebaut nach den Empfehlungen von WAI und web.dev. Es hat sechs Felder, davon vier Pflichtfelder. Jede Zeile nennt die sichtbare Beschriftung und die technische Einstellung dahinter.
| Feld | Beschriftung | Pflicht | Technische Einstellung |
|---|---|---|---|
| Leistung | Welche Arbeiten benötigen Sie? | ja | Auswahlknöpfe in <fieldset>, Frage als <legend>, Klickfläche inklusive Beschriftung |
| Ort | Postleitzahl des Objekts | ja | <label>, Zifferntastatur, internationale Formate zulassen |
| Beschreibung | Was sollen wir wissen? (optional) | nein | mehrzeiliges Feld mit <label> |
| Name | Ihr Name | ja | <label>, autocomplete für den Namen |
| E-Mail-Adresse | ja | E-Mail-Tastatur, autocomplete, eingebaute Prüfung | |
| Telefon | Telefon für Rückfragen (optional) | nein | Zifferntastatur, autocomplete |
Das Beispiel verzichtet bewusst auf Anrede, Anschrift und Firmengröße. Die Adresse fragt der Betrieb erst ab, wenn ein Besichtigungstermin feststeht. Der Absendeknopf trägt eine eindeutige Beschriftung wie "Angebot anfragen". Nach dem Absenden bestätigt eine Meldung den Eingang und nennt, wann der Besucher mit einer Antwort rechnen kann.
Checkliste für Kontaktformulare: neun Prüfpunkte mit Prüfmethode
Mit dieser Checkliste prüfen Sie ein bestehendes Kontaktformular in etwa einer Viertelstunde selbst. Die rechte Spalte zeigt, wer vom jeweiligen Punkt besonders profitiert.
| Prüfpunkt | So prüfen Sie es | Wem es besonders hilft |
|---|---|---|
| Nur notwendige Felder | Für jedes Feld begründen, wofür die erste Antwort es braucht | allen Besuchern |
| Beschriftung verknüpft | Auf die Beschriftung klicken: Der Cursor muss ins Feld springen | Spracheingabe, Feinmotorik |
| Gruppen ausgezeichnet | Auswahlknöpfe stehen in <fieldset> mit <legend> | Screenreader |
| Passende Tastatur | Formular auf dem Smartphone öffnen, Telefon- und E-Mail-Feld antippen | Mobilnutzer |
| Automatisches Ausfüllen | Browser bietet Name und E-Mail zum Eintragen an | Mobilnutzer, alle Wiederkehrenden |
| Verständliche Fehler | Absichtlich falsch ausfüllen und Meldungen lesen | allen Besuchern |
| Kein Zeitlimit | Formular zehn Minuten offen lassen, dann absenden | Hilfstechnologie, langsam Tippende |
| Tastaturbedienung | Nur mit Tabulator und Eingabetaste ausfüllen und absenden | Tastatur- und Screenreader-Nutzer |
| Anfrage kommt an | Testanfrage senden und Eingang im Zielsystem prüfen | Ihrem Vertrieb |
Jeder nicht bestandene Punkt ist ein konkreter Auftrag für Ihre Webentwicklung, ohne dass Sie das ganze Formular neu bauen müssen.
Kontaktformulare in Deutschland: Datenschutzhinweise und Bestellbutton richtig einordnen
Ein Kontaktformular in Deutschland braucht neben guter Bedienbarkeit klare Datenschutzhinweise. Wie konkret solche Hinweise aussehen können, zeigt eine Einwilligungserklärung zur Online-Abmeldung einer Wohnung. Das Formular läuft über die Formularplattform von Form-Solutions. Die Erklärung nennt, dass Daten nach 180 Tagen automatisch gelöscht werden, sofern sie nicht weiter benötigt werden. Außerdem kann der Nutzer seine Einwilligung postalisch, per E-Mail oder per Fax widerrufen.
Die 180 Tage sind die Frist dieses einen Formulars und keine allgemeine Vorgabe. Das Beispiel zeigt aber, welche Fragen ein Besucher beantwortet haben möchte: wie lange Sie Daten aufbewahren und wie er seine Einwilligung zurücknimmt. Welche Hinweise, Einwilligungen und Löschfristen Ihr eigenes Formular braucht, behandelt unser Beitrag zur DSGVO auf der Firmenwebsite ausführlich.
Wann aus einer Anfrage eine Bestellung wird
Ein Angebotsformular ist keine Bestellung, und diese Grenze sollte im Formular klar bleiben. Schließt ein Formular dagegen einen kostenpflichtigen Vertrag ab, gilt eine eigene Regel. Laut Verbraucherzentrale Schleswig-Holstein müssen Online-Verträge mit einem Button "zahlungspflichtig bestellen" oder einem anderen eindeutigen Wortlaut abgeschlossen werden. Beschriften Sie den Absendeknopf einer reinen Anfrage deshalb so, dass niemand eine Bestellung vermutet.
Jede Anfrage ankommen lassen: Übergabe, Sicherheit und Tests auf allen Geräten
Ein Kontaktformular ist erst fertig, wenn jede abgeschickte Anfrage beim richtigen Empfänger ankommt. Das kann ein Sammelpostfach sein oder das CRM-System Ihres Vertriebs. Bei Svennis senden wir nach jedem Relaunch über jedes Formular eine Testanfrage und prüfen, ob sie vollständig im Zielsystem ankommt. Dabei fallen immer wieder Formulare auf, deren Empfängeradresse beim Umzug der Website niemand nachgetragen hat.
web.dev behandelt im Kurs Learn Forms auch, wie Sie Formulare absichern und die Daten Ihrer Nutzer privat halten. Ein Formular, das Anfragen ungeschützt überträgt oder offen speichert, gefährdet das Vertrauen, das Sie mit guter Gestaltung aufgebaut haben.
Mit echten Geräten und echten Menschen testen
Testen Sie das Formular auf verschiedenen Geräten, Browsern und Plattformen. web.dev empfiehlt ausdrücklich, Formulare auch in unterschiedlichen Nutzungssituationen zu prüfen. Ein Formular, das am Schreibtisch funktioniert, kann unterwegs auf einem kleinen Bildschirm scheitern.
Ergänzen Sie die technische Prüfung durch einen kurzen Nutzertest. Bitten Sie zwei oder drei Personen außerhalb Ihres Teams, eine Anfrage abzuschicken, und beobachten Sie, wo sie zögern. web.dev widmet solchen Usability-Tests, also Tests der Bedienbarkeit mit echten Nutzern, ein eigenes Kapitel.
Nächste Schritte: Kontaktformular prüfen, kürzen und Übergabe testen
Beginnen Sie mit dem Formular, über das die meisten Anfragen kommen sollen. Für die Prüfung brauchen Sie kein Werkzeug, nur einen Rechner und ein Smartphone. Gehen Sie in dieser Reihenfolge vor:
- Zählen Sie die Felder und streichen Sie jedes, das Sie für die erste Antwort nicht brauchen.
- Klicken Sie auf jede Beschriftung und prüfen Sie, ob der Cursor ins zugehörige Feld springt.
- Füllen Sie das Formular nur mit der Tastatur aus und schicken Sie es ab.
- Öffnen Sie es auf dem Smartphone und achten Sie auf Tastatur und automatisches Ausfüllen.
- Füllen Sie es absichtlich falsch aus und lesen Sie die Fehlermeldungen.
- Senden Sie eine Testanfrage und prüfen Sie, wo sie ankommt.
Sitzt Ihr Formular auf einer Seite für bezahlte Anzeigen, gelten zusätzliche Anforderungen an Ladezeit und Messung. Diese beschreibt unser Beitrag zu Landingpages für Google Ads, schnell, barrierefrei und DSGVO-konform gemessen. Soll die Seite mit dem Formular auch in KI-Suchergebnissen erscheinen, lesen Sie unseren Leitfaden, was Ihre Website technisch braucht, um in Google AI Overviews zitiert zu werden.