Webformulare, die Menschen wirklich absenden

Ein Formular ist die Stelle, an der Besucher aufhören zu lesen und anfangen zu handeln: sich für die Konferenz anmelden, eine Mitgliedschaft verlängern, Fördermittel beantragen, eine Frage stellen.

Jeder dieser Besucher hat sich bereits zum Handeln entschieden. Wenn er die Seite verlässt, ohne abzusenden, hat ihn das Formular davon abgebracht.

Dieser Leitfaden geht die Entscheidungen durch, die den Unterschied machen, in der Reihenfolge, in der Besucher ihnen begegnen. Jeder Abschnitt hat ein funktionierendes Beispiel, in das Sie tippen können. Die Beispiele laufen in Ihrem Browser und senden nichts, und jedes Muster hier läuft auch in den Formularen dieser Website.

Warum das jetzt ein einziger Leitfaden ist. Er begann als achtteilige Serie. Wir haben ihn auf einer Seite mit Live-Beispielen zusammengeführt, denn über ein Formular lernt man mehr, wenn man eines ausfüllt, als wenn man darüber liest.

Es ist der erste unserer Artikel, der so überarbeitet wurde. Wir gehen alles durch, was wir veröffentlicht haben, um es kürzer, leichter zu überfliegen und praktischer zu machen.

Möchten Sie zuerst die Fehler sehen? Die fehlerhaften Versionen enthalten Live-Formulare, die absichtlich scheitern.

Jedes Feld braucht eine sichtbare Beschriftung

Eine Beschriftung steht außerhalb des Feldes und bleibt dort. Ein Platzhalter steht im Feld und verschwindet, sobald jemand tippt.

Formulare, die Platzhalter als Beschriftungen verwenden, wirken im Entwurf ruhig, und nur dort sieht sie jemand leer. Sobald sie ausgefüllt sind, sind die Fragen verschwunden:

• Wer seine Antworten vor dem Absenden prüft, hat nichts, womit er sie vergleichen kann.
• Wer von einem Anruf unterbrochen wird, kehrt zu Feldern zurück, die nicht mehr sagen, was sie sind.
• Das automatische Ausfüllen füllt alle Felder auf einmal, und das Prüfen wird zur ganzen Aufgabe der Besucher. Probieren Sie es im Beispiel unten aus: Die Beschriftungen bleiben, also genügt ein Blick.

Platzhalter haben weiterhin eine Aufgabe: das Format einer Antwort zeigen. Die Beschriftung fragt „Telefonnummer“, und der Platzhalter zeigt (555) 012-3456. Wenn das Beispiel verschwindet, brauchen die Besucher es nicht mehr.

Für Menschen, die einen Screenreader nutzen, wird eine Beschriftung, die im Markup mit ihrem Feld verknüpft ist, angesagt, sobald das Feld den Fokus erhält. Ob ein Platzhalter angesagt wird, ist unterschiedlich, und er war nie als Name eines Feldes gedacht.

Für öffentliche Stellen und öffentliche Einrichtungen ist eine sichtbare Beschriftung außerdem eine Anforderung des Barrierefreiheitsstandards, an den sie gebunden sind, und wer Angebote in der Beschaffung prüft, achtet darauf.

Verlassen Sie sich nicht darauf, dass ein automatisches Prüfwerkzeug diesen Fehler findet. Die Regeln, die die meisten Werkzeuge anwenden, akzeptieren einen Platzhalter als Namen eines Feldes, sodass ein Formular nur mit Platzhaltern den Scan bestehen kann. Wir haben es geprüft: Die fehlerhafte Version dieses Formulars besteht dieselben automatischen Regeln, an denen ihr Auswahlmenü und ihre Senden-Schaltfläche scheitern.

Schwebende Beschriftungen, sorgfältig gebaut

Eine schwebende Beschriftung beginnt im Feld, wo sonst ein Platzhalter stünde. Sie wandert über das Feld, wenn Besucher es fokussieren oder eine Antwort eingeben.

Sie spart in einem langen Formular eine Zeile Höhe, und sie lässt sich gut umsetzen. Gut umgesetzt heißt dreierlei:

• Sie ist eine echte Beschriftung, mit dem Feld verknüpft, und wird daher wie jede andere angesagt.
• Sie bleibt in beiden Positionen lesbar, mit vollem Kontrast, nie zum Grau eines Platzhalters verblasst.
• Sie weicht aus, bevor der Text der Besucher mit ihr kollidieren kann.

Die meisten schwebenden Beschriftungen entscheiden mit einer einzigen Frage, ob sie schweben: Ist das Feld leer? Der übliche CSS-Trick prüft, ob der Platzhalter angezeigt wird.

Diese Frage bekommt die falsche Antwort, sobald eine Eingabemaske im Spiel ist.

Wenn eine Eingabemaske das Feld füllt

Eine Eingabemaske formatiert eine Antwort während der Eingabe: Aus einer Telefonnummer wird (703) 555-0142, aus einem Datum 10/11/2026.

Masken helfen, bis ihre Zeichen in das Feld geschrieben werden, bevor jemand tippt. Dann ist das Feld nie leer, und dreierlei geht kaputt:

• Eine schwebende Beschriftung sieht (___) ___-____, hält das für eine Antwort und springt beim Laden der Seite nach oben oder liegt über der Maske.
• Die eigene Validierung des Formulars sieht Text und lässt womöglich eine leere Telefonnummer durch.
• Ein Screenreader liest die Unterstriche vor.

So bauen Sie eine Maske, die funktioniert:

• Zählen Sie Ziffern, nicht Zeichen. Das Feld ist leer, bis es eine Ziffer enthält. Satzzeichen, die die Maske hinzugefügt hat, sind nie eine Antwort.
• Zeigen Sie die Vorlage nur, solange das Feld den Fokus hat, hinter dem Text der Besucher und außerhalb des Wertes. Die Beschriftung schwebt zuerst, sodass sich nichts überlagert.
• Akzeptieren Sie jedes Format. Jemand fügt 703.555.0142 ein oder tippt die Nummer mit Leerzeichen. Behalten Sie die Ziffern und formatieren Sie sie selbst.
• Lassen Sie die Einfügemarke dort, wo die Besucher sie gesetzt haben. Eine Maske, die den Cursor ans Ende springen lässt, macht jede Korrektur zur Neueingabe.
• Lassen Sie internationale Nummern durch. Ein führendes + sollte die US-Maske abschalten. Eine strenge Maske ist der Grund, warum sich Menschen im Ausland nicht anmelden können.
• Speichern Sie die Ziffern, nicht den formatierten Text. Der Datensatz sollte 7035550142 enthalten, damit Suche, Dublettenabgleich und das nächste System sich einig sind, welche Nummer es ist.

Fordern Sie die richtige Tastatur an

Auf einem Telefon entscheidet der Typ des Feldes, welche Tastatur erscheint:

• Ein E-Mail-Feld legt das @ auf die erste Ebene.
• Ein Telefonfeld öffnet einen Ziffernblock.
• Ein allgemeines Textfeld gibt den Besuchern für alles die volle Tastatur, und sie suchen sich durch die Symbolebenen, um eine Adresse einzugeben.

<input type="email" autocomplete="email" autocapitalize="off" spellcheck="false">
<input type="tel" autocomplete="tel">
<input inputmode="numeric" autocomplete="postal-code">
<input inputmode="decimal">

Dieselben Attribute speisen das automatische Ausfüllen. Wenn Felder sagen, was sie enthalten (Name, E-Mail, Organisation, Postleitzahl), bietet der Browser an, sie auszufüllen, und der langsamste Teil eines mobilen Formulars wird zu einem Fingertipp.

Telefontastaturen schreiben außerdem den ersten Buchstaben groß und korrigieren Wörter, die sie nicht kennen. In einem Nachrichtenfeld hilft das. In einer E-Mail-Adresse oder einem Aktenzeichen verändert es unbemerkt die Antwort, also schalten Sie automatische Großschreibung und Autokorrektur für Felder ab, die Kennungen enthalten.

Die Größe zählt so viel wie die Tastatur:

• Machen Sie Tippziele mindestens 44 Pixel hoch.
• Verknüpfen Sie die Beschriftung jedes Kontrollkästchens, damit auch die Wörter antippbar sind.
• Halten Sie den Text in Feldern bei 16 Pixeln oder größer. Darunter zoomen iPhones in das Feld und lassen die Seite vergrößert, nachdem die Besucher fertig getippt haben.

Fehlermeldungen, die sagen, wie man die Antwort korrigiert

Wenn eine Prüfung fehlschlägt, weiß das Formular, welches Feld betroffen ist und welche Regel verletzt wurde. „Ungültige Eingabe“ wirft dieses Wissen weg.

Eine hilfreiche Meldung nennt das Feld, sagt, was falsch ist, und zeigt eine richtige Antwort: „Geben Sie eine 10-stellige US-Telefonnummer mit Vorwahl ein, zum Beispiel 555-012-3456.“

Auch der Zeitpunkt zählt. Ein Formular, das bei jedem Tastendruck prüft, erklärt eine E-Mail-Adresse die ganze Zeit für ungültig, während sie getippt wird. Prüfen Sie, wenn die Besucher ein Feld verlassen, denn dann sollte die Antwort fertig sein.

Sobald ein Feld als falsch markiert ist, prüfen Sie es während der Eingabe, damit die Meldung verschwindet, sobald die Antwort korrigiert ist. Dann:

• Setzen Sie jede Meldung neben ihr Feld, dorthin, wo die Besucher ohnehin hinschauen.
• Listen Sie beim Absenden alle Probleme oben auf, mit einem Link zu jedem Feld, und setzen Sie den Fokus auf diese Liste.
• Verlassen Sie sich nie allein auf Farbe. Ein roter Rahmen ist für manche farbenblinde Besucher und für jeden Screenreader unsichtbar. Wörter, ein Symbol und ein dickerer Rahmen tragen die Botschaft.
• Verknüpfen Sie die Meldung im Markup mit dem Feld, damit sie angesagt wird, sobald das Feld den Fokus erhält.
• Leeren Sie nie ein Feld wegen eines Fehlers an anderer Stelle. Ein Tippfehler in der Telefonnummer ist kein Grund, das Nachrichtenfeld zu leeren.

Tippfehler in E-Mail-Adressen erkennen, ohne jemanden zu blockieren

Jemand tippt gamil.com statt gmail.com. Die Adresse ist formal korrekt, also akzeptiert sie jeder Validator.

Ihre Antwort, Ihre Quittung oder Ihre Anmeldebestätigung geht ins Leere. Aus Sicht der Besucher haben sie Ihnen geschrieben, und Sie haben nie geantwortet.

Einige Prozent der von Hand eingegebenen Adressen enthalten einen Tippfehler, und die häufigen sind vorhersehbar. Wenn die Besucher das Feld verlassen:

• Vergleichen Sie die Adresse mit einer kurzen Liste bekannter Falschschreibungen.
• Erklären Sie den Vorschlag und bieten Sie eine Korrektur mit einem Fingertipp an.
• Lassen Sie die Besucher behalten, was sie eingegeben haben. Ungewöhnliche Adressen gibt es wirklich, und das letzte Wort haben immer die Besucher.
• Eine Ausnahme: eine Endung, die es nicht gibt, wie hey.con. Dort kann keine E-Mail ankommen, also bitten Sie um eine Korrektur und bieten Sie nicht an, die Eingabe zu behalten. Prüfen Sie gegen die offizielle Liste der Domainendungen, nicht gegen eine Vermutung.

Zeigen Sie jeden Zustand der Absenden-Schaltfläche

Eine Absenden-Schaltfläche schuldet den Besuchern vier Zustände:

• Bereit lädt zum Klicken ein.
• In Arbeit zeigt, dass der Klick angekommen ist. Die Schaltfläche ändert ihren Text und deaktiviert sich, damit ein nervöser zweiter Klick das Formular nicht doppelt sendet.
• Fehlgeschlagen erklärt in der Nähe der Schaltfläche, was schiefgegangen ist, während jedes Feld behält, was die Besucher eingegeben haben.
• Erledigt ersetzt das Formular durch eine Bestätigung, die sagt, was eingegangen ist und was als Nächstes geschieht. Screenreader sagen sie an, zusätzlich zur Anzeige.

Verwenden Sie die größte Sorgfalt auf den Fehlerfall. Wenn das Formular die Worte der Besucher behält, kostet eine abgebrochene Verbindung einen weiteren Klick. Wenn es sie verliert, schreiben nur sehr wenige Menschen eine lange Nachricht aus dem Gedächtnis neu. Schalten Sie oben den simulierten Fehler ein und klicken Sie auf Senden.

Bauen Sie unter dem Skript ein echtes Formular. Wenn das Skript in einem streng abgesicherten Büronetz nicht lädt, sollte das Formular trotzdem auf normalem Weg abgesendet werden und eine schlichte Bestätigungsseite zeigen.

Wenn eine Anfrage in eine Zeitüberschreitung läuft, sagen Sie, dass das Ergebnis unbekannt ist. Erfolg anzuzeigen, wenn Sie es nicht wissen, führt zu Entschuldigungen für Nachrichten, die nie angekommen sind.

Teilen Sie lange Formulare in Schritte

Ein Förderantrag oder eine Veranstaltungsanmeldung kann dreißig Fragen umfassen. Auf einer einzigen Seite verrät die Bildlaufleiste den Besuchern schon vor dem Start, wie viel Arbeit vor ihnen liegt.

In Schritte geteilt, verlangt dasselbe Formular jeweils nur ein paar Minuten. Was Schritte funktionieren lässt:

• Ein Thema pro Schritt.
• Eine Fortschrittsanzeige, die die Wahrheit sagt: „Schritt 2 von 3“, nie ein Balken, der von 20 auf 90 Prozent springt.
• Prüfen Sie jeden Schritt, bevor es weitergeht, damit Probleme auftauchen, solange die Fragen noch frisch sind.
• Zurück verliert nie etwas. Wer zurückgeht, um ein Datum zu korrigieren, findet jede spätere Antwort dort, wo er sie gelassen hat.
• Enden Sie mit einer Übersichtsseite, die jede Antwort mit einer Möglichkeit zum Bearbeiten zeigt, vor dem endgültigen Absenden.
• Setzen Sie den Fokus auf die Überschrift des neuen Schritts, damit Menschen mit Screenreader hören, wo sie sind.
• Die Eingabetaste geht einen Schritt weiter. Sie sollte nie ein halb ausgefülltes Formular absenden.

Speichern Sie Antworten, damit Menschen zurückkehren können

Kaum jemand füllt ein langes Formular in einer Sitzung aus. Es fehlen eine Zahl aus der Finanzabteilung, ein Empfehlungsschreiben, die Freigabe einer Kollegin. Ein Formular, das beim Schließen des Tabs alles vergisst, zwingt zum Neuanfang, und viele fangen nicht neu an.

Es gibt zwei Wege, Antworten zu speichern. Welchen Sie auch wählen, sagen Sie es den Menschen: „Auf diesem Gerät gespeichert“ neben dem Formular genügt.

Bei einem kurzen oder anonymen Formular behalten Sie die Antworten während der Eingabe im eigenen Browser der Besucher, so wie es das mehrstufige Beispiel oben tut. Laden Sie diese Seite neu, und Ihre Antworten kommen zurück.

• Nichts verlässt das Gerät, und es braucht kein Konto.
• Eine Schaltfläche „Meine Antworten löschen“ erlaubt es, sie an einem gemeinsam genutzten Computer zu entfernen.
• Speichern Sie nie Passwörter, Zahlungsdaten oder andere sensible Angaben im Browser.

Bei einem langen Antrag speichern Sie Entwürfe auf dem Server und senden den Besuchern per E-Mail einen Link zum Fortsetzen. Sichern Sie diesen Link ab:

• Senden Sie ihn nur an die Adresse, die im Formular eingegeben wurde.
• Lassen Sie ihn ablaufen.
• Begrenzen Sie, wie viele Links ein Besucher anfordern kann. Sonst wird das Feld zum Fortsetzen zu einem Weg, Ihre E-Mails an Fremde zu schicken.

Dunkle Hintergründe: Sagen Sie es dem Browser

Ihr CSS gestaltet den Kasten, den Rahmen und den Text eines Feldes. Browser und Betriebssystem zeichnen den Rest: den Pfeil eines Auswahlmenüs, die Liste, die sich darunter öffnet, den Kalender eines Datumsfeldes, das Häkchen in einem Kontrollkästchen.

Sie gehen von einer hellen Seite aus, sofern Sie nichts anderes sagen. In einem dunklen Fußbereich mit Newsletter-Anmeldung kann das einen dunkelgrauen Pfeil auf einem fast schwarzen Menü bedeuten, der wie ein schlichtes Rechteck wirkt.

Eine CSS-Deklaration behebt es. Setzen Sie color-scheme im dunklen Bereich auf dark, und der Browser zeichnet seine Teile jedes Bedienelements passend neu.

.site-footer {
  background: #11141a;
  color-scheme: dark;
}

Prüfen Sie dann, was color-scheme nicht abdeckt, am besten auf einem Betriebssystem, das Ihr Team nicht nutzt, im hellen und im dunklen Modus:

• Das automatische Ausfüllen färbt ausgefüllte Felder blassgelb oder blassblau, wodurch weißer Text unlesbar wird.
• Das Grau von Platzhaltern ist für weiße Hintergründe gewählt.
• Ein Fokusrahmen, der auf Weiß deutlich war, kann auf Schwarz verschwinden.

Spam stoppen ohne Rätsel

Ein CAPTCHA macht Ihr Spamproblem zur Pflicht der Besucher. Am schwersten trifft es Menschen mit Sehbehinderung, eingeschränkter Feinmotorik oder Screenreader.

Der meiste Formularspam ist automatisiert und nachlässig, daher stoppen drei Prüfungen, die die Besucher nie sehen, fast alles:

• Ein Honeypot: ein zusätzliches Feld, verborgen vor Menschen und Screenreadern. Bots füllen jedes Feld aus, also markiert ein ausgefüllter Honeypot die Einsendung als Spam.
• Ein Timer: Niemand beantwortet ein Kontaktformular zwei Sekunden nach dem Laden der Seite.
• Eine Ratenbegrenzung: Dreißig Einsendungen pro Minute von einer Adresse sind nicht dreißig Menschen.

Was diese Prüfungen passiert, hat ein Mensch getippt. Markieren Sie es zur Prüfung, statt es zu blockieren, damit ein Fehlalarm nie eine echte Nachricht kostet.

Zeigen Sie allen Absendern dieselbe Bestätigung, damit die Betreiber eines Bots aus der Antwort nichts lernen.

Was nach der Schaltfläche geschieht

Niemand füllt ein Formular aus, um eine Bestätigungsseite zu sehen. Die Menschen wollen eine Antwort, und alles zwischen abgesendet und beantwortet ist ein zweites System, das öfter ausfällt als jede Schaltfläche.

Die übliche Lösung ist ein Formular, das eine E-Mail an ein Postfach schickt, und diese E-Mail ist die einzige Kopie. Wenn ein Spamfilter sie abfängt oder die Empfängerin im letzten Frühjahr die Stelle gewechselt hat, ist die Anfrage spurlos verschwunden.

Erst speichern, dann benachrichtigen.

Sorgen Sie dann dafür, dass die Benachrichtigungen weiter ankommen:

• Senden Sie sie von Ihrer eigenen authentifizierten Domain, mit der Adresse der Besucher als Antwortadresse, damit sie die Prüfungen bestehen, die Postfachanbieter durchsetzen.
• Geben Sie der Formularweiterleitung eine namentlich benannte verantwortliche Person, und überprüfen Sie sie, wann immer Menschen ihre Aufgaben wechseln.
• Achten Sie auf Stille. Ein Formular, das im Schnitt fünf Einsendungen pro Woche hatte und seit drei Wochen keine mehr erhalten hat, ist kaputt, auch wenn jede Seite lädt.
• Führen Sie eine geplante Testeinsendung durch die ganze Kette, vom Formular bis zu dem Postfach, das das Team liest. Sie findet, was eine Verfügbarkeitsüberwachung nicht finden kann.

Probieren Sie die fehlerhaften Versionen aus

Über einen Platzhalter zu lesen, der verschwindet, ist nicht dasselbe, wie ein Formular auszufüllen und dabei den Überblick zu verlieren.

Die Seite mit den fehlerhaften Versionen enthält Live-Formulare mit den Fehlern, vor denen dieser Leitfaden warnt. Jedes wird vor dem Start erklärt, und jedes verlinkt zurück auf die korrigierte Version hier.

Warum es eine eigene Seite ist. Wir verlangen von jeder Seite auf LFW.com die volle Punktzahl in automatischen Barrierefreiheitsprüfungen, und die Website wird jede Nacht gescannt. Formulare, die absichtlich scheitern, würden diese Regel im Leitfaden selbst brechen.

Deshalb liegen die Fehler auf einer einzigen Seite, und jeder ist genau eingegrenzt entschuldigt: eine Regel, an einem Element, auf dieser einen Seite. Alles andere, was dort fehlschlägt, löst weiterhin einen Alarm aus, und die Seite behält ihre echte, niedrigere Punktzahl. Sie ist außerdem aus den Suchergebnissen ausgeschlossen.

Wenn Sie wissen möchten, wie Ihre eigenen Formulare abschneiden, prüft das kostenlose Audit die Felder Ihrer Startseite auf Beschriftungen, Kontrast und die übrigen automatischen Barrierefreiheitsregeln.

Wir bauen und reparieren auch Formulare für Organisationen mit WordPress-Websites. Sprechen Sie mit uns über Ihre Formulare.