Kontaktformular optimieren: mehr Anfragen, weniger Abbrüche

Ein Interessent hat sich durch Ihre Leistungsseite gelesen, die Referenzen angesehen und will anfragen. Jetzt fehlt nur noch das Formular – und genau dort geht in der Praxis erstaunlich viel verloren: zu viele Pflichtfelder, ein unleserliches CAPTCHA, eine Fehlermeldung, die nicht sagt, was falsch ist, oder ein Formular, das auf dem Smartphone kaum zu bedienen ist.

Dieser Leitfaden geht das Kontaktformular Baustein für Baustein durch. Wie das Formular in die gesamte Website eingebettet wird, damit überhaupt jemand bis dorthin kommt, behandeln wir im Artikel Conversion-Rate erhöhen.

Welche Felder ein Kontaktformular wirklich braucht

Die Grundregel der Nielsen Norman Group lautet: Formulare kurz halten. Felder, deren Information sich anders ermitteln, später erfragen oder ganz weglassen lässt, gehören gestrichen. Für die erste Anfrage bei einem Betrieb reicht meist sehr wenig:

Wie groß der Effekt sein kann, zeigt ein Blick in den Online-Handel: Das Baymard Institute zählte 2024 in Checkout-Prozessen durchschnittlich 11,3 Formularfelder, während die meisten Shops laut Baymard mit 8 auskämen. Wenn schon Shops mit klarer Kaufabsicht zu viele Felder abfragen, lohnt bei Kontaktformularen erst recht ein kritischer Blick.

Aufbau und Beschriftung

Die Nielsen Norman Group und die Formular-Anleitung des W3C, das die Webstandards entwickelt, sind sich in den Grundlagen einig:

• Einspaltig: ein Feld pro Zeile. Kurze, zusammengehörige Felder wie Postleitzahl und Ort dürfen nebeneinanderstehen.
• Beschriftung über dem Feld und nah daran, vor allem auf dem Smartphone. Jedes Feld braucht eine echte Beschriftung, die auch Screenreader vorlesen.
• Keine Platzhalter statt Beschriftung: Grauer Text im Feld verschwindet beim Tippen. Die Nielsen Norman Group rät von Platzhaltern ab, weil sie zahlreiche Bedienprobleme verursachen.
• Optionale Felder kennzeichnen: am besten mit dem Zusatz „(optional)“ – und davon möglichst wenige.
• Anforderungen vorher nennen: etwa die maximale Dateigröße beim Upload – nicht erst in der Fehlermeldung.
• Zusammengehöriges gruppieren: Bei längeren Formularen helfen Abschnitte mit Überschrift.

Das Smartphone mitdenken

Ein großer Teil der Anfragen kommt mobil. Verwenden Sie die passenden Feldtypen, damit das Smartphone die richtige Tastatur zeigt: Ziffernblock für Telefonnummer und Postleitzahl, eine Tastatur mit @ für die E-Mail-Adresse. Die automatische Vervollständigung des Browsers sollte funktionieren, damit Name und Kontaktdaten mit einem Tippen eingefügt werden. Felder und Buttons brauchen eine Größe, die sich mit dem Daumen treffen lässt.

Texte rund um das Formular

Ein Formular ist nicht nur eine Sammlung von Feldern. Die Texte drumherum entscheiden mit, ob jemand es ausfüllt:

• Überschrift mit Nutzen: „Kostenloses Angebot anfordern“ statt „Kontakt“.
• Was danach passiert: „Wir melden uns innerhalb eines Werktags telefonisch oder per E-Mail.“
• Hilfe im Nachrichtenfeld: „Beschreiben Sie kurz, worum es geht – zum Beispiel Raumgröße, gewünschter Zeitraum, Besonderheiten.“
• Button mit konkreter Aufschrift: „Anfrage senden“ oder „Rückruf anfordern“ statt „Absenden“. Einen Button zum Zurücksetzen sollten Sie laut Nielsen Norman Group weglassen – versehentliches Löschen ärgert mehr, als die Funktion nützt.
• Alternativen daneben: Telefonnummer und Erreichbarkeitszeiten für alle, die lieber sprechen.

Fehlermeldungen, die weiterhelfen

„Bitte überprüfen Sie Ihre Eingaben“ – und dann sucht man, was gemeint ist. Laut Nielsen Norman Group sollten Fehlermeldungen:

• deutlich sichtbar sein und direkt am betroffenen Feld stehen,
• konkret sagen, was falsch ist und wie es richtig geht („Bitte geben Sie eine Telefonnummer oder E-Mail-Adresse an“),
• nicht nur über Farbe funktionieren, sondern zusätzlich über Text, Rahmen oder Symbol – wichtig für Menschen mit Farbsehschwäche,
• die bisherigen Eingaben erhalten, damit niemand alles neu tippen muss.

Das W3C empfiehlt außerdem, Nutzer nach dem Absenden klar darüber zu informieren, ob es geklappt hat – sowohl bei Erfolg als auch bei Fehlern. Barrierefreie Formulare sind dabei kein Extra: Sie sind für alle leichter zu bedienen. Die Grundlagen beschreibt der Artikel WCAG 2.2 einfach erklärt.

Spamschutz ohne Hürden für echte Interessenten

Ohne Schutz füllen automatisierte Programme Formulare mit Werbung und Schadlinks. Mit zu viel Schutz scheitern echte Menschen. Ein guter Spamschutz arbeitet möglichst unsichtbar:

In unseren Projekten reicht eine Kombination aus Honeypot, Zeitprüfung und serverseitigem Filter in den meisten Fällen aus. Sichtbare Rätsel setzen wir nur ein, wenn das nicht genügt.

Datenschutz am Formular

Wer über ein Formular Daten erhebt, muss die Betroffenen nach Art. 13 DSGVO informieren. Üblich ist ein kurzer Hinweis direkt am Formular mit Link zur Datenschutzerklärung, in der Zweck, Rechtsgrundlage und Speicherdauer beschrieben sind. Für die bloße Bearbeitung einer Anfrage ist nach verbreiteter Auffassung in der Regel keine zusätzliche Einwilligungs-Checkbox erforderlich, weil die Verarbeitung der Anbahnung eines Vertrags dient. Anders kann es aussehen, wenn Sie die Daten für weitere Zwecke wie einen Newsletter nutzen wollen. Prüfen Sie das im Einzelfall.

Technisch gehört dazu: Übertragung nur verschlüsselt per HTTPS, keine unnötige Speicherung von Anfragen in der Website-Datenbank und ein Plan, wann Anfragen gelöscht werden.

Nach dem Absenden

Der Moment nach dem Klick wird oft vergessen – dabei entscheidet er über den ersten Eindruck der Zusammenarbeit:

• Bestätigung: eine klare Meldung oder Danke-Seite mit dem, was als Nächstes passiert. Eine Danke-Seite lässt sich außerdem gut als Ziel in der Webanalyse messen.
• Eingangsbestätigung per E-Mail, falls eine Adresse angegeben wurde – kurz, mit Ihren Kontaktdaten.
• Zustellung prüfen: Formular-E-Mails landen gern im Spam-Ordner oder kommen gar nicht an, etwa nach einem Wechsel des E-Mail-Anbieters. Senden Sie regelmäßig eine Testanfrage, zum Beispiel einmal im Monat.
• Schnell antworten: Die beste Optimierung nützt nichts, wenn Anfragen tagelang liegen bleiben.

Wo das Formular steht und was auf einer Kontaktseite außerdem dazugehört, beschreibt der Artikel Kontaktseite gestalten.

Typische Fehler aus der Praxis

Bei der Prüfung bestehender Websites stoßen wir immer wieder auf dieselben Probleme:

• Formular ohne Funktion: Nach einem Plugin-Update oder Umzug kommen keine Anfragen mehr an – und es fällt wochenlang niemandem auf.
• Pflichtfeld „Anrede“: zwingt zu einer Auswahl, die für die Anfrage keine Rolle spielt.
• Telefon und E-Mail beide Pflicht: schreckt Menschen ab, die nur einen Weg nennen möchten.
• Formular im Pop-up: lässt sich auf kleinen Bildschirmen kaum bedienen und schließt sich versehentlich.
• Bestätigung nur als kurzer Hinweis, der nach zwei Sekunden verschwindet – Interessenten schicken die Anfrage doppelt ab oder sind unsicher, ob sie angekommen ist.
• Weiterleitung an ein Postfach, das niemand liest, etwa die E-Mail-Adresse eines ausgeschiedenen Mitarbeiters.

So testen Sie Ihr Formular in zehn Minuten

1. Auf dem eigenen Smartphone ausfüllenOhne Zoomen, nur mit dem Daumen. Erscheint bei jedem Feld die passende Tastatur?
2. Absichtlich Fehler machenEin Pflichtfeld leer lassen, eine falsche E-Mail-Adresse eingeben. Sind die Meldungen verständlich, bleiben die Eingaben erhalten?
3. Abschicken und Zustellung prüfenKommt die Anfrage im richtigen Postfach an, und zwar nicht im Spam-Ordner? Kommt die Eingangsbestätigung beim Absender an?
4. Mit der Tastatur bedienenLässt sich das Formular am Rechner nur mit der Tab-Taste durchlaufen und absenden?
5. Jemand Fremdes testen lassenBeobachten Sie, wo er zögert – dort liegt meist die nächste Verbesserung.

Checkliste Kontaktformular

• Das Formular fragt nur, was für den ersten Rückruf nötig ist.
• Einspaltiger Aufbau, Beschriftungen über den Feldern, keine Platzhalter als Ersatz.
• Optionale Felder sind gekennzeichnet; Pflichtfelder sind die Ausnahme.
• Telefon-, E-Mail- und Postleitzahlfelder öffnen auf dem Smartphone die passende Tastatur.
• Der Button hat eine konkrete Aufschrift; es gibt keinen Zurücksetzen-Button.
• Fehlermeldungen stehen am Feld, sind konkret und nicht nur farbig.
• Spamschutz arbeitet unsichtbar; sichtbare Rätsel nur im Ausnahmefall.
• Ein Datenschutzhinweis mit Link steht direkt am Formular.
• Nach dem Absenden erscheint eine klare Bestätigung mit nächstem Schritt.
• Eine Testanfrage wird regelmäßig verschickt und kommt an.

Häufige Fragen

Quellen

1. Nielsen Norman Group: Website Forms Usability – Top 10 Recommendations – Felder, Beschriftungen, Platzhalter, Fehlermeldungen, Buttons
2. Nielsen Norman Group: Conversion Rates – Wirkung jeder zusätzlichen Formularfrage
3. W3C Web Accessibility Initiative: Forms Tutorial – Beschriftung, Gruppierung, Validierung, Benachrichtigungen, mehrstufige Formulare
4. Baymard Institute: Checkout Optimization – Average Form Fields (2024) – Durchschnittlich 11,3 Felder, 8 würden meist reichen