Du testest dein Formular am Desktop und es sieht perfekt aus. Volle Breite, zwei Spalten, viel Platz. Dann sendest du einen Test vom Smartphone ab und merkst sofort: Da stimmt etwas nicht. Die Felder sind winzig. Die Tastatur verdeckt die Hälfte des Formulars. Du tippst das falsche Feld an. Das ganze Erlebnis wirkt kaputt.
Die Hälfte deiner Besucher nutzt ein Smartphone. Ist dein Formular nicht responsive, verlierst du die Hälfte deiner Einsendungen. In diesem Artikel erfährst du, wie du Formulare gestaltest, die auf Smartphones, Tablets und Desktops funktionieren.
Mobile Formulare sind anders als Desktop-Formulare
Mobile Nutzer füllen Formulare anders aus als Desktop-Nutzer. Am Desktop hast du Platz. Du kannst mehrspaltige Layouts nutzen. Du kannst Labels neben die Felder setzen. Auf dem Smartphone zählt jeder Pixel.
Smartphone-Tastaturen sind riesig. Öffnet sich die Tastatur, verdeckt sie die halbe Anzeige. Dein Formular scrollt. Der Nutzer verliert den Überblick. Ein Button, der eben noch sichtbar war, verschwindet hinter der Tastatur.
Touch-Flächen müssen grösser sein. Eine klickbare Fläche von 14 mal 14 Pixeln reicht mit der Maus. Ein Finger braucht mindestens 48 mal 48 Pixel, sonst trifft der Nutzer sie nicht.
Mobile Nutzer haben oft eine wackelige Verbindung. Jedes zusätzliche Nachladen von Formular oder Bild kostet Zeit. Geschwindigkeit zählt mehr als am Desktop.
Das einspaltige Formular-Layout
Das sicherste responsive Formular ist einspaltig. Ein Feld pro Zeile, egal wie gross der Bildschirm ist.
Einspaltige Layouts sind einfach, funktionieren auf allen Bildschirmen, sorgen für ein einheitliches Erlebnis und sind gut vorhersehbar. Der Hauptnachteil: Am Desktop wirken Formulare länger und man muss mehr scrollen.
Die meisten Formulare sollten einspaltig sein. Hat dein Formular fünf Felder, ist eine einzelne Spalte am Desktop sogar kürzer als ein zweispaltiges Layout. Der Nutzer scrollt weniger und sieht mehr Zusammenhang.
Für ein einspaltiges Layout nutzt du input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Das stapelt alles bei jedem Breakpoint untereinander.
Zwei Spalten am Desktop, eine Spalte auf dem Smartphone
Willst du auf grossen Bildschirmen den horizontalen Platz nutzen, setze ein Raster mit .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } und eine Media Query @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } ein. Am Desktop entstehen zwei Spalten, auf dem Smartphone wird daraus eine. So bleibt das Layout einfach und responsive.
Gruppiere nur Felder, die wirklich zusammengehören. „Vorname“ und „Nachname“ nebeneinander ergeben Sinn. „Strasse“ und „Land“ nebeneinander nicht.
Touch-Flächen und fingerfreundliches Design
Die Mindestgrösse für Touch-Flächen auf dem Smartphone liegt bei 44 mal 44 Pixeln (nach den Richtlinien von Apple) oder 48 mal 48 Pixeln (Android). Peile mindestens 44 an.
Die Grösse von Touch-Flächen gilt für Eingabefelder, die hoch genug zum bequemen Antippen sein müssen (40 bis 50 Pixel sind gut), für Checkboxen und Radio-Buttons, die standardmässig 13 mal 13 Pixel gross sind und per CSS oder JavaScript auf mindestens 44 mal 44 vergrössert werden sollten, für Buttons, die mit zusätzlichem Innenabstand mindestens 44 mal 44 Pixel gross sein sollten, und für Labels, die ebenfalls 44 mal 44 Pixel gross sein müssen, wenn man sie über das Attribut for anklickt. Manchmal bilden Label und Eingabefeld zusammen die vollständige Touch-Fläche.
Damit Eingabefelder grösser und leichter antippbar werden, nutze input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Der Innenabstand macht das Feld höher und verbessert die Treffsicherheit.
Umgang mit der Tastatur
Auf dem Smartphone verdeckt die Tastatur des Browsers die untere Bildschirmhälfte. Liegt dein Formular am Seitenende, wird der Absende-Button verdeckt. Der Nutzer muss nach unten scrollen oder die Tastatur schliessen, um den Button zu sehen.
Setze dein Formular möglichst weit nach oben auf die Seite. Oder platziere den Absende-Button oben und unten. Verstecke wichtige Buttons nicht unter der Tastatur.
Auch der Tastaturtyp zählt. Für ein E-Mail-Feld nutzt du <input type="email">, damit eine E-Mail-Tastatur mit @-Taste erscheint. Für ein Telefonfeld nutzt du <input type="tel">, damit eine Zifferntastatur erscheint. Für Zahleneingaben nutzt du <input type="number">, damit eine Zahlentastatur erscheint. Mit dem richtigen Eingabetyp wählt der Browser die Tastatur automatisch.
Tippt der Nutzer auf ein Eingabefeld, scrollt der Browser dieses Feld in den sichtbaren Bereich. Das ist gut. Das Feld ist sichtbar, wenn er tippen will. Manchmal scrollt es dabei aber an anderem Kontext vorbei. Teste dein Formular auf einem echten Smartphone, um das Verhalten zu sehen.
Position der Labels auf dem Smartphone
Am Desktop können Labels über, neben oder in den Feldern stehen. Auf dem Smartphone ist „darüber“ fast immer am besten.
Ein Label über dem Feld ist klar. Der Nutzer sieht erst das Label, dann das Eingabefeld. Auf einem schmalen Bildschirm verschwendet ein Label neben dem Feld Platz in der Breite. Ein Platzhalter im Feld verschwindet, sobald man zu tippen beginnt.
Bewährte Praxis: Setze Labels über die Felder. Immer.
<label for="email">Email</label>
<input type="email" id="email">
Abstände und Innenabstände
Responsive Formulare brauchen auf dem Smartphone mehr Abstand, nicht weniger. Dein Instinkt sagt: alles zusammenquetschen, damit es auf den Bildschirm passt. Widersteh ihm.
Nutze grosszügige Abstände: mindestens 1rem (16 Pixel) zwischen den Feldern, mindestens 0,75rem (12 Pixel) rundum als Innenabstand der Eingabefelder und mindestens 1rem (16 Pixel) rundum als Innenabstand der Buttons. Grosszügige Abstände machen Formulare leichter bedienbar, verringern Fehltipps und verbessern die Lesbarkeit. Auf dem Smartphone ist Luft wertvoller als Bildschirmplatz.
Schriftgrösse auf dem Smartphone
Nutze für Eingabefelder mindestens 16 Pixel. Kleinerer Text zwingt Nutzer zum Zoomen oder Zusammenkneifen der Augen. 16 Pixel sind der Standard, und der funktioniert.
Labels dürfen kleiner sein, etwa 14 Pixel. Eingabefelder sollten aber mindestens 16 Pixel haben.
Manche Browser zoomen automatisch, wenn man ein Eingabefeld unter 16 Pixel antippt. Das Formular springt und zoomt unerwartet. Mit input { font-size: 16px; } vermeidest du das.
Häufige Fehler bei responsiven Formularen
Ein zweispaltiges Layout auf allen Bildschirmgrössen nutzen
Auf dem Smartphone werden Formulare gequetscht. Die Felder sind winzig. Labels stapeln sich unschön. Stapele bei kleineren Breakpoints immer auf eine Spalte.
Touch-Flächen zu klein machen
Checkboxen, Radio-Buttons und Buttons müssen mindestens 44 mal 44 Pixel gross sein. Teste auf einem echten Smartphone. Musst du dich zum Antippen konzentrieren, ist die Fläche zu klein.
Platzhaltertext als einziges Label nutzen
Sobald der Nutzer zu tippen beginnt, verschwindet der Platzhalter. Er vergisst, wofür das Feld gedacht ist. Nutze immer ein richtiges Label-Element. Den Platzhalter kannst du behalten, verlass dich aber nie allein darauf.
Das Formular am Ende einer langen Seite platzieren
Der Nutzer scrollt zu einem Kontaktformular, tippt auf das E-Mail-Feld, und die Smartphone-Tastatur verdeckt das Formular. Er sieht nicht, was er tippt, und erreicht den Absende-Button nicht. Setze Formulare nach oben oder stelle sicher, dass sie mit Tastatur auf den Bildschirm passen.
Nicht auf echten Smartphones testen
Dein Desktop-Browser hat einen mobilen Ansichtsmodus. Er ist für einen schnellen Check nützlich. Er zeigt aber nicht, wie dein Formular auf einem Smartphone wirklich funktioniert. Teste auf echten Geräten. Leih dir ein Smartphone, falls du keines hast.
Techniken für responsive Formulare
CSS Grid für flexible Layouts
Nutze .form-group { display: grid; gap: 0.5rem; } und .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Die Werte auto-fit und minmax erzeugen ein Layout, das sich nach dem verfügbaren Platz richtet: Felder stapeln sich bei schmaler Breite und stehen bei grosser Breite nebeneinander.
Flexbox für Button-Layouts
Nutze .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } und .form-actions button { flex: 1; min-width: 150px; }. Am Desktop stehen die Buttons nebeneinander, auf dem Smartphone brechen sie in mehrere Zeilen um, und jeder Button wächst, um den verfügbaren Platz zu füllen.
Media Queries für bestimmte Breakpoints
Nutze @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } }, um bei Bildschirmen unter 480 Pixeln ein einspaltiges Layout zu erzwingen.
Wie WEMASY-Formulare auf alle Bildschirmgrössen reagieren
Der Formular-Builder von WEMASY erstellt automatisch responsive Formulare. Du baust am Desktop, und die mobile Ansicht ist schon erledigt. Auf Smartphones stapeln sich Formulare einspaltig. Touch-Flächen sind für Smartphones dimensioniert. Labels und Felder haben passende Abstände. Kein Zusatzaufwand nötig.
Sieh dir an, wie die Responsivität von Formularen in deinem WEMASY-Tarif funktioniert.