KI-Zusammenfassung
Übersicht
Möchten Sie Unterbeschriftungen über Formularfeldern mit WPForms positionieren? Standardmäßig werden Unterbeschriftungen für alle Felder unter dem Feld selbst angezeigt.
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 lassen Sie es geschehen!
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.
/**
* Position sub-labels above form fields
* @link https://wpforms.com/developers/how-to-position-sub-labels-above-form-fields/
*/
/* Address field */
.wpforms-field-address .wpforms-field-row > div,
/* Time field */
.wpforms-field-date-time .wpforms-field-row > div,
/* Date field (date picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Date field (date dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Password with confirmation enabled */
.wpforms-field-password .wpforms-field-row > div,
/* Email with confirmation enabled */
.wpforms-field-email .wpforms-field-row > div {
display: flex;
flex-wrap: wrap;
}
/* Address field */
.wpforms-field-address .wpforms-field-row > div input,
.wpforms-field-address .wpforms-field-row > div select,
/* Time field */
.wpforms-field-date-time .wpforms-field-row > div input,
/* Date field (date picker) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-datepicker > div,
/* Date field (date dropdown) */
.wpforms-field-date-time .wpforms-field-row > .wpforms-date-type-dropdown > div,
/* Password with confirmation enabled */
.wpforms-field-password .wpforms-field-row > div input,
/* Email with confirmation enabled */
.wpforms-field-email .wpforms-field-row > div input {
order: 2;
margin-top: 5px;
}
/* Skip Validation errors */
.wpforms-field-address.wpforms-has-error em {
width: 100%;
order: 4;
}
Mit diesem CSS wird jede Unterbeschriftung nun über dem Formularfeld angezeigt.
Und das ist alles, was Sie brauchen! Möchten Sie das Datei-Upload-Feld mit CSS anpassen? Sehen Sie sich unser Tutorial an So ändern Sie das Styling des Datei-Upload-Buttons.