### [Anzeigen Ihres Formulars in einer einzigen Zeile](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**Veröffentlicht:** 23. November 2023
**Autor:** Umair Majeed

**Auszug:** Erfahren Sie, wie Sie alle Ihre Formularfelder in einer einzigen Zeile anzeigen können.

**Inhalt:**

Möchten Sie Ihre Formularfelder in einer einzigen Zeile anzeigen? Wenn Ihr Formular in einer einzigen Zeile angezeigt wird, können Sie es an wichtigen Stellen Ihrer Website (z. B. im oberen Bereich Ihrer Startseite) platzieren, um eine maximale Sichtbarkeit zu erzielen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihr Formular in einer einzigen Zeile anzeigen können.

![Inline-Formular](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif „Inline-Formular”)**Hinweis:** Wenn Sie eine einfache Drag-and-Drop-Option zum Anpassen des Layouts Ihres Formulars bevorzugen, empfehlen wir Ihnen die Verwendung des [Layoutfelds](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/). Die in diesem Tutorial behandelte Klasse „inline-fields“ wird jedoch weiterhin unterstützt und empfohlen, wenn Sie die Schaltfläche „Senden“ in derselben Zeile wie Ihre Formularfelder ausrichten möchten.

---

In unserem Beispiel erstellen wir ein Formular mit drei Formularfeldern: **Name**, **Telefon** und **E-Mail**.

Um die Formularfelder in einer einzigen Zeile anzuzeigen, navigieren Sie in Ihrem Formular-Builder zu **Einstellungen » Allgemein** und fügen Sie die CSS-Klasse `inline-fields` zum Feld **Formular-CSS-Klasse** hinzu.

**Hinweis:** Bitte beachten Sie, dass die Verwendung der Klasse „inline-fields“ in WPForms manchmal zu Konflikten mit den Stilen Ihres WordPress-Themes führen kann. Infolgedessen entspricht das Erscheinungsbild möglicherweise nicht Ihren Erwartungen.

![Inline-Felder CSS](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)Um die Höhe Ihres Formulars zu reduzieren, öffnen Sie den Abschnitt **Erweitert** jedes Feldes und wählen Sie die Option **Bezeichnung ausblenden**.

![Bezeichnung für Feld ausblenden](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)Als Nächstes richten wir einen Platzhaltertext ein, um den Benutzern eine Orientierungshilfe zu geben. In unserem Beispiel fügen wir **E-Mail** als Platzhaltertext für unser E-Mail-Feld hinzu.

![Platzhaltertext hinzufügen](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**Hinweis:** Wenn Sie das Aussehen der Schaltfläche „Senden“ an den Stil Ihres Formulars anpassen möchten, können Sie [unsere Anleitung zum Anpassen der Schaltfläche „Senden“](https://wpforms.com/docs/how-to-customize-the-submit-button/) befolgen.

So sieht das Formular auf der Benutzeroberfläche der Website aus:

Bitte aktivieren Sie JavaScript in Ihrem Browser, um dieses Formular auszufüllen.

Name

E-Mail

Telefon

Absenden![Wird geladen](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **Hinweis:** Wenn Sie nach einem weiteren Beispiel oder einer gebrauchsfertigen Vorlage für ein einzeiliges Formular suchen, sehen Sie sich unsere [Vorlage für ein Inline-Newsletter-Anmeldeformular](https://wpforms.com/templates/inline-newsletter-signup-form/) an.

Das war's schon! Jetzt können Sie Formulare erstellen, die in einer einzigen Zeile angezeigt werden.

Möchten Sie als Nächstes eine Kopie der Informationen erhalten, die Ihre Benutzer über Ihre Formulare übermittelt haben? Weitere Informationen finden Sie in unserem Tutorial zum [Einrichten von Formularbenachrichtigungen](https://wpforms.com/docs/setup-form-notification-wpforms/ „So richten Sie Formularbenachrichtigungen in WPForms ein“).

**Kategorien:** Styling, Styling und Anpassung

---