Styling delle etichette del modulo per apparire accanto ai campi

Desideri creare un layout di modulo più compatto visualizzando le etichette accanto ai loro campi invece che sopra di essi? Mentre WPForms visualizza le etichette sopra i campi per impostazione predefinita, puoi facilmente modificare questo layout usando il CSS per mostrare etichette e campi uno accanto all'altro.

Questo tutorial ti mostrerà come ottenere questo layout orizzontale professionale.

Configurazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo e aggiungere i campi desiderati. Se hai bisogno di aiuto, consulta questa guida su come creare il tuo primo modulo.

Una volta creato il tuo modulo, fai clic su Impostazioni » Generali, fai clic sulla freccia Avanzate per aprire queste opzioni. Una volta lì, all'interno di Classe CSS del modulo, aggiungi la classe wpforms-inline-labels.

Questa classe CSS ci consente di indirizzare moduli specifici anziché influenzare tutti i moduli sul tuo sito.

Aggiunta della formattazione delle etichette

Ora è il momento di aggiungere il codice CSS al tuo sito. Se non sei sicuro di come aggiungere CSS al tuo sito, consulta questa guida su come aggiungere stili CSS personalizzati.

.wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Dopo aver aggiunto questo CSS, vedrai che le etichette del tuo modulo appariranno ora sulla stessa riga dei campi del tuo modulo.

E questo è tutto! Desideri formattare le etichette del modulo in modo che appaiano all'interno del campo del modulo? Dai un'occhiata al nostro tutorial su Come creare un modulo con etichette fluttuanti.

Domande frequenti

D: Cosa succede se volessi applicare questo a tutti i miei moduli?

R: Se desideri questo per tutti i tuoi moduli, usa questo CSS invece e salta il passaggio precedente quando aggiungi la Classe CSS del modulo. Questo non sarebbe necessario se volessi applicare questo a tutti i moduli.

.wpforms-container .wpforms-form .wpforms-field {
    display: grid;
    grid-template-columns: 225px auto;
    align-items: center;
}

Fatto! Successivamente, desideri esplorare altre opzioni di formattazione del modulo? Dai un'occhiata alla nostra guida su come formattare il pulsante di invio con CSS.