### [Anzeigen von Feldern in einer einzigen Spalte auf Mobilgeräten](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/)

**Veröffentlicht:** 23. November 2023
**Autor:** David Ozokoye

**Auszug:** Erfahren Sie, wie Sie mit Hilfe von Layout-CSS-Klassen Ihre Formulare auf Mobilgeräten in einer einzigen Spalte anzeigen können.

**Inhalt:**

Möchten Sie ein mehrspaltiges Formularlayout auf Mobilgeräten in eine einzige Spalte umwandeln? Während die Verwendung mehrerer Spalten auf größeren Bildschirmen gut aussehen kann, sorgt die Umstellung auf ein einspaltiges Formularlayout auf kleineren Bildschirmen dafür, dass Ihre Formulare professionell und benutzerfreundlich wirken.

In diesem Tutorial erfahren Sie, wie Sie Ihre mehrspaltigen Layouts nur für Benutzer, die Ihre Website auf einem Mobilgerät besuchen, in ein einspaltiges Layout umwandeln können.

- [Erstellen eines mehrspaltigen Formularlayouts](#multi-column)
- [Anzeigen von Feldern in einer einzigen Spalte auf Mobilgeräten](#single-column-mobile)

**Hinweis:** Wir empfehlen die Verwendung des [Layoutfelds](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/) für einen einfacheren Drag-and-Drop-Ansatz zum Erstellen erweiterter Formularlayouts, die sich automatisch an die Bildschirmgröße der Benutzer anpassen. Die in diesem Tutorial behandelten Layout-CSS-Klassen werden jedoch weiterhin unterstützt.

---

Bevor Sie beginnen, müssen Sie zunächst sicherstellen, dass WPForms auf Ihrer WordPress-Website [installiert und aktiviert](https://wpforms.com/docs/install-wpforms-plugin/ „So installieren Sie das WPForms-Plugin“) ist und dass Sie [Ihre Lizenz überprüft haben](https://wpforms.com/docs/verify-wpforms-license/ „So überprüfen Sie Ihre WPForms-Lizenz“). Anschließend können Sie [ein neues Formular erstellen](https://wpforms.com/docs/creating-first-form/ „So erstellen Sie Ihr erstes Formular“) oder ein bestehendes Formular bearbeiten, um auf den Formular-Builder zuzugreifen.

Sehen Sie sich unsere anpassbare [mehrspaltige Vorlage für Angebotsanfrageformulare](https://wpforms.com/templates/multi-column-request-a-quote-form-template/) an, um einfach loszulegen.

## Erstellen eines mehrspaltigen Formularlayouts

Mit WPForms können Sie ganz einfach [Formulare mit mehreren Spalten erstellen](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ „So erstellen Sie mehrspaltige Formularlayouts in WPForms“). In diesem Beispiel erstellen wir ein zweispaltiges Layout mit der folgenden CSS-Klasse: `wpforms-one-half`. Hier ist ein Beispiel dafür, wie unser mehrspaltiges Formular aussehen wird.

![Zweispaltiges Formularlayout](https://wpforms.com/wp-content/uploads/2021/10/two-column-form-layout.png)**Hinweis:** Das erste Feld in jeder Zeile im obigen Bild verwendet ebenfalls die Klasse „wpforms-first“ (d. h. „wpforms-one-half wpforms-first“). Diese Klasse teilt dem Feld mit, dass es eine neue Zeile beginnen muss.

Nachdem wir ein zweispaltiges Formularlayout erstellt haben, möchten wir sicherstellen, dass die Formularfelder nur für Benutzer, die Ihre Website auf einem mobilen Gerät besuchen, in einer einzigen Spalte angezeigt werden.

## Felder in einer einzigen Spalte auf Mobilgeräten anzeigen

Um Felder in einer einzigen Spalte auf Mobilgeräten anzuzeigen, müssen wir eine voreingestellte CSS-Klasse verwenden. Klicken Sie im Formular-Builder auf ein Feld, um die **Feldoptionen** anzuzeigen. Fügen Sie dann im Abschnitt **Erweitert** die Klasse „wpforms-mobile-full“ zum Feld **CSS-Klassen** hinzu.

![wpforms-mobile-full class](https://wpforms.com/wp-content/uploads/2021/10/wpforms-mobile-full-class.png)Wiederholen Sie diesen Vorgang für die anderen Felder im Formular und klicken Sie anschließend auf die Schaltfläche **Speichern**, um die Änderungen zu übernehmen.

Nun wird Ihr mehrspaltiges Formularlayout für mobile Besucher in einer einzigen Spalte angezeigt. Hier ist ein Beispiel dafür, wie das Formular auf einem mobilen Gerät aussehen würde:

![Ein-spaltige mobile Ansicht](https://wpforms.com/wp-content/uploads/2021/10/single-column-mobile-view.png)Das war's schon! Sie können nun Formulare erstellen, die auf mobilen Geräten von einem mehrspaltigen Layout zu einer einzigen Spalte wechseln.

Möchten Sie als Nächstes das Erscheinungsbild Ihres Formulars weiter anpassen? Dann sehen Sie sich unbedingt unser Tutorial zum [Hinzufügen von benutzerdefiniertem CSS](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/ „So fügen Sie benutzerdefiniertes CSS zu Ihrem WPForms hinzu“) zu Ihrem Formular an.

**Kategorien:** Styling, Styling und Anpassung

---