Bewährte Praktiken für Kontaktformulare, die wirklich konvertieren

Die meisten Kontaktformulare werden rückwärts entworfen: Felder kommen hinzu, weil jemand in einem Meeting dachte, sie wären „nett zu haben“ - nicht, weil die Person am anderen Ende der Nachricht sie braucht, um zu handeln. Formulare, die wirklich konvertieren, entstehen andersherum - reduziert auf das Nötigste, dann getestet an echten Geräten und echten Menschen, die versuchen, sie zum Scheitern zu bringen.

Nichts davon ist exotisch. Es sind meist Dinge, die eine Checkliste auffangen würde, wenn sie jemand tatsächlich abarbeiten würde.

Fragen Sie nach weniger, als Sie glauben zu brauchen

Jedes Feld in einem Formular ist ein Entscheidungspunkt, und ein Entscheidungspunkt ist eine Gelegenheit anzuhalten. Ein Besucher, der mitten in einer echten Anfrage steckt, schließt trotzdem lieber den Tab, statt eine Telefonnummer herauszusuchen oder auf der Stelle zu erklären, „wie er von Ihnen erfahren hat“. Für die meisten Kontaktformulare reichen Name, E-Mail und Nachricht vollkommen aus. Alles andere ist bestenfalls optional und schlimmstenfalls aufschiebbar - eine Telefonnummer gehört in die Antwort, nicht als Zugangsbedingung vor die Anfrage.

Verdient ein Feld seinen Platz wirklich - etwa eine Budgetspanne bei einer Vertriebsanfrage -, fragen Sie sich, ob es Pflicht sein muss. Ein Pflichtfeld mit verwirrendem Label oder vager Validierung ist ein Pflichtfeld, an dem Menschen abbrechen.

Labels und Validierung, die nicht bestrafen

Platzhaltertext ist kein Label. Er verschwindet in dem Moment, in dem jemand in das Feld klickt - wer also unterbrochen wird, was den meisten Menschen die meiste Zeit passiert, verliert damit den einzigen Hinweis darauf, was er gerade ausgefüllt hat. Das bricht außerdem in vielen Browsern das Autofill, und Screenreader überspringen es häufig ganz. Verwenden Sie für jedes Feld ein echtes <label>-Element, sichtbar über oder neben dem Eingabefeld, immer. Platzhaltertext, falls Sie ihn überhaupt einsetzen, dient einem Beispielformat („jane@company.com“), nicht als Anleitung.

Validieren Sie bei blur - wenn jemand das Feld verlässt - nicht bei jedem Tastendruck. Eine E-Mail-Adresse als ungültig zu markieren, während jemand erst drei Zeichen eingegeben hat, bringt Nutzern nur bei, Ihre Fehlermeldungen zu ignorieren. Fehler sollten außerdem konkret sein und an das Feld gebunden, das sie beschreiben - nicht in einem einzigen Banner „bitte Formular prüfen“ verschwinden, das den Besucher suchen lässt.

Mobilgeräte richtig bedienen - das ist der Großteil Ihres Traffics

Ein Kontaktformular auf dem Handy sollte die richtige Tastatur zeigen, ohne dass man es zweimal sagen muss. Dafür sind type und inputmode da: type="email" holt die @-Taste hervor, und inputmode="tel" zeigt einen Ziffernblock für eine Telefonnummer. Verknüpfen Sie jedes Feld mit dem passenden autocomplete-Wert (autocomplete="email", autocomplete="name"), damit der Browser anbieten kann, es aus bereits vorhandenen Daten auszufüllen - gerade auf Mobilgeräten ist Autofill oft der Unterschied zwischen einem ausgefüllten und einem abgebrochenen Formular.

Tippflächen zählen ebenso wie Tastaturen. Ein Feld, das mit dem Mauszeiger bequem zu treffen ist, kann mit dem Daumen tatsächlich schwer zu treffen sein - halten Sie interaktive Elemente also großzügig dimensioniert und mit ausreichend Abstand.

Das Honeypot-Feld, ohne echte Besucher zu bestrafen

Ein Honeypot ist ein Formularfeld, unsichtbar für Menschen und unwiderstehlich für Bots: ein plausibel benanntes Feld („website“ oder „company“), das eine automatisierte Einsendung ausfüllt und das ein echter Besucher nie zu sehen bekommt. Schlecht umgesetzt bestraft ein Honeypot ausgerechnet die Menschen, die er eigentlich schützen soll - display: none und type="hidden" werden beide von wohlerzogenen Bots herausgefiltert, die berechnetes CSS auslesen, während manche Screenreader und Browser-Erweiterungen versteckte Felder durchaus sichtbar machen - sodass ein echter Besucher mit assistiver Technologie das Feld ausfüllen und stillschweigend als Spam abgelehnt werden kann.

Verstecken Sie es stattdessen korrekt: positionieren Sie es per CSS außerhalb des sichtbaren Bereichs statt mit display:none, markieren Sie es mit tabindex="-1", damit die Tastaturnavigation es überspringt, und mit aria-hidden="true", damit Screenreader es nie ansagen. Ein so umgesetztes Feld ist für jeden echten Besucher unsichtbar - Tastatur, Maus oder Screenreader - und fängt trotzdem die unausgereiften Bots ab, die den Großteil des Spams verursachen. Formhooks eigener Spam-Schutz - Honeypot plus Rate-Limiting, mit Turnstile bei Bedarf zusätzlich verfügbar - ist bei jedem Formular standardmäßig aktiv, aber dieses Markup-Muster lohnt sich unabhängig vom Backend.

Lassen Sie das Formular nach dem Absenden nicht verstummen

Der Button wird geklickt, die Anfrage geht raus - und was sieht der Besucher dann? Ein Formular, das nichts anzeigt, oder das jemanden auf einer leeren, kontextlosen „Danke“-Seite absetzt, wirkt kaputt, selbst wenn alles funktioniert hat - mehr als ein Besucher hat ein Formular schon dreimal abgeschickt, weil nichts ihm sagte, dass der erste Versuch erfolgreich war. Zeigen Sie eine Inline-Bestätigung anstelle des Formulars, oder leiten Sie zu einem echten Dankes-Zustand weiter, der sagt, was als Nächstes passiert („wir antworten innerhalb eines Werktags“). Diese Bestätigung ist auch die letzte Gelegenheit, das Gespräch fortzusetzen - ein Link zu Ihrer Arbeit oder einer Buchungsseite kostet nichts, und manche Besucher nutzen ihn.

Nichts davon braucht ein Framework oder eine Neugestaltung - das meiste ist Markup und eine Viertelstunde Aufmerksamkeit. Wenn Sie das Backend nicht selbst bauen wollen - Zustellung, Spam-Filterung, Dashboard, Speicherung -, genau dafür gibt es Formhook; siehe Preise für das, was in der kostenlosen Stufe enthalten ist. Was Sie vor dem Launch prüfen sollten, deckt die Checkliste vor dem Launch ab, und wenn Sie zwischen einem Formular und einem einfachen mailto:-Link schwanken, zeigt Mailto vs. Kontaktformular beide Seiten.