Riassunto AI
Panoramica
Vuoi posizionare le sotto-etichette sopra i campi del modulo con WPForms? Per impostazione predefinita, le sotto-etichette di tutti i campi appariranno sotto il campo stesso.
Tuttavia, utilizzando il CSS, questa posizione può essere facilmente modificata. Siamo qui per guidarti attraverso il processo con un tocco di magia CSS. Immergiamoci e facciamolo accadere!
Aggiunta del CSS
Per posizionare le sotto-etichette sopra i campi del modulo, aggiungi questo CSS al tuo sito.
Se hai bisogno di aiuto su come e dove aggiungere il CSS al tuo sito, dai un'occhiata a questo tutorial.
/**
* 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;
}
Con questo CSS, ogni sotto-etichetta apparirà ora sopra il campo del modulo.
E questo è tutto ciò di cui hai bisogno! Vuoi personalizzare il campo Caricamento file usando il CSS? Dai un'occhiata al nostro tutorial su Come modificare lo stile del pulsante di caricamento file.