Formulare verbessern: 10 + 1 Tipps, die sofort helfen

Jedes zusätzliche Eingabefeld erhöht das Risiko, dass Nutzer und Nutzerinnen das Formular abbrechen.

Tipp: Überlege dir bei jedem Feld. Brauche ich diese Information wirklich jetzt oder reicht sie später?

Gut: Nur die E-Mail-Adresse für den Newsletter

Schlecht: Vorname, Nachname, Telefonnummer, Interessen für den Newsletter

Optionales besser kennzeichnen: Statt jedes Feld mit „Pflichtfeld“ zu markieren, kennzeichne lieber optionale Felder explizit etwa mit „Telefonnummer (optional)“. Das schafft Klarheit und lenkt nicht unnötig ab.

Natürlich hängt der Umfang des Formulars auch vom Ziel ab. Wenn mehr Informationen nötig sind, dann gilt: So viel wie nötig, so wenig wie möglich.

So machst du’s richtig:

• Kontraste nicht vergessen:

  Achte darauf, dass das Label ausreichend Kontrast zum Hintergrund hat (mindestens 4.5:1 laut WCAG).
• Verwende das HTML-Element
  und verknüpfe es über das for-Attribut mit dem jeweiligen Eingabefeld (id).
 Beispiel:

 E-Mail-Adresse
• Positioniere das Label oberhalb oder links vom Feld.

  Oberhalb funktioniert besonders gut auf mobilen Geräten.
• Verwende klare, verständliche Sprache.

  Statt „Kontaktinformation“ besser: „E-Mail-Adresse“ oder „Telefonnummer“.
• Beschrifte auch Buttons sinnvoll.

  „Absenden“ ist besser als ein leerer Button oder „Klick hier“.

Gut: Sichtbare Labels über dem Eingabefeld

Schlecht: Nur ein grauer Platzhalter im Feld

Vermeide diese häufigen Fehler:

• Nur Platzhalter (Placeholder) statt Label:

  Platzhalter verschwinden beim Eintippen und sind oft schlecht lesbar. Sie werden von Screenreadern häufig ignoriert und führen zu unnötigen Fehlern.
• Labels, die nicht sichtbar sind:

  Labels sollten auch für sehende Nutzer*innen sichtbar sein – nur visuell versteckte Labels (.sr-only) sollten gut begründet eingesetzt werden (z. B. in komplexen UI-Situationen).
• Nicht beschriftete Pflichtfelder:

  Schreibe z. B. „E-Mail-Adresse (Pflichtfeld)“ oder besser: „Telefonnummer (optional)“, statt mit einem Sternchen (*) zu arbeiten, das für viele Screenreader keine Bedeutung hat.

Bonus-Tipps für Barrierefreiheit & Usability:

• ARIA-Labels nur ergänzend nutzen:

  Verwende aria-label oder aria-labelledby nur dann, wenn keine visuellen Labels möglich sind – z. B. bei Icon-Buttons.
• Labels für Checkboxen und Radiobuttons klickbar machen:

  Dadurch wird die Bedienung einfacher – auch für motorisch eingeschränkte Nutzer*innen.
• Nicht mehrere Felder mit demselben Label beschriften.

  Doppelte IDs oder Labels sorgen bei Screenreadern für Verwirrung.

Ordne die Formularfelder so an, wie Menschen Informationen typischerweise im Kopf strukturieren .

Zum Beispiel:
Name → E-Mail-Adresse → Nachricht

Das reduziert kognitive Belastung und sorgt dafür, dass sich das Formular natürlich und nachvollziehbar anfühlt.

Tipp: Vermeide Sprünge. Ungewöhnliche Reihenfolgen (z. B. erst „Nachricht“, dann „Name“) verwirren besonders auf mobilen Geräten oder mit assistiven Technologien.

Felder, die zusammengehören, solltest du auch als Einheit kennzeichnen

• Nutze visuelle Nähe (z. B. geringerer Abstand zwischen Vor- und Nachname).
• Verwende HTML-Elemente wie und , um die Gruppe semantisch und barrierefrei zu markieren.
• Eine sinnvolle Legende hilft zusätzlich beim Verständnis: „Dein voller Name“ statt einfach nur „Name“.

Weitere Tipps:

• Vermeide doppelte Felder, z. B. für „E-Mail bestätigen“, sofern nicht zwingend nötig.
• Reagiere auf Kulturkontexte: In internationalen Formularen kann ein einzelnes „Name“-Feld inklusiver sein als eine starre Aufteilung in „Vorname“ und „Nachname“.
• Verwende Tabs oder visuelle Abschnitte bei komplexeren Formularen, um thematische Gruppen (z. B. „Persönliche Daten“, „Lieferadresse“) klar zu trennen.
• Screenreader profitieren enorm von semantischer Struktur – durch oder ARIA-Gruppierung wissen sie, dass mehrere Felder zusammengehören.

Warum einspaltig besser ist:

• Bessere Lesbarkeit & Scannbarkeit

  Menschen lesen auf Bildschirmen meist von oben nach unten, nicht quer. Einspaltige Layouts unterstützen diesen natürlichen Lesefluss.
• Klarer Fokus für Screenreader & Tastatur-Nutzer*innen

  Bei mehrspaltigen Layouts kann die Reihenfolge der Eingabefelder verwirrend sein – vor allem, wenn das HTML nicht der visuellen Reihenfolge entspricht. Das stört z. B. Screenreader und Tab-Navigation.
• Weniger kognitive Belastung

  Einspaltige Layouts wirken übersichtlicher, was besonders Nutzer*innen mit kognitiven Einschränkungen oder ADHS hilft.
• Bessere mobile Darstellung

  Spalten müssen auf kleinen Bildschirmen sowieso gestapelt werden. Wer direkt einspaltig denkt, vermeidet Medienbruch und gestückelte Layouts.

Wenn du ein zweispaltiges Layout nutzen willst:

• Vermeide unnötige visuelle Unruhe
  
Zwei Spalten mit sehr unterschiedlichen Feldlängen (z. B. „E-Mail“ links und „Nachricht“ rechts) sehen nicht nur unausgewogen aus, sondern verwirren auch viele Nutzer*innen.
• Achte auf die logische Reihenfolge im Code

  Das HTML muss die natürliche Tab-Reihenfolge (von oben nach unten, von links nach rechts) korrekt abbilden.
• Teste auf mobilen Geräten

  Stelle sicher, dass die Spalten auf kleinen Displays korrekt gestapelt werden und dabei nicht die Reihenfolge verlieren.
• Halte Gruppen zusammen

  Wenn du z. B. Vorname / Nachname nebeneinander zeigen willst, verwende eine fieldset-Gruppe mit legend, damit assistive Technologien die Beziehung erkennen.

Beispiele für sinnvolle Input-Typen:

• type="email" → Zeigt ein E-Mail-freundliches Keyboard (@, .)
• type="tel" → Zeigt Nummernblock, ideal für Telefonnummern (aber ohne Validierung!)
• type="number" → Zeigt Nummernblock und erlaubt nur Ziffern
• type="date" → Aktiviert geräteabhängige Datumsauswahl (Kalender)
• type="url" → Öffnet Tastatur mit / und .

Vorteile:

• Weniger Tippaufwand auf dem Smartphone
• Höhere Genauigkeit bei Eingaben
• Besseres Nutzererlebnis durch native Unterstützung
• Barrierefreiheits-Plus: Viele Assistenzsysteme erkennen automatisch, was eingegeben werden soll.

Wichtig zu wissen:

• type="number" ist nicht barrierefrei, wenn du damit z. B. Telefonnummern oder Postleitzahlen abfragst. Warum?
→ Screenreader lesen z. B. „+49 30“ oft falsch vor. Für Telefonnummern besser type="tel" verwenden.
• Immer label-Elemente verwenden – Input-Typen ersetzen keine klaren Beschriftungen!
• Auch bei type="date" oder type="time" solltest du ein fallback-fähiges Format und ggf. ein Pattern angeben – nicht alle Browser oder Screenreader unterstützen diese Eingabetypen zuverlässig.

Bonus-Tipp: Autocomplete nutzen

Wenn du zusätzlich autocomplete richtig einsetzt (z. B. autocomplete=“email“), können Browser oder Passwort-Manager Felder automatisch ausfüllen – ein echtes Plus an Komfort.

Beispiele:

• autocomplete="email"
• autocomplete="tel"
• autocomplete="postal-code"
• autocomplete="given-name" / family-name

Gute Fehlermeldungen sind:

• Klar und hilfreich: „Bitte gib eine gültige E-Mail-Adresse ein.“
• Kontextbezogen: Die Meldung steht beim jeweiligen Feld, nicht gesammelt oben oder unten.
• Visuell deutlich markiert: z. B. roter Rahmen + Warnsymbol + Text.

Vermeide:

• Technische Fehlercodes („Fehler 204“ oder „Validierung fehlgeschlagen“)
• Nur farbliche Hinweise (z. B. rote Felder ohne Text) – das ist nicht barrierefrei!

Mehr als Farbe verwenden

Kombiniere visuelle Hinweise wie:

• rote Umrandung
• Warnsymbole (mit role="img" und Alt-Text)
• Textbeschreibung, z. B. „Dieses Feld darf nicht leer sein“

Screenreader unterstützen

• Nutze aria-live-Regionen für dynamisch eingeblendete Fehlermeldungen:

Feld mit Fehler verknüpfen

• Verwende das aria-describedby-Attribut, um ein Eingabefeld mit der Fehlermeldung zu verbinden:

Validierung: Client + Server

• Clientseitige Validierung (JS/HTML5): Schnell, aber nicht manipulationssicher
• Serverseitige Validierung: Immer zusätzlich nötig (Datensicherheit!)
• Wichtig: Beide Wege sollten ähnlich hilfreiche Fehlermeldungen liefern

Bonus-Tipps:

Bei mehrseitigen Formularen: Fehler nicht erst auf der letzten Seite anzeigen.
Vermeide es, alle Fehler auf einmal zu zeigen – das kann überfordern.


→ Lieber Schritt für Schritt, direkt beim jeweiligen Feld.

Vorteile:

• Weniger Tippaufwand – gerade mobil
• Schnellere Formularabwicklung
• Hilfreich bei eingeschränkter Motorik oder Sehkraft
• Reduziert Abbrüche bei komplexeren Formularen

Best Practices für autocomplete

Korrekte Werte verwenden

Die autocomplete-Werte folgen einem festgelegten Standard (nicht frei wählbar!)
Beispiele:

• Vorname: autocomplete="given-name"
• Nachname: autocomplete="family-name"
• E-Mail-Adresse: autocomplete="email"
• Telefonnummer: autocomplete="tel"
• Straße: autocomplete="address-line1"
• PLZ: autocomplete="postal-code"
• Stadt: autocomplete="address-level2"
• Land: autocomplete="country"
• Kreditkartennummer: autocomplete="cc-number"
• Passwort: autocomplete="new-password" / current-password

→ Komplette Liste der möglichen Werte (MDN)

Feldnamen und Labels verständlich halten

Damit der Browser Felder korrekt erkennt, sollten:

• Labels klar und eindeutig sein ( label for="email")
• Keine Platzhalter (placeholder) statt Labels verwendet werden
• Keine verschachtelten Strukturen oder JavaScript-only-Formulare verwendet werden

Formularstruktur einhalten

• Verwende ein form-Element
• Nutze logische Reihenfolge der Felder
• Vermeide JavaScript-generierte Feldnamen ohne Bedeutung (z. B. input_123abc)

Sicherheit: autocomplete bei sensiblen Daten

• Bei Passwörtern: autocomplete="new-password" oder autocomplete="current-password"
• Bei sensiblen Feldern (z. B. TAN, PIN): Ggf. autocomplete="off" – aber nur, wenn wirklich nötig
• Achtung: autocomplete="off" verhindert Barrierefreiheit und Komfort, nicht inflationär einsetzen!

Mobile Nutzer und Nutzerinnen profitieren besonders

• Autofill reduziert die Anzahl an benötigten Taps
• Autocomplete öffnet passende Tastaturen (in Kombination mit type="email", type="tel", etc.)
• Geringerer Frust auf kleinen Displays

Teste dein Formular auf Autofill-Fähigkeit

Tipp: Nutze in Chrome die Entwicklertools (DevTools > Application > Autofill) oder den Testnutzer mit gespeicherten Daten.

→ Mehr zu Autofill bei Developer Chrome

Was einen guten CTA ausmacht

Eindeutig:


Sag den Nutzern und Nutzerinnen genau, was passiert. Keine generischen Begriffe wie „Absenden“ oder „OK“

• Besser:
  • „Jetzt kostenlos registrieren“
  • „Newsletter abonnieren“
  • „Angebot anfordern“
  • „Zugang sichern“
  • „Termin buchen“
  • „E-Mail mit Link erhalten“

Aktionsorientiert & motivierend:


Beginne mit einem Verb, idealerweise mit einem klaren Nutzen.

• z. B. „Jetzt starten“, „Sparen Sie 10 %“, „Gratis testen“

Kontextbezogen:


CTA sollte sich auf den Inhalt des Formulars beziehen – keine 08/15-Texte.

UX-Optimierung für mobile und Touch-Bedienung

• Genügend Größe: Mindestens 44 x 44 px laut WCAG (Web Content Accessibility Guidelines)
• Guter Kontrast: Textfarbe und Button-Hintergrund müssen sich klar abheben (mindestens Kontrastverhältnis 4.5:1)
• Klickbereich groß genug – nicht nur Text klickbar machen, sondern den gesamten Button

Platzierung & Layout

• Button immer am Ende des Formulars (logisch erreichbar)
• Bei längeren Formularen: ggf. sticky Button-Leiste unten einbauen
• Nur einen primären CTA anzeigen bei mehreren Optionen (z. B. „Zurück“ oder „Abbrechen“) deutlich unterscheiden

Barrierefreiheit nicht vergessen

• Verständlicher Text statt Icons: Nicht nur ein Pfeil oder „✓“
• Nutzbar per Tastatur (Tab-Fokus, Enter-Trigger)
• Screenreader-freundlich: Eindeutiges aria-label, falls der visuelle Text nicht selbsterklärend ist

Bonus: Mikro-Feedback nach dem Klick

• Erfolgsmeldung klar anzeigen („Vielen Dank – Ihre Anmeldung war erfolgreich“)
• Zeige Ladezustand („Wird gesendet…“)
• Vermeide Mehrfach-Submits (durch „disabled“-State oder Spinner)

Multistep-Formulare (mehrstufige Formulare) helfen, große Datenmengen in verdauliche Abschnitte zu gliedern.
Sie wirken weniger überwältigend, steigern die Motivation und senken Abbruchraten – besonders bei komplexen Prozessen wie:

• Bewerbungen
• Online-Bestellungen oder Checkouts
• Anträge oder Verträge
• Projektanfragen oder Onboardings

Klarer Fortschrittsindikator

• Textlich: z. B. „Schritt 2 von 4“
• Visuell: Fortschrittsbalken oder nummerierte Schritte
  • Schritt 1 – Persönliche Daten
  • Schritt 2 – Projektbeschreibung
  • Schritt 3 – Budget
  • Schritt 4 – Bestätigung

Konsistente Platzierung

• Fortschrittsanzeige immer oberhalb des Formularbereichs (über der Überschrift)
• Sticky-Leiste bei mobilen Geräten kann helfen, auch beim Scrollen die Orientierung zu behalten

Sinnvolle Aufteilung

• Logische Gruppierung der Inhalte: thematisch zusammenfassen (nicht künstlich aufsplitten!)
• Jeder Schritt sollte in max. 1–2 Minuten ausfüllbar sein

UX & Interaktionsdesign

• Zurück-Schritte ermöglichen ohne Datenverlust
• Auto-Speicherung oder Zwischenspeicherung anbieten (vor allem bei längeren Formularen)
• Schritt-Navigation klickbar machen, wenn technisch sinnvoll – oder bewusst deaktivieren, um die lineare Reihenfolge zu bewahren

Barrierefreiheit

• Fortschrittsanzeige auch semantisch auszeichnen (aria-current=“step“, role=“progressbar“)
• Screenreaderfreundliche Beschriftungen, z. B.:
  • aria-label="Fortschritt: Schritt 2 von 4 – Projektbeschreibung"

Grundregeln für barrierefreie Formulare

• Labels korrekt verknüpfen

  Verwende <label for=".."> , damit Screenreader Felder eindeutig zuordnen können.
• Sinnvolle Tab-Reihenfolge

  Teste, ob das Formular logisch mit der Tabulator-Taste bedienbar ist.
• Fehlermeldungen sofort anzeigen und zugänglich machen
  • Nicht nur mit Farbe arbeiten (z. B. zusätzlich Symbol, erklärender Text, Umrandung)
  • ARIA live regions (aria-live="assertive") für Screenreader verwenden
• Ausreichende Farbkontraste sicherstellen
  • Mindestkontrast nach WCAG: 4.5:1 für Text, 3:1 für große Schriften
  • Testtools wie der Color Contrast Checker (z. B. von WebAIM oder WAVE)

Proaktive Fehlervermeidung statt reaktiver Fehlermeldungen

Gute Formulare vermeiden Fehler, bevor sie entstehen:

• Hilfetexte direkt im oder neben dem Feld: „Bitte E-Mail-Adresse im Format name@domain.de“
• Visuelle Hinweise oder Formatvorgaben schon beim Ausfüllen
• HTML5-Input-Typen (type="email", type="date") für passende Tastatur und automatische Validierung

Besondere Hinweise für längere oder sensible Formulare

Gerade bei Formularen mit hoher Relevanz oder vielen Schritten (z. B. Verträge, Bewerbungen, Bestellungen):

• Zusammenfassung vor dem Absenden

  Zeige am Ende eine Übersicht aller Eingaben – das gibt Sicherheit, reduziert Fehler und ermöglicht Korrekturen.
• Multistep-Struktur mit Fortschrittsanzeige

  „Schritt 3 von 4 – Adresse“ + visuelle Orientierung helfen bei der Navigation, auch für Menschen mit kognitiven Einschränkungen
• Buttons klar beschriften & ausreichend groß gestalten
  
Guter Kontrast, eindeutige Bezeichnung (z. B. „Jetzt kostenlos registrieren“ statt nur „Absenden“)
• Autofill & Autocomplete aktivieren

  Unterstützt Nutzer*innen mit motorischen Einschränkungen oder kognitiver Belastung

Formulare verlangen oft sensible Informationen – das kann Nutzer*innen verunsichern oder vom Ausfüllen abhalten. Transparenz schafft Vertrauen und senkt die Hürde zur Conversion.

Tipp: Kommuniziere den Zweck der Daten klar und menschlich. Statt juristischer Texte: kurz, ehrlich und verständlich.

• Gut:

  „Wir nutzen deine Telefonnummer nur, falls es Rückfragen zu deiner Bestellung gibt. Kein Spam – versprochen.“
• Schlecht:

  „Die Telefonnummer wird im Rahmen des Artikel-14-Datenschutzkonformitätsverfahrens gespeichert.“

Weitere Tipps zur Vertrauensbildung

• Zeige deine Datenschutzrichtlinie verlinkt direkt am Formular – ideal mit kurzer Erklärung:
  
„Mehr Infos in unserer [Datenschutzerklärung].“
• Verwende Gütesiegel oder Hinweise auf DSGVO-Konformität, z. B. „DSGVO-konform“, „Hosting in Deutschland“ (aber nur, wenn zutreffend!)
• Vermeide Pflichtfelder ohne ersichtlichen Grund – Nutzer*innen empfinden das oft als unnötig invasiv.
• Gib Hinweise zu Aufbewahrungsdauer oder Speicherort bei besonders sensiblen Daten.

Warum das wichtig ist

Transparente Kommunikation

• erhöht die Ausfüllrate (Conversion)
• verringert Abbrüche
• stärkt deine Marke und Kundenbindung
• und ist rechtlich abgesichert (DSGVO Art. 13: Informationspflicht)