Mehrstufiges Formular oder einseitiges Formular: Was konvertiert besser?

Wir belassen es allerdings nicht bei einer allgemeinen Empfehlung. Talha Aslan und Team zeigen Ihnen hier die Checkliste, die wir in Formularprojekten nutzen: eine Entscheidungstabelle, Regeln für die Fortschrittsanzeige, den Schutz halb ausgefüllter Daten, Barrierefreiheit nach WCAG und das Tracking einzelner Schritte. Für die Auswahl der Felder bei Termin, Angebot und Demo haben wir einen eigenen Leitfaden: Formulare für Termin, Angebot und Demo optimieren.

Worin unterscheiden sich die beiden Formulararten genau?

Beim einseitigen Formular stehen also alle Felder auf einer Seite. Besucher scrollen, füllen aus und klicken auf einen einzigen Absendeknopf. Beim mehrstufigen Aufbau teilen Sie die Felder dagegen in logische Gruppen. Besucher wechseln mit „Weiter“ zur nächsten Gruppe und senden erst am Ende ab. Beide Varianten können also dieselben Daten erfassen. Der Unterschied liegt darin, wie Sie die geistige Last über die Zeit verteilen.

Denken Sie zum Beispiel an ein Angebotsformular mit zwölf Feldern. Auf einer Seite sieht der Besucher zwölf Kästchen auf einmal und schätzt den Aufwand deshalb oft größer ein, als er ist. Verteilen Sie die Felder auf drei Schritte, steht auf dem ersten Bildschirm nur die Frage: „Welche Leistung suchen Sie?“ Somit beginnt der Besucher mit einer kleinen Zusage. Allerdings stellt sich dieser Vorteil nicht automatisch ein, denn überflüssige Schritte, verlorene Daten und ein unklarer Fortschritt machen ihn schnell zunichte.

Wann ist ein einseitiges Formular die bessere Wahl?

Ein einseitiges Formular genügt meistens, wenn Sie wenige Felder haben, die Fragen unabhängig voneinander sind und der Besucher schon weiß, was er eintragen möchte. Kontaktformular, Newsletter und Rückrufbitte gehören zum Beispiel in diese Gruppe. Hier bringt ein zusätzlicher Klick auf „Weiter“ also nur Verzögerung.

• Sie haben höchstens fünf Felder mit kurzen Antworten.
• Keine Frage hängt von einer früheren Antwort ab.
• Die meisten Besucher füllen das Formular am Desktop in einer Sitzung aus.
• Das komplette Formular zu sehen, beantwortet die Frage nach dem Aufwand.
• Die Seite ist eine Landingpage mit genau einer Handlung.

Zudem erleichtert ein einseitiges Formular die Fehlerkorrektur. Nach dem Absenden sehen Besucher alle Fehler auf demselben Bildschirm und müssen nicht zurückblättern. Kurz gesagt: Bei kurzen Formularen birgt die einseitige Variante weniger Risiko, sowohl in der Entwicklung als auch in der Pflege.

Wann bringt ein mehrstufiges Formular echte Vorteile?

Ein mehrstufiges Formular spielt seine Stärke aus, wenn die Fragen eine natürliche Reihenfolge haben und eine Antwort die nächsten Fragen bestimmt. Versicherungsangebote, Projektbriefings, Bewerbungen und Produktkonfiguratoren sind dafür typische Beispiele, denn dort hängt vieles voneinander ab. Würden Sie dort jede Möglichkeit auf eine Seite packen, sähen Besucher zahlreiche Felder, die sie gar nicht betreffen.

• Sie haben sechs oder mehr Felder, die sich sinnvoll gruppieren lassen.
• Sie nutzen bedingte Logik: Firmenkunden sehen Felder zur Umsatzsteuer, Privatkunden andere Felder.
• Mobile Zugriffe überwiegen, und langes Scrollen erhöht die Fehlerquote.
• Sie möchten mit einer leichten, interessanten Einstiegsfrage beginnen.
• Teildaten nach jedem Schritt haben für Ihren Vertrieb einen echten Wert.

Mehr Schritte lösen allerdings für sich genommen nichts. Jeder Schritt ist ein neuer Entscheidungspunkt, an dem sich der Besucher fragt: „Lohnt sich das noch?“ Deshalb sollten Sie die Zahl der Schritte an den natürlichen Gruppen Ihrer Inhalte ausrichten und die Felder nicht willkürlich aufteilen.

Welche Entscheidungstabelle hilft bei der Wahl für ein mehrstufiges Formular?

Wir empfehlen, die folgende Tabelle zu Projektbeginn gemeinsam im Team auszufüllen. Markieren Sie dann in jeder Zeile die Spalte, die zu Ihrem Formular passt. Häufen sich die Markierungen rechts, wählen Sie den mehrstufigen Aufbau; häufen sie sich links, bleiben Sie also bei einer Seite. Die Tabelle ist allerdings nur ein Startrahmen aus der Praxis, keine feste Regel.

Bleiben Sie unentschieden, vergleichen Sie beide Varianten in einem A/B Test. Ob Ihre Stichprobe groß genug ist, prüfen Sie mit unserem A/B Test Rechner. Denn eine Entscheidung auf Basis von wenig Traffic ist oft nur Zufall.

Wann sollten Sie sich bei Ihrem Formular Unterstützung holen?

Sobald bedingte Logik, Zwischenspeicherung, CRM Anbindung und Ereignistracking zusammenkommen, wird ein Formular zu einem kleinen Softwareprojekt. Ein Formularplugin deckt einen Teil davon ab; Barrierefreiheit und Analyse bleiben allerdings oft halb fertig. Soll das Formular außerdem zum restlichen Auftritt passen, planen Sie es am besten von Anfang an mit, wenn Sie eine Firmenwebsite erstellen lassen. So entstehen Felder, Dankeseite und Messkonzept gemeinsam, und Sie müssen später nichts flicken.

Wie gruppieren Sie die Schritte eines mehrstufigen Formulars?

Eine gute Gruppierung folgt der Reihenfolge im Kopf des Besuchers. Zuerst kommt „Was brauchen Sie?“, dann „die Details“ und zuletzt „Wie erreichen wir Sie?“. Stehen die Kontaktdaten am Ende, sieht der Besucher zunächst einen Nutzen, bevor er persönliche Daten preisgibt. Zudem braucht jeder Schritt eine eigene Überschrift, die seinen Zweck nennt.

1. Listen Sie alle Felder auf und streichen Sie jene, die Sie nicht wirklich brauchen.
2. Ordnen Sie die übrigen Felder drei oder vier Themengruppen zu.
3. Bringen Sie die Gruppen in die Reihenfolge der Entscheidung: Bedarf, Umfang, Zeitplan, Kontakt.
4. Setzen Sie bedingte Felder direkt in den Schritt nach der auslösenden Antwort.
5. Geben Sie jedem Schritt eine kurze, aussagekräftige Überschrift.
6. Zeigen Sie am Ende eine Zusammenfassung mit der Möglichkeit, Angaben zu ändern.

Bei einem Briefing für ein Webprojekt könnte Schritt eins zum Beispiel „Projektart“ heißen, Schritt zwei „Seiten und Funktionen“, Schritt drei „Zeitplan“ und Schritt vier „Kontaktdaten“. Somit konzentriert sich der Besucher auf jedem Bildschirm auf ein Thema und kann das Ende des Formulars absehen.

Wie gestalten Sie die Fortschrittsanzeige?

Die Fortschrittsanzeige sagt dem Besucher, wo er steht und wie viel noch fehlt. Die Web Accessibility Initiative des W3C empfiehlt, bei mehrseitigen Formularen den Fortschritt sowohl visuell als auch als Text anzuzeigen, etwa „Schritt 2 von 4“ in der Überschrift. Details finden Sie im W3C Tutorial zu mehrseitigen Formularen.

• Zeigen Sie die Gesamtzahl der Schritte von Anfang an; überraschende Schritte kosten Vertrauen.
• Halten Sie die Schrittnamen kurz und zeigen Sie mobil nur Nummer und aktuellen Namen.
• Verlassen Sie sich nicht allein auf Farbe, sondern kennzeichnen Sie den aktiven Schritt auch im Text.
• Ändert die bedingte Logik die Zahl der Schritte, aktualisieren Sie die Anzeige sofort.
• Können Besucher erledigte Schritte anklicken, machen Sie das deutlich sichtbar.

Bei der Wahl zwischen Prozentbalken und nummerierter Schrittliste hilft ein Blick auf die Zahl der Schritte. Bis zu vier Schritten ist eine nummerierte Liste meist verständlicher. Ändert sich die Schrittzahl je nach Antwort, kann ein Prozentbalken dagegen in die Irre führen, weil er scheinbar zurückspringt.

Wie schützen Sie Daten, wenn jemand mittendrin abbricht?

Datenverlust ist das am häufigsten übersehene Risiko im mehrstufigen Aufbau. Ein Besucher tippt zum Beispiel versehentlich auf „Zurück“, lädt die Seite neu oder das Smartphone sperrt sich. Muss er danach alles neu eingeben, gibt er höchstwahrscheinlich auf. Behandeln Sie den Schutz der Zwischendaten deshalb als festen Teil des Designs.

1. Speichern Sie eingegebene Werte bei jedem Schrittwechsel vorübergehend in der Browsersitzung.
2. Behandeln Sie die Zurücktaste des Browsers als Schrittwechsel, nicht als Verlassen der Seite.
3. Lädt jemand neu, stellen Sie den aktuellen Schritt und die Werte wieder her.
4. Bieten Sie bei langen Formularen die Option „Speichern und später fortsetzen“ an.
5. Speichern Sie sensible Felder wie Ausweisnummer oder Zahlungsdaten nie im Browser.
6. Löschen Sie die Zwischendaten nach dem erfolgreichen Absenden.

Teildaten auf dem Server zu speichern, ist eine eigene Entscheidung. Schon Schritt eins kann für den Vertrieb nützlich sein, weil er den Bedarf zeigt. Allerdings verlangt die Speicherung nicht abgesendeter personenbezogener Daten nach der DSGVO eine klare Information und einen festgelegten Zweck. Dies ist keine Rechtsberatung; klären Sie Ihre Datenschutzerklärung daher vorab mit Ihrer Rechtsberatung.

Warum ist die doppelte Abfrage derselben Angaben ein Problem?

Mit WCAG 2.2 kam das Erfolgskriterium „Redundant Entry“ hinzu. Es verlangt, dass Angaben, die ein Nutzer im selben Vorgang bereits gemacht hat, automatisch übernommen oder zur Auswahl angeboten werden, von wenigen Ausnahmen wie Sicherheitsgründen abgesehen. Ein mehrstufiges Formular fällt also direkt unter dieses Kriterium. Den genauen Wortlaut erklärt die W3C Erläuterung zu Redundant Entry.

Haben Sie zum Beispiel in Schritt zwei die Rechnungsadresse abgefragt, bieten Sie in Schritt vier für die Lieferadresse die Option „Wie Rechnungsadresse“ an. Ebenso sollten Besucher ihre E-Mail auf der Zusammenfassung nicht erneut eintippen müssen. Somit erfüllen Sie die Anforderung an die Barrierefreiheit und schonen gleichzeitig die Geduld Ihrer Besucher.

Wie sollte sich ein mehrstufiges Formular auf dem Smartphone verhalten?

Mobil ist der schrittweise Aufbau meist im Vorteil, denn langes Scrollen auf einem kleinen Bildschirm ermüdet und führt zu Fehlern. Einige Details entscheiden allerdings, ob dieser Vorteil erhalten bleibt. Der Weiter Knopf gehört dorthin, wo der Daumen ihn bequem erreicht; mehr dazu lesen Sie in unserem Leitfaden zur Daumenzone.

• Zeigen Sie pro Schritt nur so viele Felder, wie auch bei geöffneter Tastatur auf den Bildschirm passen.
• Lösen Sie die passende Tastatur aus: Ziffern für Telefonnummern, die E-Mail Tastatur für Adressen.
• Blockieren Sie die automatische Vervollständigung des Browsers nicht, sondern kennzeichnen Sie Name, E-Mail und Adresse korrekt.
• Springen Sie bei jedem Schrittwechsel zur Überschrift des neuen Schritts.
• Trennen Sie Zurück und Weiter optisch und halten Sie genau eine klare Hauptaktion.

Der Kurs Learn Forms auf web.dev vom Google Team hinter web.dev ist eine gute Referenz für Autofill und Eingabetypen. Zudem empfehlen wir, jedes Formular auf einem echten Gerät zu testen, bevor es live geht.

Worauf achten Sie bei der Barrierefreiheit nach WCAG?

Barrierefreiheit verlangt beim mehrstufigen Aufbau mehr Sorgfalt als bei einer einzelnen Seite, weil jeder Schrittwechsel für Screenreader Nutzer einen Kontextwechsel bedeutet. Die allgemeinen Grundsätze und das Barrierefreiheitsstärkungsgesetz behandeln wir in unserem Beitrag zur barrierefreien Website nach WCAG und BFSG. Hier listen wir also nur die formularspezifischen Punkte auf.

• Jedes Feld braucht ein sichtbares Label, das auch im Code verknüpft ist; ein Platzhaltertext ersetzt kein Label.
• Setzen Sie beim Schrittwechsel den Fokus auf die neue Überschrift und aktualisieren Sie den Seitentitel.
• Beschreiben Sie Fehler als Text und nennen Sie Feld und Ursache.
• Verzichten Sie auf Zeitlimits oder erlauben Sie eine Verlängerung.
• Jeder Schritt muss sich allein mit der Tastatur abschließen lassen.
• Vermitteln Sie den Fortschritt als Text, nicht nur über Farbe.

Für Fehlermeldungen bietet die W3C Erläuterung zu Error Identification einen klaren Rahmen. Kurz gesagt: Niemand sollte zum nächsten Schritt wechseln, ohne das fehlerhafte Feld und den Lösungsweg zu sehen. Gleichzeitig darf ein Fehler die übrigen Angaben nie löschen.

Wie funktionieren Validierung und Fehlermeldungen über mehrere Schritte?

Validieren Sie Schritt für Schritt. Klickt jemand auf „Weiter“, prüfen Sie die Felder dieses Schritts und zeigen Fehler auf demselben Bildschirm. Somit landet niemand in Schritt vier und wird dann wegen eines Fehlers in Schritt eins zurückgeschickt.

Übertreiben Sie die Livevalidierung allerdings nicht. Eine Meldung „Ungültige E-Mail“, bevor jemand fertig getippt hat, wirkt unhöflich. Die Prüfung beim Verlassen des Felds oder beim Schrittwechsel ist deshalb ausgewogener. Formulieren Sie zudem hilfreich statt vorwurfsvoll: „Bitte geben Sie die Telefonnummer mit Vorwahl ein“ statt „Falsche Eingabe“.

Verzichten Sie außerdem nicht auf die serverseitige Prüfung. Die Kontrolle im Browser dient dem Nutzererlebnis; für Sicherheit und Datenintegrität braucht es die letzte Prüfung auf dem Server. Diese doppelte Absicherung gilt auch für einseitige Formulare. Im schrittweisen Ablauf müssen Sie allerdings für jeden Schritt eine eigene Prüfung planen.

Wie tracken Sie ein mehrstufiges Formular Schritt für Schritt in GA4?

Der größte Vorteil des schrittweisen Aufbaus ist die Messbarkeit. Ein einseitiges Formular kennt zum Beispiel nur „abgesendet“ oder „nicht abgesendet“. Ein mehrstufiger Ablauf zeigt dagegen, wo Besucher aussteigen. Google Analytics 4 (GA4) erlaubt dafür eigene Ereignisse; das Ereignismodell beschreibt die GA4 Hilfe zu Ereignissen.

1. Senden Sie ein Startereignis, sobald das Formular erscheint.
2. Danach senden Sie bei jedem abgeschlossenen Schritt denselben Ereignisnamen mit einem Parameter für die Schrittnummer.
3. Senden Sie bei einer Fehlermeldung ein eigenes Ereignis mit dem Feldnamen, nie mit dem eingegebenen Wert.
4. Schließlich senden Sie nach dem erfolgreichen Absenden ein Abschlussereignis und markieren Sie es als Schlüsselereignis.
5. Beobachten Sie dann in den Explorationen von GA4 mit einer Trichteransicht die Abbrüche zwischen den Schritten.

Personenbezogene Daten wie Name, E-Mail oder Telefonnummer gehören nie in Ereignisparameter. Die Logik dahinter erklären wir in unserem Beitrag über Micro Conversions und GA4 Tracking.

Wie lesen Sie Ihre Schrittdaten richtig?

Suchen Sie zunächst den Schritt mit dem größten Verlust. Um zu verstehen, warum Besucher dort abbrechen, sehen Sie sich dann die Fehlerereignisse pro Feld und Sitzungsaufzeichnungen an. Häufen sich die Abbrüche etwa bei der Budgetfrage, schreckt die Frage selbst vielleicht ab. In diesem Fall helfen Spannen als Auswahl oder ein optionales Feld.

Betrachten Sie die Schrittdaten außerdem zusammen mit der Conversion Rate. Weniger Schritte können zwar mehr Abschlüsse bringen, aber die Qualität der Anfragen senken. Mit unserem Conversion Rate Rechner rechnen Sie dabei einheitlich. Ihr eigentliches Ziel ist also nicht das ausgefüllte Formular, sondern die qualifizierte Anfrage, aus der ein Auftrag wird. Legen Sie deshalb das Feedback Ihres Vertriebs neben die Schrittdaten und lesen Sie beides gemeinsam.

Gibt es eine Mischform aus beiden Ansätzen?

Ja, beide Ansätze lassen sich kombinieren. In manchen Projekten gestalten wir den ersten Schritt als eine einzige, einfache Frage und zeigen die übrigen Felder dann auf dem zweiten Bildschirm als eine Seite. Somit holen Sie Besucher mit geringer Hürde ab, ohne eine lange Kette von Schritten aufzubauen.

Eine weitere Mischform ist das Akkordeon: Alle Abschnitte stehen auf einer Seite, aber nur der aktive ist geöffnet. Das erleichtert die Fehlerkorrektur, denn Besucher öffnen einen früheren Abschnitt, ohne die Seite zu verlassen. Damit das Akkordeon barrierefrei bleibt, sollten die Abschnittsüberschriften allerdings als Schaltflächen ausgezeichnet sein und ihren Zustand mitteilen.

Wie beeinflussen Ladezeit und Performance das Formular?

Schrittweise Formulare laufen meist mit JavaScript, und eine schwere Formularbibliothek kann die Seite bremsen. Warten Besucher, bevor sie überhaupt Schritt eins sehen, verliert Ihr durchdachter Aufbau seinen Wert. Messen Sie die Formularkomponente deshalb separat und entfernen Sie überflüssige Bibliotheken.

• Liefern Sie Schritt eins als fertiges HTML vom Server und laden Sie spätere Schritte erst bei Bedarf.
• Verzichten Sie auf schwere Animationen und respektieren Sie die Einstellung für reduzierte Bewegung.
• Sperren Sie den Absendeknopf kurz und zeigen Sie den Status „Wird gesendet“; so vermeiden Sie doppelte Anfragen.

Die Gesamtgeschwindigkeit der Seite prüfen Sie mit der Methode aus unserem Beitrag zum Lighthouse Test der Website Performance. Kurz gesagt bringt ein einfaches, schnelles Formular mehr Anfragen als ein cleveres, langsames.

Wie richten Sie die bedingte Logik ein?

Bedingte Logik ist das Regelwerk, das die nächsten Fragen anhand einer Antwort verändert. Sie ist die eigentliche Stärke des schrittweisen Ablaufs. Schlecht umgesetzt, führt sie Besucher allerdings in eine Sackgasse. Zeichnen Sie die Regeln deshalb zuerst als Ablaufdiagramm und prüfen Sie, ob jeder Zweig in einem absendbaren Formular endet.

• Knüpfen Sie jeden Zweig an genau eine auslösende Frage und vermeiden Sie verschachtelte Bedingungen.
• Ändert jemand eine frühere Antwort, leeren Sie die Felder, die nicht mehr gelten.
• Nehmen Sie ausgeblendete Felder aus der Validierung, denn ein unsichtbares Pflichtfeld blockiert das Absenden.
• Halten Sie die Testfälle in einer Tabelle fest, sobald die Zahl der Zweige wächst.

Antwortet jemand zum Beispiel auf „Neue Website oder Relaunch?“ mit „Relaunch“, fragen Sie nach der aktuellen Adresse. Bei „Neue Website“ erscheint dieses Feld dagegen gar nicht, weil es keinen Sinn ergibt. Ändert der Besucher seine Antwort später, leeren Sie das Feld und entfernen es auch aus der Zusammenfassung. Somit erhält Ihr Vertrieb nie einen widersprüchlichen Eintrag.

Was sollten Labels und Hilfetexte im Formular sagen?

Die Texte eines Formulars sind so wichtig wie die Felder selbst. Labels sollten kurz und eindeutig sein, Hilfetexte erklären dagegen, warum Sie fragen. Denn sobald ein Besucher denkt „Wozu brauchen die das?“, zögert er. Ein einziger Satz zur Begründung räumt diesen Zweifel oft aus.

Formulieren Sie außerdem die Knöpfe nach der Handlung. Statt „Weiter“ passt etwa „Umfang festlegen“ oder „Zu den Kontaktdaten“, denn so wissen Besucher, was auf dem nächsten Bildschirm kommt. Für den letzten Knopf eignet sich eine Formulierung, die das Ergebnis nennt, zum Beispiel „Angebot anfordern“ statt „Absenden“. Grundregeln für Mikrotexte finden Sie in unserem Beitrag Was ist UX Writing.

Kennzeichnen Sie Pflichtfelder und optionale Felder ebenfalls klar. Sind die meisten Felder Pflicht, wirkt es aufgeräumter, nur die optionalen zu markieren. Erklären Sie die Kennzeichnung in jedem Fall einmal am Anfang und verlassen Sie sich nicht allein auf ein Sternchen.

Beispielszenario: Wie teilen Sie ein Angebotsformular sinnvoll auf?

Das folgende Szenario ist kein echter Kundenfall; wir haben es konstruiert, um die Methode zu zeigen. Angenommen, ein B2B Dienstleister hat ein Angebotsformular mit vierzehn Feldern: Vorname, Nachname, Firma, Position, E-Mail, Telefon, Leistungsart, Branche, Budgetrahmen, Starttermin, aktuelle Website, Ziele, „Wie haben Sie von uns erfahren?“ und ein Notizfeld.

1. Stellen Sie zuerst die Felder Position und „Wie haben Sie von uns erfahren?“ infrage und streichen Sie sie, wenn der Vertrieb sie nicht wirklich braucht.
2. Setzen Sie in Schritt eins nur Leistungsart und Branche, beides als Auswahl ohne Tippen.
3. Fragen Sie in Schritt zwei nach Zielen und aktueller Website; die Adresse erscheint nur bei einem Relaunch.
4. Bieten Sie in Schritt drei Budgetrahmen und Starttermin als Optionen an.
5. Erfragen Sie in Schritt vier die Kontaktdaten und ein optionales Notizfeld.
6. Zeigen Sie zuletzt eine Zusammenfassung mit einem Bearbeiten Link neben jedem Abschnitt.

In diesem Aufbau durchlaufen Besucher die ersten beiden Schritte allein durch Klicken. Der Einstieg fällt daher leicht, und die aufwendigsten Felder kommen erst, wenn der Besucher schon Zeit investiert hat. Nach dem Livegang passen Sie die Struktur dann anhand der Schrittdaten weiter an.

Wohin gehören Datenschutzhinweis und Vertrauenselemente?

Unmittelbar bevor Besucher persönliche Daten eingeben, brauchen sie Sicherheit. Platzieren Sie den kurzen Datenschutzhinweis und den Link zur Datenschutzerklärung deshalb in dem Schritt, der die Kontaktdaten abfragt, nahe am Absendeknopf. Ein langer Rechtstext oben im Formular wird dagegen selten gelesen und sorgt nur für Unruhe.

Übertreiben Sie es allerdings nicht mit Vertrauenssymbolen. Ein einziger Satz wie „Wir nutzen Ihre Angaben nur zur Beantwortung Ihrer Anfrage“ überzeugt mehr als eine Wand voller Siegel. Brauchen Sie eine gesonderte Einwilligung für Werbung, bieten Sie sie als eigenes, nicht vorangekreuztes Kästchen an und machen Sie das Absenden nicht davon abhängig. Weitere Elemente beschreiben wir in unserem Beitrag zu Vertrauenselementen auf der Website.

Welche Fehler machen ein mehrstufiges Formular unbrauchbar?

In der Praxis sehen wir auf ganz unterschiedlichen Websites immer wieder dieselben Fehler. Die folgende Liste fasst daher die wichtigsten Fallen zusammen, die Sie vor dem Livegang prüfen sollten.

• Pro Schritt nur ein Feld zeigen und so die Zahl der Schritte unnötig aufblähen.
• Die Gesamtzahl der Schritte verschweigen oder später überraschend Schritte einfügen.
• Eingaben löschen, sobald jemand auf „Zurück“ tippt.
• Kontaktdaten schon in Schritt eins verlangen, bevor der Besucher einen Nutzen sieht.
• Am Ende keine Zusammenfassung und keine Korrekturmöglichkeit anbieten.
• Eine vage Dankeseite zeigen, die nicht sagt, wann eine Antwort kommt.

Die meisten dieser Fehler lassen sich mit wenigen Minuten Prüfung in der Designphase vermeiden. Bemerken Sie sie erst nach dem Livegang, kosten sie Sie dagegen verlorene Anfragen und zusätzliche Entwicklungszeit.

Welche Checkliste sollten Sie vor dem Livegang abarbeiten?

Die folgende Checkliste eignet sich für einseitige wie für mehrstufige Formulare. Testen Sie jeden Punkt zudem auf einem echten Smartphone und am Desktop.

1. Füllen Sie das gesamte Formular nur mit der Tastatur aus.
2. Hören Sie die Schrittwechsel mit einem Screenreader an: Liest er die neue Überschrift vor?
3. Geben Sie in jedem Schritt absichtlich falsche Daten ein und prüfen Sie die Meldungen.
4. Drücken Sie die Zurücktaste des Browsers und laden Sie die Seite neu: Sind die Daten noch da?
5. Testen Sie jede Option der bedingten Zweige: Stimmt die Fortschrittsanzeige?
6. Prüfen Sie im Echtzeitbericht von GA4, ob jedes Schrittereignis ankommt.
7. Kontrollieren Sie, ob nach dem Absenden die Benachrichtigung und der CRM Eintrag entstehen.

Ist die Liste abgehakt, ist Ihr Formular also für Nutzer und Messung bereit. Fällt ein Punkt durch, verschieben Sie den Livegang, denn eine spätere Korrektur kostet immer mehr. Beobachten Sie zudem in den ersten Wochen täglich die Schrittereignisse. Sehen Sie einen unerwarteten Einbruch, prüfen Sie zunächst auf einen technischen Fehler und ändern erst danach die Inhalte.

Warum ist die Dankeseite so wichtig?

Die Dankeseite ist der letzte Schritt Ihres Formulars, und viele Teams vernachlässigen sie. Nach dem Absenden möchten Besucher wissen, wie es weitergeht: Ist die Anfrage angekommen, wer meldet sich und wann? Eine Seite, die diese Fragen beantwortet, schafft Vertrauen und verhindert, dass dieselbe Anfrage zweimal eintrifft.

Außerdem eignet sich die Dankeseite gut, um Besucher zum nächsten Schritt zu führen. Nach einer Angebotsanfrage können Sie zum Beispiel auf eine Fallstudie zu ähnlichen Projekten verlinken. Wie Sie eine solche Seite aufbauen, zeigen wir im Leitfaden Case Study Seite erstellen.

Was bringt professionelle Unterstützung beim Formulardesign?

Das Formular gehört zu den Teilen einer Website, die am meisten leisten, und wird trotzdem in vielen Projekten zuletzt bedacht. Planen Sie Entscheidungstabelle, Gruppierung, Datenschutz, Barrierefreiheit und Ereignistracking zusammen, bleibt das Formular für Besucher leicht und liefert Ihrem Vertrieb einen messbaren Kanal. In Formularprojekten prüfen wir zunächst die vorhandenen Daten, entscheiden dann über die Struktur und gehen erst danach an die Gestaltung. Möchten Sie das Formular als Teil des gesamten Auftritts angehen, finden Sie die Einzelheiten auf unserer Seite für professionelles Webdesign. Ergebnisse garantieren wir nicht; wir zeigen Ihnen allerdings mit Daten, was wir in welchem Schritt geändert haben und warum.