### [So positionieren Sie Unterbeschriftungen über Formularfeldern](https://wpforms.com/developers/how-to-position-sub-labels-above-form-fields/)
**Veröffentlicht:** 28. September 2023
**Autor:** David Ozokoye
**Auszug:** Dieser Artikel zeigt Ihnen, wie Sie Unterbeschriftungen mit CSS über Formularfeldern positionieren.
**Inhalt:**
## Übersicht
Möchten Sie Unterbeschriftungen mit WPForms über Formularfeldern positionieren? Standardmäßig erscheinen die Unterbeschriftungen für alle Felder unterhalb des Feldes selbst.
Mit CSS kann diese Position jedoch einfach geändert werden. Wir führen Sie mit ein wenig CSS-Magie durch den Prozess. Tauchen wir ein und machen es möglich!
## Hinzufügen des CSS
Um Unterbeschriftungen über Formularfeldern zu positionieren, fügen Sie dieses CSS zu Ihrer Website hinzu.
Wenn Sie Hilfe benötigen, wie und wo Sie CSS zu Ihrer Website hinzufügen können, [sehen Sie sich dieses Tutorial an](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu").
```
/**
* Positionieren Sie Unterbeschriftungen über Formularfeldern
* @link https://wpforms.com/developers/how-to-position-sub-labels-above-form-fields/
*/
/* Adressfeld */
.wpforms-field-address .wpforms-field-row > div,
/* Zeitfeld */
.wpforms-field-date-time .wpforms-field-row > div,
/* Datumsfeld (Datums-Picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Datumsfeld (Datums-Dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Passwort mit aktivierter Bestätigung */
.wpforms-field-password .wpforms-field-row > div,
/* E-Mail mit aktivierter Bestätigung */
.wpforms-field-email .wpforms-field-row > div {
display: flex;
flex-wrap: wrap;
}
/* Adressfeld */
.wpforms-field-address .wpforms-field-row > div input,
.wpforms-field-address .wpforms-field-row > div select,
/* Zeitfeld */
.wpforms-field-date-time .wpforms-field-row > div input,
/* Datumsfeld (Datums-Picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Datumsfeld (Datums-Dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Passwort mit aktivierter Bestätigung */
.wpforms-field-password .wpforms-field-row > div input,
/* E-Mail mit aktivierter Bestätigung */
.wpforms-field-email .wpforms-field-row > div input {
order: 2;
margin-top: 5px;
}
/* Validierungsfehler überspringen */
.wpforms-field-address.wpforms-has-error em {
width: 100%;
order: 4;
}
```
Mit diesem CSS erscheint jede Unterbeschriftung nun über dem Formularfeld.
Und das ist alles, was Sie brauchen! Möchten Sie das **Datei-Upload**-Feld mit CSS anpassen? Sehen Sie sich unser Tutorial [So ändern Sie das Styling des Datei-Upload-Buttons](https://wpforms.com/developers/how-to-change-the-file-upload-button-styling/ "So ändern Sie das Styling des Datei-Upload-Buttons") an.
**Kategorien:** Snippets
**Tags:** CSS
---