### [Styling dei campi di etichetta per apparire accanto ai campi](https://wpforms.com/developers/how-to-style-the-form-labels-beside-the-fields/)
**Pubblicato:** 8 dicembre 2021
**Autore:** Umair Majeed
**Estratto:** Questa guida ti mostrerà come impostare e stilizzare le etichette del tuo modulo in modo che fluttuino accanto ai campi del modulo.
**Contenuto:**
Vorresti creare un layout del modulo più compatto visualizzando le etichette accanto ai 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.
Questa guida ti mostrerà come ottenere questo layout orizzontale professionale.
A causa del markup HTML su determinati campi, questa stilizzazione potrebbe non funzionare perfettamente con tutti i tipi di campo. Ti consigliamo di testare l'aspetto del tuo modulo dopo aver implementato queste modifiche.
## Impostazione del tuo modulo
Per prima cosa, 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](https://wpforms.com/docs/creating-first-form/).
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 della **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 stilizzazione 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 per 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;
}
```
Dopo aver aggiunto questo CSS, vedrai che le etichette del tuo modulo appariranno ora sulla stessa riga dei campi del tuo modulo.
Ecco fatto! Vorresti stilizzare le etichette del modulo per farle apparire all'interno del campo del modulo? Dai un'occhiata alla nostra guida su [Come creare un modulo con etichette fluttuanti](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/ "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 applicarlo a tutti i moduli.
```
.wpforms-container .wpforms-form .wpforms-field {
display: grid;
grid-template-columns: 225px auto;
align-items: center;
}
```
Ecco fatto! Successivamente, vorresti esplorare altre opzioni di stilizzazione dei moduli? Dai un'occhiata alla nostra guida su [come stilizzare il pulsante di invio con CSS](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/).
**Categorie:** Stilizzazione
**Tag:** CSS
---