Kontaktformular erstellen: Die 7 häufigsten Fehler

Ein Kontaktformular scheitert selten an der Technik. Meist sind es dieselben sieben Fehler, die Besucher abspringen lassen oder Anfragen im Nichts enden lassen. Dieser Beitrag nennt sie der Reihe nach und zeigt, wie Sie jeden vermeiden, auch mit dem Formular-Baukasten.

Fehler 1: Zu viele Pflichtfelder

Jedes Pflichtfeld ist eine Hürde. Wer sich fragen muss, warum ein Betrieb Geburtsdatum, Anrede und Anschrift für eine einfache Frage braucht, bricht eher ab oder trägt irgendetwas ein. Verlangen Sie nur das, was Sie zur Antwort wirklich benötigen: in der Regel Name, E-Mail-Adresse und Nachricht.

Ein Vorbild ist die Kontakt-Vorlage des Baukastens: vier Felder, davon drei Pflichtfelder. Den Betreff können Besucher freiwillig ausfüllen. Sie finden sie in den Formular-Vorlagen.

Typische Kandidaten zum Streichen sind Anrede, Firma bei privaten Anfragen, Anschrift ohne Versandzweck, ein zweites Feld zur Wiederholung der E-Mail-Adresse und ein Betreff, den die Nachricht ohnehin enthält. Auch „Wie haben Sie von uns erfahren?“ gehört nur in ein Formular, wenn Sie die Antwort später wirklich auswerten.

Prüfen Sie jedes Feld mit einer Frage: Kann ich die Anfrage auch ohne diese Angabe beantworten? Wenn ja, machen Sie das Feld optional oder streichen Sie es. Mehr zur Anzahl der Felder finden Sie im Beitrag Wie viele Felder darf ein Formular haben?

Fehler 2: Platzhalter statt Beschriftung

Häufig steht „E-Mail“ nur als grauer Platzhalter im Eingabefeld. Sobald jemand tippt, verschwindet der Text. Wer das Feld später noch einmal prüft, weiß nicht mehr, was dort hingehört. Platzhalter sind zudem oft schwach kontrastiert, und Hilfsmittel wie Screenreader behandeln sie unzuverlässig.

Setzen Sie stattdessen eine sichtbare Beschriftung über das Feld und verknüpfen Sie sie technisch mit dem Eingabefeld (label for). Ein Hilfetext darunter erklärt Formate, etwa „Mit Vorwahl, zum Beispiel 0711 123456“. Optionale Felder kennzeichnen Sie ausdrücklich mit „(optional)“. So steht bei „Telefonnummer (optional)“ auch dann noch, worum es geht, wenn das Feld bereits ausgefüllt ist. Der Baukasten erzeugt genau diese Struktur: Beschriftung, Hilfetext und Kennzeichnung der optionalen Felder.

Fehler 3: Fehlermeldungen, die nichts erklären

„Ungültige Eingabe“ hilft niemandem. Eine gute Meldung nennt das Problem und den nächsten Schritt: „Bitte geben Sie eine gültige E-Mail-Adresse ein, zum Beispiel name@beispiel.de.“ Dazu gehören drei Dinge:

• Die Meldung steht direkt am Feld und ist mit ihm verknüpft (aria-describedby), damit Screenreader sie vorlesen.
• Der Fokus springt zum ersten fehlerhaften Feld, und bereits eingegebene Angaben bleiben erhalten.
• Fehler sind nicht nur durch Farbe erkennbar, sondern zusätzlich durch Text.

Der exportierte Code des Baukastens bringt dafür Fehlertexte, aria-invalid und die Fokussteuerung mit. Die Texte stehen als lesbare Attribute im HTML und lassen sich anpassen.

Fehler 4: Keine ehrliche Rückmeldung nach dem Absenden

Nach dem Absenden will jeder wissen: Ist meine Nachricht angekommen? Eine Bestätigung darf aber erst erscheinen, wenn der Empfänger die Angaben tatsächlich angenommen hat. Eine Meldung, die schon beim Klick auf die Schaltfläche „Vielen Dank“ sagt, kann eine Lüge sein, wenn die Übertragung danach scheitert.

Gute Rückmeldungen sind knapp und konkret: „Ihre Nachricht ist bei uns eingegangen. Wir antworten Ihnen per E-Mail.“ Versprechen Sie keine Antwortfrist, die Sie nicht halten können. Und zeigen Sie bei einem Fehler, was der Besucher tun kann, zum Beispiel einen anderen Kontaktweg.

Fehler 5: Ein Formular ohne Empfänger

Der häufigste und ärgerlichste Fehler: Das Formular sieht fertig aus, aber niemand erhält die Nachrichten. HTML und CSS beschreiben nur die Eingabemaske. Wohin die Angaben gehen, bestimmt der Empfänger, den Sie im Attribut action eintragen: ein Dienst, ein eigenes Skript oder eine App.

Der Code aus dem Baukasten speichert deshalb bewusst keine Antworten. Gängige Wege sind ein Formular-Dienst, ein Skript auf dem eigenen Server oder eine Anwendung, die Antworten sammelt und auswertet. Legen Sie vorab fest, wer die Nachrichten erhält, wer sie beantwortet und was bei Abwesenheit passiert. Testen Sie jedes Formular nach dem Einbau mit einer echten Nachricht und prüfen Sie, ob sie ankommt, bevor Sie es veröffentlichen. Wie Antworten danach sinnvoll weiterverarbeitet werden, beschreibt der Beitrag Formularantworten sinnvoll weiterverarbeiten.

Fehler 6: Datenschutz erst am Ende bedenken

Sobald ein Formular E-Mail-Adressen oder Namen sammelt, verarbeiten Sie personenbezogene Daten. Verlinken Sie deshalb die Datenschutzerklärung Ihrer Website am Formular, fragen Sie nur Nötiges ab und übertragen Sie die Daten verschlüsselt über HTTPS. Eine Einwilligungs-Checkbox setzen Sie dort ein, wo Sie eine Einwilligung als Grundlage brauchen, nicht pauschal an jedes Formular.

Als Spamschutz genügt oft ein Honeypot statt eines Captcha-Dienstes von Drittanbietern. Die Grundlagen fasst die Seite Formulare datenschutzfreundlich gestalten zusammen. Sie ersetzt keine Rechtsberatung; was für Ihr Formular gilt, hängt von Zweck und Empfänger ab.

Fehler 7: Nicht am Handy und per Tastatur getestet

Ein großer Teil der Besucher vieler Websites nutzt ein Smartphone; wie groß er bei Ihnen ist, zeigt Ihre eigene Besucherstatistik. Unabhängig davon muss ein Formular auf kleinen Displays funktionieren:

• Felder sind mindestens so hoch, dass man sie mit dem Daumen trifft; als Richtwert gelten etwa 44 Pixel.
• Der passende Feldtyp (type="email", type="tel") blendet die richtige Bildschirmtastatur ein.
• Mit der Tab-Taste lässt sich jedes Feld erreichen, und der Fokus ist sichtbar.
• Die Schaltfläche liegt nach dem letzten Feld und ist ein echter Button.

Ob Sie Barrierefreiheit gesetzlich erfüllen müssen, hängt vom Angebot ab: Das Barrierefreiheitsstärkungsgesetz erfasst Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher, nimmt aber Kleinstunternehmen aus (§ 3 Abs. 3 BFSG, Stand: 10. Oktober 2026).

Im Baukasten schalten Sie die Vorschau zwischen Desktop und Handy um. Klicken Sie danach einmal ohne Maus durchs Formular: Tab, Leertaste, Eingabetaste.

So prüfen Sie Ihr Formular in fünf Minuten

Bevor ein Formular online geht, lohnt ein kurzer Durchlauf. Er deckt die meisten der sieben Fehler auf:

1. Senden Sie das leere Formular ab und lesen Sie die Fehlermeldungen. Sind sie verständlich, und landet der Fokus im ersten fehlerhaften Feld?
2. Füllen Sie alles korrekt aus, schicken Sie das Formular ab und prüfen Sie, ob die Nachricht beim Empfänger ankommt.
3. Geben Sie bewusst eine ungültige E-Mail-Adresse ein. Bleiben Ihre übrigen Angaben erhalten?
4. Öffnen Sie die Seite am Smartphone und tippen Sie jedes Feld an. Erscheint die passende Tastatur?
5. Bedienen Sie das Formular nur mit der Tastatur. Ist der Fokus jederzeit sichtbar?

Planen Sie pro Punkt etwa eine Minute ein. Notieren Sie, was Sie ändern, und wiederholen Sie den Durchlauf nach jeder Änderung einmal, bis nichts mehr auffällt.

Checkliste für Ihr Kontaktformular

• Nur Felder, die zur Beantwortung nötig sind; Pflichtfelder auf das Minimum beschränkt.
• Sichtbare Beschriftung an jedem Feld, optionale Felder gekennzeichnet.
• Fehlermeldungen nennen Problem und nächsten Schritt; Eingaben bleiben erhalten.
• Bestätigung erscheint erst, wenn der Empfänger die Angaben angenommen hat.
• Empfänger eingerichtet und mit einer Testnachricht geprüft.
• Link zur Datenschutzerklärung vorhanden, Übertragung per HTTPS.
• Am Handy und nur mit der Tastatur getestet.

Häufige Fragen