### [Formularfelder-Beschriftungen neben Feldern formatieren](https://wpforms.com/developers/how-to-style-the-form-labels-beside-the-fields/)
**Veröffentlicht:** 8. Dezember 2021
**Autor:** Umair Majeed
**Auszug:** Diese Anleitung führt Sie durch die Einrichtung und Formatierung Ihrer Formularbeschriftungen, damit diese neben Ihren Formularfeldern schweben.
**Inhalt:**
Möchten Sie ein kompakteres Formularlayout erstellen, indem Sie Beschriftungen neben ihren Feldern anstatt darüber anzeigen? Während WPForms Beschriftungen standardmäßig über den Feldern anzeigt, können Sie dieses Layout einfach mit CSS ändern, um Beschriftungen und Felder nebeneinander anzuzeigen.
Diese Anleitung zeigt Ihnen, wie Sie dieses professionelle horizontale Layout erreichen.
Aufgrund des HTML-Codes bei bestimmten Feldern funktioniert diese Formatierung möglicherweise nicht perfekt mit allen Feldtypen. Wir empfehlen, das Erscheinungsbild Ihres Formulars nach der Implementierung dieser Änderungen zu testen.
## Einrichten Ihres Formulars
Zuerst müssen Sie Ihr Formular erstellen und die gewünschten Felder hinzufügen. Wenn Sie Hilfe benötigen, lesen Sie bitte diese Anleitung zum [Erstellen Ihres ersten Formulars](https://wpforms.com/docs/creating-first-form/).
Sobald Sie Ihr Formular erstellt haben, klicken Sie auf **Einstellungen** » **Allgemein**, klicken Sie auf den Pfeil **Erweitert**, um diese Optionen zu öffnen. Dort geben Sie im Feld **Formular-CSS-Klasse** die Klasse `wpforms-inline-labels` ein.
Diese CSS-Klasse ermöglicht es uns, bestimmte Formulare anzusprechen, anstatt alle Formulare auf Ihrer Website zu beeinflussen.
## Hinzufügen der Beschriftungsformatierung
Jetzt ist es an der Zeit, den CSS-Code zu Ihrer Website hinzuzufügen. Wenn Sie nicht sicher sind, wie Sie CSS zu Ihrer Website hinzufügen, lesen Sie diese Anleitung zum [Hinzufügen benutzerdefinierter CSS-Stile für WPForms](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
```
.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
Nachdem Sie dieses CSS hinzugefügt haben, werden Ihre Formularbeschriftungen nun auf derselben Zeile wie Ihre Formularfelder angezeigt.
Das ist alles! Möchten Sie die Formularbeschriftungen so formatieren, dass sie innerhalb des Formularfeldes angezeigt werden? Sehen Sie sich unsere Anleitung zum [Erstellen eines Formulars mit schwebenden Beschriftungen](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "Erstellen eines Formulars mit schwebenden Beschriftungen") an.
## Häufig gestellte Fragen
#### F: Was ist, wenn ich dies auf alle meine Formulare anwenden möchte?
**A:** Wenn Sie dies für alle Ihre Formulare wünschen, verwenden Sie stattdessen dieses CSS und überspringen Sie den obigen Schritt zum Hinzufügen der **Formular-CSS-Klasse**. Dies wäre nicht notwendig, wenn Sie dies für alle Formulare anwenden möchten.
```
.wpforms-container .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
Das ist alles! Möchten Sie als Nächstes weitere Formularformatierungsoptionen erkunden? Schauen Sie sich unsere Anleitung zum [Formatieren des Senden-Buttons mit CSS](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/) an.
**Kategorien:** Styling
**Tags:** CSS
---