Kontaktformular optimieren: So werden aus Besuchern passende Anfragen

Deine Website erklärt dein Angebot. Jemand hat Interesse, öffnet das Kontaktformular und soll plötzlich zwölf Felder ausfüllen. Oder die Anfrage geht raus, landet aber bei niemandem, der sich zuständig fühlt. Wer sein Kontaktformular optimieren will, muss deshalb den ganzen Weg anschauen: vom ersten Feld bis zur persönlichen Rückmeldung.

1. Kläre, welche Anfrage du bekommen möchtest

Geht es um einen Rückruf, ein Erstgespräch oder die Vorbereitung eines Angebots? Diese Ziele brauchen unterschiedliche Informationen. Ein Formular mit der Überschrift „Kontakt“ kann alles bedeuten. „Renovierung anfragen“ oder „Rückruf vereinbaren“ beschreibt bereits, was als Nächstes passiert.

Unsere Empfehlung: Schreibe den Zweck deines Formulars in einen Satz. Gehe dann jedes Feld durch und frage: Welche Entscheidung ermöglicht uns diese Angabe? Wenn die Antwort nur „Könnte irgendwann interessant sein“ lautet, gehört das Feld wahrscheinlich in ein späteres Gespräch. Diese Abstimmung auf dein Angebot ist Teil eines individuellen Webdesigns.

Das W3C empfiehlt, nur die für den jeweiligen Vorgang notwendigen Angaben abzufragen. Daraus folgt keine feste Idealzahl. Ein zusätzliches Feld kann sinnvoll sein, wenn es den Auftrag eingrenzt oder eine unnötige Rückfrage verhindert.

Fiktives Beispiel: eine Renovierungsanfrage

Ein Malerbetrieb aus Braunschweig möchte zunächst einschätzen, ob ein Vorhaben zu seinem Leistungsangebot und Einsatzgebiet passt. Unser beispielhafter Entwurf enthält dafür Name, E-Mail-Adresse, Postleitzahl des Objekts, gewünschte Leistung und eine kurze Beschreibung. Telefonnummer, Wunschzeitraum und Fotos bleiben optional, sofern sie für die erste Bearbeitung tatsächlich nicht erforderlich sind.

Über dem Nachrichtenfeld steht: „Welche Räume oder Flächen möchtest du renovieren? Eine grobe Beschreibung reicht.“ Der Betrieb verlangt zu diesem Zeitpunkt weder eine exakte Flächenberechnung noch die vollständige Objektadresse. Diese Details können folgen, sobald das Vorhaben grundsätzlich passt.

Das ist ein Gestaltungsvorschlag, kein gemessener Kundenfall. Bei einem anderen Betrieb kann ein anderer Aufbau sinnvoll sein. Entscheidend ist, dass ihr die Angaben anschließend auch nutzt.

2. Beschrifte Felder so, dass niemand raten muss

Jedes Feld braucht eine verständliche, dauerhaft sichtbare Beschriftung. Ein Platzhalter im Eingabefeld reicht dafür nicht aus: Sobald jemand schreibt, verschwindet die Orientierung. Pflichtangaben und optionale Angaben müssen erkennbar sein. Wenn du ein Sternchen verwendest, erkläre seine Bedeutung vor dem Formular.

Auch Formatvorgaben gehören dorthin, wo sie gebraucht werden. Ein Beispiel für eine Eingabe hilft, ersetzt aber keine Beschriftung. Technisch müssen Hinweise und Felder korrekt verbunden sein, damit sie mit assistiven Technologien verständlich bleiben. Diese Zusammenhänge erläutert das W3C-Tutorial zu Formularhinweisen.

In unserem Renovierungsbeispiel ist „Postleitzahl des Objekts“ genauer als „PLZ“. Für einen Wunschzeitraum schlagen wir „Noch offen“ als ehrliche Auswahl vor. Wer den Start noch nicht kennt, sollte kein Fantasiedatum eintragen müssen. Solche Entscheidungen gehören zum UX- und UI-Design des Formulars.

Auch der Button braucht eine klare Aufgabe. „Renovierung anfragen“ sagt mehr als „Weiter“. Die Formulardokumentation von web.dev empfiehlt handlungsbezogene Buttontexte. Passe die Formulierung dabei an das an, was dein Formular tatsächlich auslöst.

3. Prüfe dein Kontaktformular auf dem Smartphone und per Tastatur

Öffne die Seite auf einem echten Smartphone und fülle das Formular vollständig aus. Unsere Prüffragen: Bleiben die Beschriftungen lesbar? Verdeckt die Bildschirmtastatur wichtige Hinweise? Lassen sich Auswahlfelder treffen und längere Nachrichten überblicken? Ist der Absende-Button ohne seitliches Scrollen erreichbar? Responsive Webdesign muss auch während der Eingabe funktionieren.

Passende Feldtypen unterstützen die Eingabe: Für E-Mail-Adressen und Telefonnummern können Mobilgeräte geeignete Tastaturen anbieten. Ein mehrzeiliges Nachrichtenfeld gibt längeren Angaben Raum. Die technischen Grundlagen beschreibt web.dev zu Formularelementen. Sinnvolle Kennzeichnungen für die automatische Vervollständigung helfen Browsern außerdem, vorhandene Kontaktdaten korrekt anzubieten. Siehe dazu die Hinweise zu Autofill.

Teste anschließend ohne Maus: Wandert der Fokus in nachvollziehbarer Reihenfolge durch das Formular? Siehst du jederzeit, welches Element aktiv ist? Kannst du Auswahlmöglichkeiten und Absenden erreichen? Diese praktische Prüfung gehört in unser Formularreview. Sie ersetzt keine vollständige Prüfung der Barrierefreiheit. Für die Einordnung deiner Website findest du weitere Ansatzpunkte in unserem BFSG-Website-Check.

4. Hilf bei Fehlern und bewahre bereits eingegebene Inhalte

„Ungültige Eingabe“ lässt Menschen mit ihrem Problem allein. Eine hilfreiche Meldung benennt das betreffende Feld und erklärt die Korrektur. Fehler müssen auch anders als allein durch eine rote Farbe erkennbar sein. Bei mehreren Fehlern hilft eine Übersicht mit Verweisen zu den betroffenen Feldern. Das W3C beschreibt verständliche Fehler- und Erfolgsmeldungen als wichtigen Bestandteil des Formularablaufs.

Für unser Beispiel könnte die Meldung lauten: „Bitte prüfe deine E-Mail-Adresse. Sie muss ein @ und eine vollständige Domain enthalten.“ Die bereits geschriebene Projektbeschreibung sollte nach einem korrigierbaren Fehler weiter im Formular stehen. Diese Anforderung würden wir ausdrücklich in die Umsetzung und Abnahme aufnehmen.

Teste auch eine unterbrochene Verbindung. Zeigt die Seite klar, dass die Übermittlung nicht bestätigt werden konnte? Bleiben die Angaben für einen erneuten Versuch verfügbar? Eine unerklärliche leere Seite am Ende macht die ganze vorherige Arbeit zunichte.

5. Sichere den Weg vom Absenden bis zur Bearbeitung

Unsere Empfehlung für die technische Abnahme: Sende eine eindeutig gekennzeichnete Testanfrage und verfolge sie bis zur zuständigen Person. Prüfe dabei die bestätigte Verarbeitung, die Benachrichtigung und die vollständige Darstellung aller Angaben. Ein hübscher Dankestext allein belegt noch keinen zuverlässigen internen Ablauf.

Legt fest, wo Anfragen eingehen und wer diesen Eingang kontrolliert. Klärt auch die Vertretung bei Urlaub oder Krankheit. Wenn Benachrichtigungen ausschließlich an ein persönliches Postfach gehen, gehört die Übergabe besonders sorgfältig geprüft.

Die Bestätigung soll den tatsächlich erreichten Zustand beschreiben. „Deine Anfrage wurde übermittelt. Wir prüfen dein Anliegen und melden uns über die angegebene Kontaktmöglichkeit“ ist ein möglicher Text, wenn euer Ablauf dazu passt. Eine konkrete Antwortfrist solltest du nur nennen, wenn ihr sie organisatorisch tragen könnt. Ein automatisch versendeter Hinweis ist noch keine persönliche Antwort.

Prüft den Ablauf erneut nach Änderungen am Formular oder seiner technischen Umgebung. Ergänzend gehören Datenschutzinformationen, Zugriffsrechte und die Aufbewahrung der Anfragen auf eure interne Prüfliste. Die konkrete datenschutzrechtliche Ausgestaltung sollte separat geklärt sein.

6. Miss bestätigte Anfragen und bewerte ihre Qualität getrennt

Ein Klick auf „Anfrage senden“ zeigt zunächst nur eine Handlung. Er sagt noch nicht, ob die Verarbeitung erfolgreich war. Definiere deshalb vor der Auswertung, welches technische Signal eine bestätigte Übermittlung nachweist. Prüfe mit Testanfragen, dass Fehler keinen Erfolg auslösen und ein erneuter Seitenaufruf keinen zusätzlichen Eingang zählt.

Google Analytics kann Formularinteraktionen über form_start und form_submit erfassen. Ein erfasstes Absenden belegt für sich jedoch keine erfolgreiche Verarbeitung auf deinem Server. Namen, E-Mail-Adressen und personenbezogene Nachrichtentexte gehören nicht in diese Messdaten. Grundlage sind die Hinweise zu optimierten Analysen.

Für Leads empfiehlt Google generate_lead, für ihre spätere Qualifizierung ein separates Ereignis. Diese empfohlenen Ereignisse werden nicht automatisch gesendet. Ihre Einrichtung muss zum Formularablauf passen. Bei Analytics und Reporting sollte daher zuerst geklärt werden, was ein Erfolgssignal tatsächlich nachweist.

Für ein kleines Team schlagen wir eine einfache zusätzliche Bewertung der tatsächlichen Eingänge vor: passendes Vorhaben, Rückfrage nötig oder unpassendes Anliegen. Im Renovierungsbeispiel wären Einsatzgebiet und angebotene Leistung naheliegende Kriterien. Spam und eigene Tests werden gesondert behandelt.

Vergleicht die Entwicklung erst, wenn genügend reale Anfragen vorliegen, und betrachtet auch Veränderungen beim Websiteverkehr. Drei gute Kontakte nach einer Anpassung beweisen noch keine Wirkung. Wie sich Kontakt und qualifizierte Anfrage unterscheiden, vertiefen wir im Beitrag zu B2B-Kennzahlen und Leads.

Was du zuerst verbessern solltest

Du musst das Formular nicht komplett neu bauen. Wir würden die Maßnahmen nach ihrer unmittelbaren Auswirkung auf echte Anfragen priorisieren:

1. Zuerst den Eingang sichern: Testanfrage vollständig bis zur Bearbeitung verfolgen und Zuständigkeit klären.
2. Dann Blockaden beseitigen: Pflichtfelder, Fehlermeldungen, mobile Bedienung und Tastaturzugang prüfen.
3. Anschließend den Inhalt schärfen: Zweck jedes Feldes festhalten, unnötige Angaben entfernen und fehlende Orientierung ergänzen.
4. Danach Wirkung beobachten: bestätigte Übermittlungen mit tatsächlichen Eingängen abgleichen und deren Qualität bewerten.

Notiere zu jeder Änderung ein Datum und eine konkrete Erwartung. Zum Beispiel: „Die Angabe zum Einsatzort soll die erste Zuordnung ermöglichen.“ So lässt sich später beurteilen, ob die Anpassung ihren Zweck erfüllt.

Häufige Fragen zur Formularoptimierung

Sollte zusätzlich eine Telefonnummer angeboten werden?

Wenn ihr telefonische Anfragen zuverlässig annehmen könnt, empfehlen wir einen gut auffindbaren Kontaktweg neben dem Formular. Entscheidend ist die tatsächliche Erreichbarkeit. Ein Rückrufangebot kann passen, wenn direkte Gespräche im Arbeitsalltag nur eingeschränkt möglich sind.

Wann lohnt sich ein Formular mit mehreren Schritten?

Wir würden mehrere Schritte erwägen, wenn unterschiedliche Anliegen deutlich andere Folgefragen benötigen. Für eine kurze allgemeine Anfrage kann ein einzelner übersichtlicher Ablauf genügen. Teste dabei besonders die Rücknavigation: Menschen müssen ihre bisherigen Angaben prüfen und korrigieren können.

Wie gehst du mit vielen Spam-Anfragen um?

Lass zuerst prüfen, welche Formulare und Übermittlungswege betroffen sind. Wähle Schutzmaßnahmen passend zum tatsächlichen Problem und teste danach erneut die Bedienbarkeit. Behalte echte Eingänge im Blick, damit der Schutz keine berechtigten Anfragen aussortiert.

Dein Kontaktformular braucht einen klaren Ablauf?

Bei LA AGENCIA in Braunschweig betrachten wir Text, Gestaltung, Technik und die anschließende Bearbeitung zusammen. Schick uns deine Website und beschreibe kurz, wo es gerade hakt. Gemeinsam klären wir, welche Anpassung an deinem Kontaktformular für dein Unternehmen zuerst sinnvoll ist.