Formulargestaltung: Best Practices für die Konversion

Aktualisiert am 19. Oktober 2026

Ihr Formular ist kurz. Die Fragen sind relevant. Der Traffic ist hoch. Und dennoch bricht ein erheblicher Teil der mobilen Besucher den Vorgang bereits im zweiten Feld ab. Das Problem liegt oft weder im Angebot noch in der Anzahl der Fragen, sondern im Design des Formulars. Eine alphabetische Tastatur, die sich zu einem Postleitzahlenfeld öffnet, eine Beschriftung, die nach der Eingabe verschwindet, ein hellgrauer Button, der kaum sichtbar ist. Dieser Leitfaden enthält Best Practices für ein optimales Formulardesign mit messbaren Auswirkungen auf die Conversion-Rate sowie die entsprechenden Code-Codes und Einstellungen.

Zusamenfassend: ein Formulardesign, das hohe Konversionsraten erzielt, folgt fünf bewährten Methoden: eine einzelne Spalte mit gut sichtbaren Beschriftungen über den Feldern, eine an den jeweiligen Datentyp angepasste mobile Tastatur, kurze Schritte mit sichtbarem Fortschritt, ausreichender Kontrast (4,5:1 für Text, 3:1 für Feldränder) und eine Schaltfläche, die das Ergebnis eindeutig anzeigt. Diese Einstellungen sind kostengünstig umzusetzen und beseitigen die Hürden, die auf Mobilgeräten häufig zum Abbruch des Vorgangs führen.

Eine Klarstellung vorab: Dieser Artikel befasst sich nicht mit der Länge Ihrer Formulare, sondern mit deren Format. Am Ende finden Sie eine 12-Punkte-Checkliste, mit der Sie Ihr Formular in nur zehn Minuten überprüfen können.

Layout: eine Spalte, Beschriftungen über den Feldern

Das effektivste Layout für ein Formular zur Leadgenerierung ist eine einzelne Spalte, in der jede Beschriftung über dem zugehörigen Feld platziert ist. Das Auge folgt so einer geraden Linie, ohne zwischen Spalten hin- und herspringen oder suchen zu müssen, welche Beschriftung zu welchem ​​Feld gehört.

Die Zahlen belegen dies. In einem eine kontrollierte Studie des CXL-Instituts (jetzt Speero) mit 702 Teilnehmern, Die einspaltige Version wurde im Durchschnitt in 102,3 Sekunden bearbeitet, die mehrspaltige Version in 117,8 Sekunden. Dies entspricht einer Zeitersparnis von etwa 13 %, wobei die Fragen identisch sind.

Ein wichtiger Unterschied: Diese Studie hat nur die Zeit gemessen, die diejenigen benötigten, die das Formular vollständig ausfüllten. Sie sagt nichts über diejenigen aus, die den Vorgang abbrachen. Ein Formular, das schneller zu lesen ist, schreckt jedoch selten Menschen ab.

Platzhalter, schwebendes Etikett oder festes Etikett?

Eine feste Beschriftung, die stets über dem Eingabefeld sichtbar ist, bleibt die sicherste Wahl. Der im Feld platzierte Beispieltext (der Platzhalter) verschwindet, sobald die erste Taste gedrückt wird: Der Benutzer, der seine Eingabe überprüft, weiß dann nicht mehr, was abgefragt wurde.

Schwebende Beschriftungen, die durch Material Design bekannt wurden, lösen das Problem nur teilweise. Die Beschriftung wird verkleinert, um in das Feld zu passen, lange Überschriften werden abgeschnitten, und der Kontrast des reduzierten Textes ist oft zu gering. Verwenden Sie den Platzhalter ausschließlich für Formatierungsbeispiele („06 12 34 56 78“), niemals als alleinige Beschriftung.

Zwei Ausnahmen werden toleriert

Die Einspaltenregel sieht Ausnahmen vor, wenn zwei Felder ein und dasselbe Konzept repräsentieren: Postleitzahl und Ort oder Ablaufdatum und Sicherheitscode. Die nebeneinanderliegende Darstellung auf einem Computerbildschirm bleibt lesbar, sofern die Felder auf einem Mobilgerät untereinander angezeigt werden.

Mobilgeräte: Die richtige Tastatur für jedes Feld anzeigen

Jedes Eingabefeld sollte die Tastatur auslösen, die den erwarteten Daten entspricht: ein Ziffernblock für eine Postleitzahl, ein Tastenfeld für eine Telefonnummer und eine Tastatur mit dem „@“-Symbol für eine E-Mail-Adresse. Diese HTML-Code-Detailierung erspart dem Benutzer das manuelle Umschalten zwischen den Tastaturen für jedes Feld.

Dieses Detail wird oft schlecht umgesetzt, selbst an großen Standorten. Die Überprüfung von Touch-Tastaturen durch das Baymard Institute zeigte, dass 54 % der großen US-amerikanischen E-Commerce-Websites zeigten die optimierte Tastatur nicht an bei den Feldern für Telefonnummer, Postleitzahl oder Kreditkartendaten war in 79 % der Fälle die Autokorrektur aktiviert, was die Eingaben verfälscht. Eine durch die Telefonnummer „korrigierte“ E-Mail-Adresse ist ein verlorener potenzieller Kunde.

Hier sind die Einstellungen, die auf die am häufigsten verwendeten Felder in einem französischen Lead-Formular angewendet werden sollten:

Vermeiden type='number' bei einer Postleitzahl oder einer SIRET-Nummer: Es fügt unnötige Inkrementpfeile auf einem Computer hinzu und kann die führende Null aus einer Postleitzahl wie 01000 entfernen.

Die iPhone-Zoomfalle

Unter iOS zoomt Safari automatisch in Felder mit Text unter 16 Pixeln. Dadurch verschiebt sich die Seite, der Button verschwindet aus dem Sichtfeld, und der Nutzer muss manuell herauszoomen. Legt man die Schriftgröße für Felder auf mindestens 16 Pixel fest, tritt das Problem nicht mehr auf.

Berücksichtigen Sie auch berührungsempfindliche Bereiche. Ein 16 Pixel großer Optionsbutton ist mit dem Daumen schwer zu bedienen; streben Sie klickbare Bereiche von mindestens 44 × 44 Pixeln an, sodass die gesamte Zeile der Option anklickbar ist und nicht nur der Punkt.

Autofokus und Autovervollständigung: Hilfe, ohne etwas zu erzwingen

Die Browser-Autovervollständigung spart wertvolle Sekunden; der Autofokus hingegen ist häufiger hinderlich als hilfreich. Es handelt sich um zwei ähnliche Einstellungen mit gegensätzlichen Auswirkungen.

Das Attribut autocomplete ermöglicht es dem Browser, Name, E-Mail, Telefon und Adresse mit einem Tippen auszufüllen. Bei einem Angebotsformular mit sechs Feldern kann das die Eingabe auf zwei oder drei Tipper reduzieren. Umgekehrt bestraft das Deaktivieren der Autovervollständigung „aus Sicherheitsgründen“ in einem Kontaktformular den Nutzer, ohne etwas zu schützen.

Der Autofokus, der den Cursor beim Laden automatisch im ersten Feld platziert, birgt einige Probleme. Der britische Designer Adam Silver nennt fünf: unerwartete Seitenumbrüche, blockiertes Scrollen mit der Tastatur, nicht zugängliche Browser-Tastenkombinationen, ein Screenreader, der die Feldbezeichnung anstelle des Seitentitels vorliest, und unter Android ein Feld, das aktiviert wird, ohne dass die Tastatur geöffnet wird.

Unsere Empfehlung ist einfach: Fokussieren Sie Seiten, die außer dem Formular noch andere Inhalte (Einleitungstext, Argumente, Kundenrezensionen) enthalten, nicht automatisch. Bei mehrstufigen Formularen ist es jedoch hilfreich, den Fokus auf die Überschrift des nächsten Schritts zu setzen: So weiß der Nutzer, der mit der Tastatur oder einem Screenreader navigiert, sofort, wo er sich befindet.

Zerlegen Sie es in einzelne Schritte, ohne den Leser zu verlieren

Ein mehrstufiges Formular erzielt bessere Konversionsraten, wenn jede Seite nur ein oder zwei Fragen enthält, der Fortschritt sichtbar ist und die erste Frage minimalen Aufwand erfordert. Die Aufteilung des Formulars ist jedoch kein Allheilmittel: Schlecht gestaltet, führt sie zu zusätzlichen Klicks, ohne den Arbeitsaufwand zu reduzieren.

Drei Gestaltungsregeln machen den entscheidenden Unterschied:

• Beginnen Sie mit einer einfachen und ansprechenden Frage : Die Art des Projekts oder Bedarfs wird als große, anklickbare Karten dargestellt. Kontaktdaten werden erst zuletzt hinzugefügt, nachdem der Nutzer bereits einige Zeit investiert hat.
• Zeigen Sie ehrlichen Fortschritt „Schritt 2 von 4“ ist besser als ein Takt, der sich am Anfang schnell bewegt und dann stagniert.
• Automatisch zum nächsten Bildschirm wechseln nach einer einzigen Auswahl (Optionsfeld), aber niemals nach einer Texteingabe, bei der der Benutzer die Kontrolle behalten muss.

Um dieses Format genauer zu beleuchten, haben wir Kommentierte Beispiele für mehrstufige Angebotsformen die Reihenfolge der Fragen wird den jeweiligen Sektoren entsprechend angezeigt. Und um nur die für jedes Profil relevanten Fragen anzuzeigen, bedingte Logik vermeidet es, dem einzelnen Nutzer das Feld „Anzahl der Mitarbeiter“ anzuzeigen.

Diese Partitionierung kann ohne Entwickler im System durchgeführt werden mit den Funktionen von Blastform : Schritte, visuelle Darstellungen, Fortschrittsanzeige und Anzeigebedingungen werden im Editor konfiguriert.

Farben, Kontrast und Barrierefreiheit

Ein barrierefreies Formular ist auch ein Formular mit besserer Konversionsrate: Der Text muss einen Kontrast von mindestens 4,5:1 zum Hintergrund und die Feldränder einen Kontrast von mindestens 3:1 aufweisen, gemäß den WCAG-Kriterien 1.4.3 und 1.4.11. Dieses zweite Kriterium wird am häufigsten übersehen.

Aktuelle Grafikdesign-Trends bevorzugen sehr helle Grautöne auf weißem Hintergrund ohne sichtbaren Rahmen. Dadurch kann der Nutzer auf einem Smartphone-Bildschirm bei hellem Sonnenlicht nicht mehr erkennen, wo er klicken soll. Ein grauer Rahmen wie #767676 auf weißem Hintergrund ist geeignet; der weit verbreitete Rahmen #E0E0E0 hingegen nicht.

Drei weitere Reflexe, die man sich aneignen sollte:

• Weisen Sie einen Fehler niemals allein durch die Farbe an. Für die rund 8 % der Männer mit Farbsehschwäche reicht ein roter Rahmen nicht aus: Fügen Sie ein Symbol und eine Textnachricht hinzu.
• Verknüpfen Sie jede Bezeichnung mit dem entsprechenden Feld (Etikett label mit dem Attribut forDurch Klicken auf die Beschriftung wird das Feld aktiviert, und der Bildschirmleser liest die richtige Frage vor.
• Halten Sie einen Fokusindikator sichtbar. Wenn man die standardmäßige blaue Umrandung entfernt, ohne sie zu ersetzen, ist das Formular mit der Tastatur nicht mehr bedienbar.

Es geht hier nicht mehr nur um Bequemlichkeit. Seit dem 28. Juni 2025 gelten in der Europäischen Union, genauer gesagt in der Accessibility Act, Anforderungen an die Barrierefreiheit vieler öffentlicher Online-Dienste, darunter auch E-Commerce- und Bankdienstleistungen. Ein barrierefreies Formular erspart Ihnen die spätere Überarbeitung.

Aus Sicht der visuellen Identität schafft die Abstimmung der Farben und Typografie des Formulars auf die Ihrer Website Vertrauen: Ein Formular, das wie ein generisches Drittanbieter-Widget aussieht, verunsichert die Nutzer. Wir gehen in unserem Artikel ausführlicher auf diesen Aspekt ein Anpassen eines Formulars ohne Programmierung.

Mikrokopie- und Fehlermeldungen

Mikrocopy bezeichnet den kleinen Text um die Eingabefelder herum: Beschriftungen, Hilfetexte, Fehlermeldungen. Gut formuliert, geht sie auf Einwände ein, bevor sie den Nutzer abschreckt. Schlecht formuliert, führt sie dazu, dass selbst ein einfacher Tippfehler zum Abbruch der Nutzung führt.

Markieren Sie die optionalen Felder, nicht die Pflichtfelder

Der rote Stern ist eine anerzogene Gewohnheit, die vielen Nutzern jedoch entgeht oder deren Bedeutung sie nicht verstehen. Die von mehreren UX-Experten empfohlene Vorgehensweise ist die gegenteilige: Gehen Sie davon aus, dass alle Felder Pflichtfelder sind, und fügen Sie „(optional)“ nur bei den optionalen Feldern hinzu. Wenn Sie viele optionale Felder haben, überlegen Sie deren Nutzen.

Zum richtigen Zeitpunkt validieren

Laut dem Baymard Institute 31 % der getesteten Websites verfügen über keine Online-Validierung der Felder, Manche Nutzer lösen die Fehlermeldung zu früh aus. Die Anzeige einer ungültigen E-Mail-Adresse, nachdem erst drei Buchstaben eingegeben wurden, führt zu Frustration. Der richtige Zeitpunkt: wenn der Nutzer das Eingabefeld verlässt. Sobald er die Adresse korrigiert, sollte die Fehlermeldung während der weiteren Eingabe verschwinden, ohne dass er zu einem anderen Feld wechseln muss.

Fehler aufschreiben, die helfen

Vergleichen Sie „Ungültiges Format“ und „Die Zahl muss 10 Ziffern enthalten, z. B. 06 12 34 56 78“. Die zweite Meldung gibt Ihnen die nötige Anleitung. Platzieren Sie die Meldung direkt unter dem betroffenen Feld, niemals nur oben im Formular, und behalten Sie alle bereits eingegebenen Daten nach einem Fehler bei.

Beruhigend, wo ein Problem besteht

Das Feld für die Telefonnummer ist ein klassischer Schwachpunkt in Formularen zur Kundengewinnung. Eine hilfreiche Zeile direkt darunter („Wir rufen Sie nur zurück, um Ihnen ein Angebot zu unterbreiten“) geht sofort auf dieses Problem ein. Das ist deutlich effektiver als eine generische Fußzeile, die ohnehin niemand liest.

Der Sendeknopf: der letzte Meter

Der Button sollte klar beschreiben, was der Nutzer erhält, nicht die technische Aktion, die er ausführt. „Angebot anfordern“ erzielt eine höhere Konversionsrate als „Senden“, da es das Versprechen im Moment der finalen Aktion bekräftigt.

Unbounce berichtet von mehreren Fällen, in denen ein einziges Wort das Ergebnis veränderte. Auf einem B2B-Portal für Bürovermietung durch den Austausch von „Bestellen“ gegen „Holen“ auf dem Button konnte die Konversionsrate um 38 % gesteigert werden : Das Verb bezog sich schließlich auf das, was man empfängt, und nicht mehr auf das, was man tun muss.

In puncto Design sind vier Einstellungen wichtig:

• Volle Breite auf Mobilgeräten, so dass der Daumen es erreichen kann, ohne zielen zu müssen.
• Eine Farbe, die sich vom Rest der Seite abhebt. Die "beste Farbe" gibt es nicht: Entscheidend ist der Kontrast zur Umgebung, nicht Rot oder Grün an sich.
• Niemals deaktiviert oder ausgegraut Solange das Formular unvollständig ist, versteht der Benutzer nicht, was fehlt. Ermöglichen Sie ihm, die auszufüllenden Felder anzuklicken und anzugeben.
• Ein Ladezustand nach dem Klick („Senden wird bearbeitet…“), um doppelte Übermittlungen und doppelte Leads in Ihrem CRM zu vermeiden.

Diese Designoptimierungen ergänzen die Optimierungen zur Senkung der Anschaffungskosten. Wenn Ihr Hauptaugenmerk auf dem Budget liegt, empfehlen wir Ihnen unseren Artikel zu diesem Thema die Senkung der Kosten pro Lead dank Formularumstellung Verknüpft diese Einstellungen mit Ihren Kampagnen.

Bewährte Methoden für die Formulargestaltung: Das Prüfraster in 10 Minuten

Hier ist die eingangs erwähnte Tabelle. Nehmen Sie Ihr Smartphone, öffnen Sie das Formular im privaten Browsermodus und markieren Sie jedes Kästchen. Jedes „Nein“ steht für einen Reibungspunkt, den Sie diese Woche beseitigen können.

1. Das Formular passt auf Mobilgeräten in eine Spalte.
2. Jedes Feld hat eine darüber sichtbare Beschriftung, die während der gesamten Dateneingabe angezeigt bleibt.
3. Das E-Mail-Feld öffnet eine Tastatur mit dem Zeichen "@" und verwendet keine Großbuchstaben.
4. Die Felder für Telefonnummer und Postleitzahl öffnen ein Tastenfeld.
5. Die Seite zoomt nicht, wenn Sie ein Feld berühren (minimale Schriftgröße 16px).
6. Der Browser bietet an, Name, E-Mail-Adresse und Telefonnummer automatisch auszufüllen.
7. Kein Feld erhält beim Laden der Seite automatisch den Fokus.
8. Bei einem mehrstufigen Formular wird der Fortschritt angezeigt („Schritt X von Y“).
9. Die Ränder der Felder bleiben auch bei maximalem Licht im Freien sichtbar.
10. Bei einem absichtlichen Fehler (E-Mail-Adresse ohne @-Zeichen) wird unterhalb des Feldes eine eindeutige Meldung angezeigt, nicht nur ein roter Rahmen.
11. Der Button beschreibt den Vorteil („Erhalten…“, „Bekommen…“) und nimmt die gesamte Breite ein.
12. Nach dem Anklicken werden zunächst ein Ladestatus und anschließend eine eindeutige Bestätigung angezeigt.

Eine Punktzahl von 10 oder höher (von 12) bedeutet, dass Ihr Design wahrscheinlich nicht Ihr Hauptproblem darstellt. Bei einer Punktzahl unter 8 sollten Sie mit den Punkten 3, 4 und 5 beginnen: Diese lassen sich am schnellsten beheben und betreffen alle Ihre mobilen Besucher.

Um von einer Basis auszugehen, die bereits die meisten dieser Kriterien erfüllt, stöbern Sie in unserem Angebot sofort einsatzbereite B2B-Formularvorlagen, oder schauen Sie sich an, wie andere Teams es gemacht haben Unsere Fallstudie zur Steigerung der Konversionsrate.

Häufig gestellte Fragen

Können wir die Beschriftungen in den Feldern durch den Beispieltext ersetzen?

Nein. Der Beispieltext (Platzhalter) verschwindet sofort nach der ersten Eingabe, sodass der Benutzer seine Eingabe nicht überprüfen kann. Außerdem bietet die hellgraue Farbe oft zu wenig Kontrast. Platzieren Sie eine gut sichtbare Beschriftung über dem Feld und verwenden Sie den Platzhalter für ein Formatierungsbeispiel.

Ist ein zweispaltiges Formular tatsächlich weniger effizient?

In den meisten Fällen ja. Eine CXL-Studie mit 702 Teilnehmern ergab eine um 13 % schnellere Bearbeitungsrate bei einspaltigen Feldern. Die einzigen sinnvollen Ausnahmen bilden zusammengehörige Feldpaare wie Postleitzahl und Ort, und dies auch nur am Computer.

Soll der Autofokus im ersten Bildfeld aktiviert werden?

Nicht auf Seiten, die außer dem Formular noch andere Inhalte enthalten. Der Autofokus führt zu ruckartigen Seitenansichten, blockiert das Scrollen mit der Tastatur und beeinträchtigt Bildschirmleseprogramme. Er ist nur sinnvoll, um den Titel des nächsten Schritts in einem mehrstufigen Formular hervorzuheben.

Welche Farbe eignet sich am besten für einen Formularbutton?

Es gibt keine allgemeingültige Regel. Entscheidend ist der Kontrast des Buttons zum restlichen Seiteninhalt und die Lesbarkeit des Textes (mindestens 4,5:1). Ein orangefarbener Button auf einer orangefarbenen Website fällt weniger auf als ein blauer Button auf derselben Website.

Führt ein mehrstufiges Formular immer zu besseren Konversionsraten?

Nein, nur wenn es gut gestaltet ist: ein oder zwei Fragen pro Bildschirm, eine einfache erste Frage, sichtbarer Fortschritt und die Kontaktdaten am Ende. Ein Formular mit drei Feldern muss nicht aufgeteilt werden.

Möchten Sie diese bewährten Methoden anwenden, ohne den Code zu verändern? Testen Sie Blastform kostenlos oder Demo buchen Lassen Sie Ihr aktuelles Formular von unserem Team überprüfen.