Zwei von drei Formular-Einsendungen kommen heute vom Handy. Trotzdem gestalten die meisten Websites ihre Formulare am Desktop und quetschen sie dann auf einen Handybildschirm. Das Ergebnis: Formulare, die frustrierend auszufüllen sind, häufiger abgebrochen werden und weniger Besucher in Kunden verwandeln.
Mobiles Formular-Design heißt nicht, Desktop-Formulare kleiner zu machen. Es heißt, das gesamte Erlebnis für eine Person neu zu denken, die einen 6-Zoll-Bildschirm hält, mit dem Daumen tippt und in einem wackelnden Bus oder einem vollen Café sitzt. Alles ändert sich. Der verfügbare Platz schrumpft. Die Tippflächen werden dicker. Die Tastatur klappt hoch und verdeckt das halbe Formular. Der Besucher wird unterbrochen und geht.
Mobile-first Formular-Design heißt, jedes Detail eines Formulars darauf zu optimieren, wie Menschen Handys tatsächlich nutzen. Dieses Kapitel zeigt die konkreten Änderungen, die Abbrüche senken, das Ausfüllen beschleunigen und mehr mobile Besucher zu Leads oder Kunden machen.
Für den Desktop gestaltete mobile Formulare verlieren Kunden
Sieh dir an, was passiert, wenn jemand ein Formular auf dem Handy statt am Desktop öffnet. Der Handy-Nutzer hat weniger Bildschirmplatz, weniger Geduld und mehr Ablenkung. Er jongliert mit dem Kontext. Seine Aufmerksamkeit ist zerstückelt. Eine unbequeme Interaktion, und er geht.
Die Daten belegen das. Bei Formularen mit schlechtem mobilem Design springen die Abbruchraten im Vergleich zum Desktop um 20 bis 40 Prozentpunkte. Ein einziges schlecht platziertes Feld kann eine Welle von Abbrüchen auslösen. Eine kleine Schaltfläche, die schwer zu treffen ist, erzeugt Reibung, die sich über Tausende Einsendungen vervielfacht.
Was aber die meisten Marken übersehen: Die Optimierung fürs Handy bremst Desktop-Nutzer nicht aus. Ein Formular, das zuerst für das Handy gestaltet und dann für größere Bildschirme erweitert wird, funktioniert für alle besser. Straffere Layouts. Bessere Abstände. Klarere Hierarchie. Das sind keine mobilen Kompromisse, sondern Designverbesserungen.
Die Herausforderung beim mobilen Formular-Design: Was wirklich anders ist
Mobile Formulare stehen vor Einschränkungen, die Desktop-Formulare nicht haben. Wenn du verstehst, was sich ändert, gestaltest du klüger:
Der Bildschirmplatz ist begrenzt
Ein Handybildschirm zeigt etwa 30 bis 40 % der Inhalte, die ein Desktop-Monitor auf einmal darstellen kann. Jedes Element braucht physischen Platz. Zusätzliche Labels, Anweisungen, Hinweise und Formularfelder konkurrieren um dieselbe winzige Fläche. Die Tastatur erscheint und verkleinert den verfügbaren Platz noch weiter. Lange Absätze mit Anleitungstext verschwinden aus dem Bild.
Tippflächen sind größer und weniger präzise
Ein Finger ist 40 bis 50 Pixel breit. Ein Mauszeiger ist 1 Pixel. Das heißt, Schaltflächen, Kontrollkästchen, Optionsfelder und Linkflächen müssen auf dem Handy deutlich größer sein, um leicht antippbar zu sein. Die von den großen Handy-Plattformen empfohlenen Standardgrößen sind mindestens 44x44 Pixel. Ist es zu klein, verfehlen Nutzer das Ziel, werden frustriert und brechen das Formular ab.
Tastaturen übernehmen die Kontrolle
Tippt ein Nutzer auf dem Handy auf ein Formularfeld, fährt die Tastatur hoch und verdeckt den halben Bildschirm. Manche Felder lösen unterschiedliche Tastaturen aus: E-Mail-Felder zeigen das @-Zeichen, Zahlenfelder blenden Buchstaben aus, Datumsfelder öffnen Kalenderauswahlen. Jede Tastaturart verändert, was der Nutzer sieht und wie er interagiert. Gestalte für jede einzeln.
Der Kontext wechselt ständig
Desktop-Nutzer setzen sich hin und füllen ein Formular ungestört aus. Mobile Nutzer füllen Formulare im Zug, im Laden, zwischen anderen Apps aus. Sie bekommen eine Benachrichtigung, wechseln die App, kommen fünf Minuten später zurück. Das Scrollen fühlt sich endlos an. Die Formularfelder verschwimmen. Jeder Schritt, der Erinnerung oder Kontextwechsel verlangt, lässt Leute aussteigen.
Eine Hand bedient das Gerät
Die meisten Handy-Nutzer halten das Gerät mit einer Hand und navigieren mit dem Daumen. Schaltflächen unten rechts sind erreichbar. Schaltflächen oben in einem hohen Formular brauchen eine zweite Hand oder eine unbequeme Streckung. Labels links neben den Feldern sind schwerer zu lesen, während man die Daumenposition hält. Gestalte für die Bedienung mit einer Hand.
Regel 1: Verringere die Zahl der Felder, nach denen du fragst
Jedes Feld, nach dem du fragst, ist ein weiteres Tippen, eine weitere Entscheidung, eine weitere Chance zu gehen. Das Formular braucht nicht alles. Es braucht nur, was du wirklich für die Nachverfolgung nutzt.
Sieh dir deine tatsächlichen Anwendungsfälle an. Ein Kontaktformular braucht bei der ersten Einsendung selten zweite Vornamen, Unternehmensgröße oder Branche. Ein Buchungsformular braucht nicht den Mädchennamen der Mutter eines Kunden. Eine Newsletter-Anmeldung braucht am ersten Tag nicht die Postleitzahl. Du kannst später nach mehr Informationen fragen, wenn du schon Vertrauen aufgebaut hast.
Ein großer Reiseanbieter testete dieses Prinzip und sparte jährlich 12 Millionen $, indem er optionale Felder aus seinem Buchungsformular entfernte. Nutzer füllten mehr Formulare aus. Es gab mehr Conversions. Die Vereinfachung zahlte sich aus.
Beginne mit dem absoluten Minimum. Auf dem Handy ist die Regel strenger: Brauchst du es nicht, um die Kernaktion abzuschließen, entferne es. Teste, Felder eins nach dem anderen zu entfernen, und sieh zu, wie deine Abschlussrate steigt.
Regel 2: Stapele die Felder in einer einzigen Spalte
Zweispaltige Layouts auf dem Handy sind ein Fehler. Sie erfordern horizontales Scrollen, schaffen eine verwirrende visuelle Hierarchie und verschwenden horizontalen Platz. Eine Spalte, vertikal gestapelt, lässt sich am schnellsten überfliegen und ausfüllen.
Jedes Feld nimmt die volle Breite ein. Labels stehen über dem Eingabefeld, nicht daneben. Der Nutzer scrollt nach unten, liest das Label, tippt auf das Feld, schreibt und geht zum nächsten. Der Ablauf ist linear. Die geistige Belastung ist gering.
Widerstehe der Versuchung, Vor- und Nachnamen nebeneinander oder Adresse und Postleitzahl in dieselbe Zeile zu setzen. Vertikales Stapeln ist am Desktop langsamer, ja. Aber das Handy macht zwei Drittel deines Traffics aus. Optimiere für den Mehrheitsfall.
Regel 3: Mach Tippflächen groß genug, um sie zuverlässig zu treffen
Schaltflächen müssen mindestens 44x44 Pixel groß sein. Kontrollkästchen und Optionsfelder müssen mindestens 40x40 Pixel groß sein. Kleine Schaltflächen zwingen Nutzer, genau zu zielen oder mehrmals zu tippen. Der Frust wächst. Sie gehen.
Beobachte einen Tag lang deine eigene Handy-Nutzung. Achte darauf, wie viele Taps danebengehen. Selbst Experten treffen daneben. Gestalte für die Fehlerquote, die in menschlichen Fingern steckt.
Auch der Abstand zwischen Tippflächen zählt. Steht eine Ja-Schaltfläche direkt neben einer Nein-Schaltfläche, treffen Nutzer die falsche. Lass 10 bis 15 Pixel Luft zwischen interaktiven Elementen.
Regel 4: Setze Labels über die Felder, nicht hinein
Platzhaltertext in Eingabefeldern verschwindet, sobald der Nutzer zu tippen beginnt. Er vergisst, wofür das Feld war. Dann macht er einen Fehler, sieht eine Fehlermeldung und weiß nicht, was er beheben soll.
Labels müssen außerhalb und über dem Feld stehen. Klar, sichtbar, immer da. Tippt der Nutzer auf das Feld und die Tastatur erscheint, bleibt das Label sichtbar und erinnert ihn daran, was er eingibt.
Ein Label im Feld ist nur eine Bequemlichkeit für den Designer. Es spart ein paar Pixel Platz. Es kostet dich Conversions.
Regel 5: Wähle den richtigen Eingabetyp für die mobile Tastatur
Verschiedene Eingabetypen lösen auf mobilen Geräten verschiedene Tastaturen aus. Nutze sie, um die Dateneingabe schneller und genauer zu machen:
E-Mail-Adressen
Nutze `type="email"`, um eine Tastatur mit sichtbarem @-Zeichen und den Tasten .com/.org auszulösen. Nutzer müssen Sonderzeichen nicht suchen. Auch die Validierung läuft automatisch.
Telefonnummern
Nutze `type="tel"`, um eine Zifferntastatur zu zeigen. Lass aufwendige Formatierungen weg, die das Feld in Segmente aus (Vorwahl) und Nummer teilen. Nutzer tun sich schwer mit starren Feldaufteilungen und löschen im falschen Abschnitt. Ein einfaches Telefonfeld, das Ziffern und Leerzeichen akzeptiert, ist schneller.
Zahlen und Mengen
Nutze `type="number"`, um auf der Tastatur nur Zahlen zu zeigen. Blende die Buchstaben aus. Manche Zahlenfelder brauchen Dezimalstellen; nutze `inputmode="decimal"`, um sie zu erlauben.
Datumsangaben
Nutze `type="date"`, um eine native Datumsauswahl auszulösen, statt Nutzer 15.03.2026 tippen zu lassen. Die Kalenderauswahl ist schneller, hat weniger Fehler und fühlt sich auf dem Handy native an.
URLs
Nutze `type="url"`, um eine Tastatur mit Schrägstrich und der Taste .com zu zeigen. Nutzer können eine Webadresse eingeben, ohne Sonderzeichen zu suchen.
Jeder Eingabetyp sagt dem mobilen Browser, welche Daten du erwartest. Der Browser optimiert dann die Tastatur passend dazu. Du musst das Format nicht erklären. Die Tastatur übernimmt die Arbeit.
Regel 6: Schreibe klare Fehlermeldungen, die in Echtzeit erscheinen
Füllt jemand ein Formular auf dem Handy aus und drückt auf Absenden, nur um "Ungültige E-Mail-Adresse" zu sehen, hat er schon vergessen, was er getippt hat. Er weiß nicht, welches Feld den Fehler ausgelöst hat. Auf einem kleinen Bildschirm steht die Fehlermeldung vielleicht außerhalb des sichtbaren Bereichs. Er muss nach oben zurückscrollen.
Validiere stattdessen die Felder, während der Nutzer sie ausfüllt. Sobald er zum nächsten Feld wechselt, prüfe das, das er gerade verlassen hat. Gibt es einen Fehler, zeige ihn sofort, direkt unter diesem Feld. Er sieht das Problem, solange der Kontext noch in seinem Kopf ist.
Fehlermeldungen müssen konkret sein. FALSCH: "Ungültige Eingabe." RICHTIG: "Die E-Mail-Adresse muss ein @-Zeichen enthalten." Der Nutzer weiß genau, wie er es behebt.
Vermeide es, Fehler nur durch die Farbe Rot zu zeigen. Farbenblinde Nutzer übersehen sie. Nutze Rot plus ein Symbol oder ein Textlabel. "Fehler: Dieses Feld ist ein Pflichtfeld."
Regel 7: Optimiere Schaltflächen für die Bedienung auf dem Handy
Absende-Schaltflächen sollten groß sein, klar antippbar wirken und dort liegen, wo der Daumen natürlich ruht. Ein Schaltflächentext mit 16 Pixeln in einer 44 Pixel hohen Schaltfläche lässt sich leicht treffen. Ein Text mit 14 Pixeln in einer 32 Pixel hohen Schaltfläche ist ein Fehltipp, der nur darauf wartet zu passieren.
Die Breite der Schaltfläche sollte den Großteil der Bildschirmbreite einnehmen und nicht in eine schmale Spalte gequetscht werden. Schaltflächen in voller Breite senken auf dem Handy die geistige Belastung bei der Frage "Wo klicke ich als Nächstes?".
Vermeide sekundäre Schaltflächen auf demselben Bildschirm, wenn sie nicht unbedingt nötig sind. Zu viele Schaltflächen führen zur Entscheidungslähmung. Eine primäre Aktion pro Bildschirm ist die Mobile-first-Regel.
Regel 8: Nutze Fortschrittsanzeigen bei mehrstufigen Formularen
Erstreckt sich dein Formular über mehrere Bildschirme, zeige oben einen Fortschrittsbalken. "Schritt 1 von 3" sagt dem Nutzer, was ihn erwartet. Er weiß, dass er kein endloses Formular ausfüllt. Er sieht die Ziellinie.
Jeder Schritt sollte einen logischen Block an Informationen abdecken. Lade nicht fünf verschiedene Themen auf Schritt eins ab. Teile sie auf. Lass Nutzer beim Durchgehen Fortschritt spüren.
Erlaube Nutzern, zurückzugehen und frühere Schritte zu bearbeiten. Sie sollten sich nicht eingesperrt fühlen. Mobile Nutzer sind schreckhaft. Ein Notausgang senkt die Anspannung.
Regel 9: Stelle sicher, dass dein Formular mit mobilen Tastaturen und Unterbrechungen funktioniert
Die Tastatur klappt hoch und verdeckt dein Formular. Der Nutzer scrollt, um das nächste Feld zu sehen. Gut. Jetzt kommt eine Benachrichtigung und die Tastatur verschwindet. Das Formular ist sichtbar, aber der Nutzer hat vergessen, was er ausgefüllt hat. Schlecht.
Teste dein Formular auf einem echten Handy mit einer echten Tastatur. Verstehe, wie viel vom Formular verschwindet, wenn die Tastatur erscheint. Ist ein Feld ganz verdeckt, ist es unbrauchbar. Gestalte das Layout so um, dass das aktive Feld bei geöffneter Tastatur sichtbar bleibt.
Speichere den Fortschritt des Formulars, während der Nutzer jedes Feld ausfüllt. Wechselt er die App oder schließt sich das Formular versehentlich, bleiben seine Daten erhalten. Kommt er zurück, ist das Formular genau so, wie er es verlassen hat. Das beseitigt eine große Quelle für Abbrüche.
Regel 10: Nutze Autofill und Vorausfüllen, um das Ausfüllen zu beschleunigen
Handys speichern Kontaktdaten, E-Mail-Adressen, Namen und Zahlungsdaten. Nutzt dein Formular Standard-Feldnamen und HTML-Attribute, kann der Browser diese automatisch ausfüllen. Ein Telefonfeld mit `autocomplete="tel"` zeigt gespeicherte Telefonnummern als Vorschläge.
Felder mit Daten vorauszufüllen, die du schon kennst, ist noch wirkungsvoller. Meldet sich jemand an und startet ein Formular, ist seine E-Mail schon ausgefüllt. Seine Adresse ist schon ausgefüllt. Er tippt nur, was neu ist. Die Abschlussraten springen, wenn Nutzer Informationen, die du schon hast, nicht erneut eingeben müssen.
Autofill und Vorausfüllen sind kein Schummeln. Sie respektieren die Zeit des Nutzers. Sie verringern das Tippen. Sie verringern Fehler. Sie erhöhen den Abschluss.
Regel 11: Teste auf echten Handys mit echten Nutzern
Desktop-Browser haben eine Geräte-Emulation. Sie simuliert einen Handybildschirm. Das ist nützlich für schnelle Prüfungen. Aber sie simuliert nicht das tatsächliche mobile Erlebnis. Die Tastatur funktioniert nicht genauso. Das Scrollen fühlt sich nicht gleich an. Die Tippflächen verlangen nicht deinen echten Daumen.
Teste dein Formular auf echten Handys. Bitte einen Kollegen, es auszufüllen. Sieh, wo er zögert. Sieh, wo er Fehler macht. Sieh, wo er abbricht. Diese echten Daten sagen dir mehr als jede Checkliste.
Häufige Fehler bei mobilen Formularen sind ohne Tests schwer zu erkennen. Eine Schaltfläche, die im Desktop-Emulator groß aussieht, kann auf einem echten Handy im hellen Sonnenlicht zu klein sein. Labels, die in einem Wireframe klar wirken, können in dem Winkel, in dem ein Handy gehalten wird, schwer lesbar sein. Nur echte Tests decken diese Probleme auf.
Wie WEMASY bei mobilem Formular-Design hilft
Der Formular-Builder von WEMASY bringt Mobile-first-Design standardmäßig mit. Formulare stapeln sich auf dem Handy automatisch in einer einzigen Spalte. Tippflächen haben die richtige Größe. Labels bleiben sichtbar, während Nutzer Felder ausfüllen. Die mobile Tastatur ist für jeden Eingabetyp optimiert.
Die eingebaute Formular-Validierung läuft in Echtzeit, nicht erst nach dem Absenden. Fortschrittsanzeigen erscheinen bei mehrstufigen Formularen. Antworten werden automatisch gespeichert, sodass Nutzer nie ihren Fortschritt verlieren. Analytics zeigen, welche Felder die meisten Abbrüche verursachen, sodass du die größten Reibungspunkte optimieren kannst.
Sieh dir an, was in jedem WEMASY-Tarif enthalten ist und wie der Formular-Builder zu deinem Arbeitsablauf passt.