Wie wirkt sich Formulardesign auf die Conversion Rate aus?

Stellen Sie sich ein einfaches Szenario vor. Zwei Formulare erhalten denselben Traffic aus derselben Kampagne. Eines hat 4 Felder, das andere 11. Besucher füllen das kurze Formular also schneller aus. Deshalb brechen weniger von ihnen auf halbem Weg ab. Dieser Unterschied verändert Ihr Ergebnis, ohne dass Sie das Werbebudget anfassen.

Unser Team prüft zunächst das wahrscheinliche Gerät des Besuchers. Danach schauen wir uns den Zweck des Formulars an. Eine Supportanfrage und eine Angebotsanfrage brauchen zudem selten dieselben Felder. Weil der Bedarf unterschiedlich ist, gestalten wir jedes Formular für seine eigene Aufgabe.

Dieser Ratgeber behandelt sechs konkrete Elemente des Formulardesigns: Feldanzahl, Pflichtfeldkennzeichnung, Fehlermeldungen, Schrittanzahl, Mobiltastatur und Einwilligungsfeld. Jedes wirkt für sich zunächst klein. Zusammen verändern sie Ihre Conversion Rate spürbar.

Wie Verändert Die Feldanzahl Ihre Conversion Rate?

Jedes zusätzliche Feld bringt dem Besucher zunächst eine kleine Entscheidung. Diese Last summiert sich und kann zum Abbruch führen. Die erste Frage lautet daher immer: Können Sie den ersten Kontakt auch ohne diese Information starten?

Name, E-Mail und ein kurzes Nachrichtenfeld reichen für die meisten Angebotsformulare aus. Firmengröße oder Budget fragt Ihr Team also oft erst im Gespräch ab. Ein Feld zu entfernen verzögert dieses Gespräch kaum, in der Praxis steigt die Abschlussquote sogar.

Allerdings braucht nicht jede Branche weniger Felder. Ein Versicherungsangebot ohne Fahrzeugmodell zwingt das Team, dieselbe Frage im ersten Gespräch erneut zu stellen. Ziel ist also nicht null Felder, sondern das Streichen jener Felder, die Sie wirklich nicht brauchen.

Lässt sich ein Feld nicht ganz streichen, hilft gestuftes Sammeln. Sie erfassen zunächst im ersten Formular nur das Nötigste. Den Rest holen Sie später nach, im Gespräch oder im Kundenportal. So bleibt das erste Formular kurz, ohne dass Sie auf Daten verzichten.

Feldanzahl und kognitive Last behandeln wir ausführlicher in unserem Beitrag zu Formularfeldern und Conversion. Hier konzentrieren wir uns stattdessen auf die anderen Seiten des Formulardesigns, also Fehlermeldungen, Schrittanzahl und Mobiltastatur.

Was Macht Pflichtfelder Für Besucher Erkennbar?

Fällt die Pflichtfeldmarkierung nicht auf, sendet der Besucher das Formular ab und trifft erst dann auf eine Fehlermeldung. Das ist dann ein schlechter erster Eindruck. Die Kennzeichnung von Pflichtfeldern gehört somit zu den günstigsten und wirksamsten Teilen des Formulardesigns.

Sie fügen jedem Pflichtfeldlabel ein einheitliches Sternchen hinzu. Danach erklären Sie am Anfang des Formulars kurz, was dieses Sternchen bedeutet. Farbe allein reicht nicht aus, denn ein farbenblinder Besucher oder jemand mit einem Screenreader übersieht den Unterschied leicht.

Sind nur wenige Felder optional, funktioniert auch der umgekehrte Weg: Sie kennzeichnen nur die optionalen Felder mit "(optional)" und behandeln alles andere als Pflichtfeld. Welche Methode Sie also auch wählen, halten Sie sie im ganzen Formular konsequent durch.

Warum Sollte Eine Fehlermeldung Sofort Erscheinen?

Erfährt ein Besucher erst nach dem Absenden von seinem Fehler, muss er das ganze Formular erneut durchgehen. Eine sofortige Prüfung zeigt den Fehler zudem genau im Moment, in dem er entsteht. Das verkürzt die Zeit bis zur Korrektur deutlich.

Fehlt bei der E-Mail das @-Zeichen und verlässt der Besucher das Feld, bemerkt er den Fehler sofort, noch bevor er das Formular fertigstellt. So sinkt die Zahl der Überraschungsfehler, die erst nach dem Klick auf Senden auftauchen.

Der offizielle Leitfaden von Web.dev zu Zahlungs- und Adressformularen empfiehlt genau das: Daten während der Eingabe prüfen, nicht erst beim Absenden. Deshalb wendet unser Team diese Regel standardmäßig bei jedem Formularprojekt an.

Allerdings braucht nicht jedes Feld eine sofortige Prüfung. In einem langen Nachrichtenfeld wirkt ein Fehler bei jedem Tastenanschlag dagegen anstrengend. Dort prüfen Sie das Feld besser erst, wenn der Besucher es verlässt.

Wie Schreiben Sie Eine Gute Fehlermeldung?

Eine gute Fehlermeldung nennt das Problem und die Lösung in einem kurzen Satz. Ein vages "Fehler aufgetreten" gibt dem Besucher keine Richtung. "Telefonnummer muss 10 Ziffern haben" hilft deutlich mehr als "ungültige Nummer".

Sie zeigen die Meldung direkt neben dem betroffenen Feld, nicht als einzelne Liste am oberen Seitenrand. Auf dem Handy ist diese Liste zudem schwer dem richtigen Feld zuzuordnen. Auch der Ton zählt: Schreiben Sie hilfreich, nicht tadelnd.

Deaktivieren Sie den Sendebutton niemals, solange ein Fehler besteht. Ein deaktivierter Button wirkt auf den Besucher nämlich wie ein defekter Button. Stattdessen bleibt er aktiv, und ein Klick listet genau die fehlenden Felder auf.

Verzichten Sie in der Meldung auf technischen Fachjargon. "Regex stimmt nicht" bedeutet dem Besucher gar nichts. Eine einfache, alltägliche Sprache behebt denselben Fehler somit deutlich schneller.

Mehrstufiges Formular Oder Einseitiges Formular?

Diese Frage hat zunächst keine einzige richtige Antwort. Sie hängt von der Länge des Formulars und der Absicht des Besuchers ab. Ein kurzes Kontaktformular braucht also selten mehrere Schritte. Ein langes Angebotsformular wirkt dagegen oft leichter, wenn Sie es in Abschnitte teilen.

Stellen Sie sich zunächst ein Supportformular mit 5 Feldern vor. Es sollte auf einer Seite bleiben, denn mehrere Schritte bringen hier nur zusätzliche Klicks. Stellen Sie sich danach ein Projektangebot mit 12 Feldern vor. Das wirkt in drei sinnvollen Abschnitten deutlich weniger anstrengend.

Wie entscheiden Sie also? Konkret schaut unser Team meist auf Feldanzahl, erwartete Ausfülldauer und den Grund, warum der Besucher das Formular überhaupt geöffnet hat. Eine dringende Supportanfrage verlangt fast immer den kürzesten Weg.

Außerdem spielt die Trafficquelle eine Rolle. Ein Besucher aus einer Suchanzeige erwartet ohnehin einen längeren Weg, denn er sucht aktiv nach einer Lösung. Jemand, der zufällig beim Surfen auf das Formular stößt, will meist den schnellsten Weg stattdessen.

Welche Vor- Und Nachteile Haben Mehrstufige Formulare?

Ein mehrstufiges Formular zerlegt eine lange Liste in kleinere Abschnitte. Ein Fortschrittsbalken zeigt dem Besucher zudem, wo er gerade steht. Diese Struktur senkt die wahrgenommene Länge, vor allem bei langen Angebots- oder Bewerbungsformularen.

Das Risiko: Jeder Schritt schafft einen neuen Punkt zum Abbrechen. Ein Besucher, der Schritt eins beendet, bricht in Schritt zwei trotzdem noch ab. Deshalb gehören die einfachsten, kürzesten Felder in Schritt eins. So gleiten Besucher leichter in den Ablauf hinein.

Ab vier Schritten fragt sich der Besucher, wie viel noch kommt, und diese Unsicherheit kann die Abbruchrate erhöhen. Drei bis vier Schritte sind in der Praxis die sicherere Wahl.

Ein Fortschrittsbalken ist dabei also keine reine Dekoration. Er zeigt konkret, wie viele Schritte noch bleiben, und nimmt genau diese Unsicherheit. Kurze, klare Schritttitel helfen zusätzlich, denn der Besucher weiß dann vorab, was in jedem Schritt kommt.

Welche Vor- Und Nachteile Haben Einseitige Formulare?

Ein einseitiges Formular zeigt zunächst alle Felder auf einmal. Der Besucher bestimmt sein eigenes Tempo, und bei kurzen Formularen liefert das meist schneller ein Ergebnis. Es gibt keinen zusätzlichen Klick und keinen Seitenwechsel, also sinkt auch das Risiko eines technischen Fehlers.

Das Risiko zeigt sich, sobald die Feldanzahl wächst. Die Seite wirkt lang und anstrengend, und der Besucher verliert beim Scrollen den Überblick, wie viel noch übrig ist. Halten Sie ein einseitiges Formular deshalb auf eine moderate Feldanzahl begrenzt, meist fünf bis acht Felder.

Wo liegt die Grenze für einen Wechsel? Eine feste Zahl gibt es allerdings nicht. Allerdings lässt sich ein einseitiges Formular ab acht Feldern meist leichter abschließen, sobald Sie es in Schritte aufteilen.

Wie Vergleichen Sie Mehrstufige Und Einseitige Formulare?

Die folgende Tabelle stellt dazu beide Ansätze mit denselben Kriterien nebeneinander. So sehen Sie auf einen Blick, welches Format zu Ihrem Formular passt.

Beeinflusst Die Feldreihenfolge Die Conversion Rate?

Das erste Feld setzt den Ton für den Rest des Formulars. Ein Name oder eine einfache Auswahl erleichtert zunächst den Einstieg. Schwierigere Fragen können dagegen warten.

Setzen Sie Ihre schwierigste oder sensibelste Frage ans Ende, nicht in die Mitte. Ein Budgetbereich ist zum Beispiel dafür ein gutes Beleg. Bis der Besucher dort ankommt, hat er bereits Zeit investiert, also fällt ihm die Antwort leichter.

Zusammengehörige Felder zu gruppieren beschleunigt zudem das Lesen. Zuerst Kontaktdaten, dann Projektdetails, dann Budget: Diese Reihenfolge ist logisch und lässt den Besucher das Formular auf einen Blick erfassen.

Warum Ist Die Richtige Mobiltastatur So Wichtig?

Ein Besucher, der Ihr Formular am Handy ausfüllt, verliert Zeit bei der Suche nach der richtigen Tastatur. Erscheint bei einem Telefonfeld die Buchstabentastatur, muss er die Zifferntastatur erst manuell suchen.

Legen Sie für jedes Feld den passenden Eingabetyp fest, öffnet der Browser die richtige Tastatur automatisch. Beim Telefonfeld erscheint dann der Ziffernblock. Bei der E-Mail erscheint eine Tastatur mit @-Zeichen. Diese kleine Einstellung verändert die Conversion Rate auf Seiten mit viel mobilem Traffic spürbar. Auch bei einem Webadressfeld gilt dieselbe Logik, denn eine passende Tastatur hebt dort automatisch Schrägstrich und Punkt hervor.

Der Leitfaden von Web.dev zu Registrierungsformularen macht einen ähnlichen Punkt. Der richtige Eingabetyp öffnet nicht nur die richtige Tastatur, sondern lässt den Browser außerdem eine einfache Prüfung übernehmen.

• Telefonfeld: ein Eingabetyp, der den Ziffernblock öffnet.
• E-Mail: ein Eingabetyp mit einer Tastatur für das @-Zeichen.
• Webadresse: eine Tastatur, die / und . hervorhebt.
• Freitextfeld: die normale Buchstabentastatur.

Wie Richten Sie Die Tastatur Für Telefon Und E-Mail Ein?

Den passenden Eingabetyp für jedes Feld festzulegen dauert für Entwickler nur wenige Minuten. Die Wirkung bleibt trotzdem dauerhaft. Setzen Sie beim Telefonfeld einen numerischen Typ und bei der E-Mail einen passenden Typ, dann passt sich die Mobiltastatur automatisch an.

Kombinieren Sie diese Einstellung mit Autofill. Besucher tippen dieselben Angaben dann nicht mehr erneut. Dann schlägt der Browser Name, E-Mail und Telefonnummer aus früheren Eingaben vor.

Ein numerisches Feld bedeutet nicht automatisch eine Telefonnummer. Ein Preis- oder Mengenfeld braucht zum Beispiel ebenfalls ein Komma für Dezimalwerte. Wählen Sie den Eingabetyp daher danach, welche Zeichen das Feld wirklich braucht.

Am Desktop fällt dieser Unterschied zunächst kaum auf. Am Handy zählt dagegen jeder Tipp. Die richtige Tastatur füllt ein Feld in zwei Sekunden, die falsche macht aus demselben Feld eine Aufgabe von zehn Sekunden.

Wo Sollte Das Einwilligungsfeld Im Formular Stehen?

Platzieren Sie das Einwilligungsfeld direkt vor dem Sendebutton, gut sichtbar. Ein winziges Kästchen am unteren Seitenrand übersieht der Besucher dagegen leicht. Halten Sie auch den Text kurz und klar.

Das Feld darf also niemals vorausgefüllt ankommen. Der Besucher setzt das Häkchen selbst. Das ist somit sowohl fair als auch passend zu aktuellen Datenschutzerwartungen.

Soll es ein Feld sein oder mehrere? Für ein Gesundheits- oder Finanzformular lohnt sich oft sogar ein drittes, gesondertes Feld. Trennen Sie die Einwilligung für Werbung per E-Mail von der Zustimmung zu den Nutzungsbedingungen. Dann sieht der Besucher klar, wozu er genau zustimmt.

Wie Verlinken Sie Die Datenschutzerklärung Im Formular?

Setzen Sie über dem Formular oder neben dem Einwilligungsfeld einen kurzen Link zur Datenschutzerklärung. Den vollständigen Text müssen Sie deshalb nicht in das Formular packen. Der Linktext sollte klar sein, etwa "Datenschutzerklärung", niemals ein vages "hier klicken".

Zunächst behandeln wir dieses Thema als rechtliche Frage. Unser Team schlägt gerne eine praktische Platzierung für das Formulardesign vor. Allerdings sollten Sie den genauen Wortlaut immer mit einem Anwalt und den aktuellen Vorgaben der DSGVO abstimmen.

Übermittelt Ihr Formular Daten ins Ausland, zum Beispiel über ein Formulartool mit Sitz außerhalb der EU, brauchen Sie dafür meist einen zusätzlichen Hinweis. Prüfen Sie die aktuelle Vorgabe immer über eine offizielle Quelle.

Halten Sie den Text in derselben Sprache wie das Formular. Ein deutsches Formular bekommt deutschen Text, ein englisches Formular englischen Text. Gemischte Sprachen wirken auf Besucher dagegen schnell unordentlich.

Verändert Der Buttontext Ihre Conversion Rate?

Ein Sendebutton mit der Aufschrift "Senden" sagt dem Besucher nichts über den nächsten Schritt. Ein Text wie "Angebot anfordern" oder "Kostenloses Angebot erhalten" nennt den nächsten Schritt klar. Schon diese kleine Änderung senkt somit das gefühlte Risiko eines Klicks.

Unser Beitrag zu CTA Button Beispielen zeigt mit echten Beispielen, wie Buttontext die Conversion insgesamt formt.

Wie Sollten Sie Formularlabels Schreiben?

Jedes Feld braucht ein festes Label über oder neben sich. Das Label allein dem Platzhaltertext zu überlassen ist dagegen riskant. Es verschwindet, sobald der Besucher zu tippen beginnt, und er vergisst dann leicht, welches Feld das war.

Halten Sie den Labeltext kurz und klar. "Name" schlägt "Bitte tragen Sie hier Ihren vollständigen Namen ein" immer. Ein langes Label bringt stattdessen nur unnötiges Gewicht. Ein kurzes Label lässt den Besucher das Formular zudem schneller überblicken.

Das Label über dem Feld zu platzieren ist meist praktischer als daneben. Das Auge wandert dabei nämlich von oben nach unten mit weniger Pausen.

Beschleunigt Autofill Das Ausfüllen Eines Formulars?

Autofill im Browser füllt zusammen mit den richtigen Felddefinitionen wiederkehrende Angaben wie Name, E-Mail und Telefon mit einem Tipp. Das zählt vor allem für mobile Besucher, bei denen es die Ausfülldauer spürbar verkürzt.

Der Leitfaden von Web.dev zu Autofill empfiehlt, jedem Feld eine passende Definition zu geben. So schlägt der Browser den richtigen Wert vor. Dieser Schritt im Formulardesign fällt leicht unter den Tisch, seine Wirkung ist aber messbar. Gerade bei wiederkehrendem Traffic zahlt sich gutes Formulardesign an dieser Stelle doppelt aus.

Autofill zählt vor allem bei wiederkehrenden Besuchern. Wer auf Ihrer Seite bereits ein Formular ausgefüllt hat, sieht dieselben Angaben in Sekunden erneut. Eine zweite Angebotsanfrage wird dadurch somit deutlich weniger Aufwand. Das gilt besonders für Stammkunden, die Ihr Formular schon einmal ausgefüllt haben.

Welche Fehler Beim Formulardesign Kommen Am Häufigsten Vor?

Erstens ist der häufigste Fehler schlicht zu viele Felder. Knapp dahinter folgt eine Fehlermeldung, die gar nicht erscheint oder am oberen Seitenrand verschwindet. Ein dritter häufiger Fehler ist eine fehlende Einstellung der Mobiltastatur.

Diese Fehler treten dabei selten allein auf. Ein langes Formular trägt oft zu viele Felder, fehlende Fehlermeldungen und die falsche Mobiltastatur gleichzeitig. Eine kurze Checkliste erfasst die meisten davon in einem Durchgang. Planen Sie dafür ruhig einmal im Quartal einen kurzen Rückblick auf Ihr Formulardesign ein.

• Felder hinzufügen, die das Formular nicht wirklich braucht.
• Ein Formular ohne Pflichtfeldkennzeichnung veröffentlichen.
• Fehlermeldungen erst nach dem Absenden zeigen.
• Die Mobiltastatur bei Telefon und E-Mail nicht einstellen.
• Den Sendebutton mit einem vagen Text wie nur "Senden" belassen.

Was Soll Der Besucher Nach Dem Absenden Sehen?

Sieht der Besucher nach dem Klick auf Senden keine klare Bestätigung, zweifelt er, ob das Formular überhaupt angekommen ist. Mancher sendet es dann ein zweites Mal. Eine kurze Dankesnachricht oder eine eigene Bestätigungsseite nimmt diesen Zweifel.

Nennen Sie dann in dieser Bestätigung den nächsten Schritt. Sagen Sie, wann das Team antwortet und über welchen Kanal. Dieses kleine Detail beruhigt den Besucher dadurch und stärkt sein Vertrauen in die Marke.

Manche Formulare lösen zudem automatisch eine Kopie per E-Mail aus. Sieht der Besucher seine eigene Eingabe im Posteingang, gibt ihm das zusätzliche Sicherheit, dass das Formular wirklich verarbeitet wurde.

Wie Bauen Sie Vertrauenssignale In Das Formulardesign Ein?

Ein Besucher, der seine Daten wie an einen Fremden abgibt, bricht das Formular womöglich ab. Ein kurzer Vertrauenssatz neben dem Sendebutton nimmt zum Beispiel dieses Gefühl. "Wir geben Ihre Daten nicht an Dritte weiter" ist ein einfaches Beispiel dafür.

Ein Markenlogo, eine echte Telefonnummer oder ein kurzes Kundenzitat neben dem Formular signalisieren, dass ein echtes Team es liest. Halten Sie diese Botschaft also schlicht statt werblich. Ein ruhiger, ehrlicher Satz überzeugt mehr als ein lauter.

Zu viele Vertrauenssignale wirken allerdings schnell gegenteilig. Eine Wand aus Siegeln und Auszeichnungssymbolen neben dem Formular wirkt eher wie ein Werbebanner. Ein oder zwei klare Sätze schlagen somit ein Dutzend kleiner Symbole.

Wie Messen Sie Den Erfolg Einer Formularänderung?

Zunächst halten Sie einen Ausgangswert fest. Notieren Sie, wie viele Besucher das Formular erreichen und wie viele es absenden. Derselbe Zeitraum nach einer Änderung zeigt, ob die Verbesserung echt ist oder nur Zufall.

Ist der Traffic gering, lesen Sie die Ergebnisse deshalb mit Vorsicht. Eine einzelne Woche aus einer kleinen Stichprobe kann täuschen. Warten Sie auf mindestens einige Wochen Daten, dann steht Ihre Entscheidung auf einer stabileren Basis.

Deshalb trägt unser Team diese Messung meist auch in den Kampagnenbericht ein. So stehen Werbebudget und Formularleistung gemeinsam in einer Übersicht.

Wie Testen Sie Entscheidungen Beim Formulardesign?

Entscheidungen beim Formulardesign zu raten ist also riskanter, als sie zu messen. Zeigen Sie dazu zwei Versionen eines Formulars gleichzeitig verschiedenen Besuchergruppen. So sehen Sie klar, welche Version öfter fertig ausgefüllt wird.

Mit unserem Rechner für die Conversion Rate ermitteln Sie Ihre aktuelle Rate. Mit unserem Testrechner für zwei Versionen vergleichen Sie sie direkt. Behandeln Sie die Ergebnisse als Beispielszenario und prüfen Sie sie mit Ihren eigenen Daten.

Möchten Sie Ihr Formular gezielt zu einem Termin- oder Angebotsformular machen? Unser Beitrag zur Formularoptimierung behandelt die Feldreihenfolge je nach Formulartyp. Formulardesign allein reicht zudem nicht aus, denn die ganze Seite muss auf Conversion ausgerichtet sein, ein Thema unseres Beitrags zu conversionorientiertem Webdesign.

Halten Sie Ihre Testergebnisse also ebenfalls fest. Eine kleine Tabelle reicht dafür aus. So haben Sie einen Bezugspunkt für den nächsten Test, inklusive Datum und Höhe des Unterschieds.

Eine Kurze Checkliste Für Das Formulardesign Vor Der Veröffentlichung

Gehen Sie die folgenden Punkte vor der Veröffentlichung durch, das fängt die meisten häufigen Fehler ab.

1. Streichen Sie jedes nicht nötige Feld oder verschieben Sie es ins Gespräch.
2. Kennzeichnen Sie Pflichtfelder einheitlich und erklären Sie das am Anfang.
3. Zeigen Sie Fehlermeldungen direkt neben dem Feld, sofort bei der Eingabe.
4. Legen Sie den richtigen Eingabetyp für Telefon und E-Mail fest.
5. Platzieren Sie das Einwilligungsfeld direkt über dem Sendebutton, ohne Häkchen.
6. Schreiben Sie einen handlungsorientierten Buttontext, etwa "Angebot anfordern".

Wo Bekommen Sie Hilfe Beim Formulardesign?

Betrachten Sie Formulardesign als Teil Ihrer gesamten Website, nicht als eigenes Projekt. Ein Formular wirkt nämlich zusammen mit der Geschwindigkeit, der Struktur und den Vertrauenssignalen der restlichen Seite.

Unser Team prüft Ihr aktuelles Formular gern und schlägt konkrete Verbesserungen vor. Schauen Sie sich dafür unsere Webdesign Leistungen an. Jedes Projekt ist anders, deshalb richten sich unsere Vorschläge immer nach den Daten und dem Ziel Ihres eigenen Formulars.

Ein kleines Formular braucht also selten ein großes Budget. Gutes Formulardesign ist dabei vor allem eine Frage der Sorgfalt, nicht der Ausgaben. Weniger Felder, klarere Labels und bessere Fehlermeldungen liefern oft schneller ein Ergebnis als ein komplett neues Formular.