### [Visualizzazione del modulo su una sola riga](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**Pubblicato:** 23 novembre 2023
**Autore:** Umair Majeed

**Estratto:** Scopri come visualizzare tutti i campi del modulo su una sola riga.

**Contenuto:**

Desideri che i campi del tuo modulo vengano visualizzati su una singola riga? Disporre il modulo su una singola riga può aiutarti a posizionarlo in aree chiave del tuo sito (come la sezione superiore della tua home page) per ottenere la massima visibilità.

In questo tutorial ti mostreremo come visualizzare il tuo modulo su una sola riga.

![Modulo in linea](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif "Modulo in linea")**Nota:** Se preferisci una semplice opzione drag-and-drop per personalizzare il layout del tuo modulo, ti suggeriamo di utilizzare il [campo Layout](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/). Tuttavia, la classe `inline-fields` trattata in questo tutorial è ancora supportata ed è consigliata se desideri allineare il pulsante di invio sulla stessa riga dei campi del modulo.

---

Per il nostro esempio, creeremo un modulo con tre campi: **Nome**, **Telefono** ed **E-mail**.

Per visualizzare i campi del modulo su un'unica riga, vai su **Impostazioni » Generale** nel tuo generatore di moduli e aggiungi la classe CSS `inline-fields` al campo **Classe CSS del modulo**.

**Nota:** tieni presente che l'uso della classe `inline-fields` in WPForms a volte può entrare in conflitto con gli stili del tuo tema WordPress. Di conseguenza, l'aspetto potrebbe non corrispondere alle tue aspettative.

![CSS campi in linea](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)Quindi, per ridurre l’altezza del modulo, apri la sezione **Avanzate** di ciascun campo e seleziona l’opzione **Nascondi etichetta**.

![Nascondi etichetta per campo](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)Successivamente, imposteremo del testo segnaposto per fornire indicazioni agli utenti. Per il nostro esempio, aggiungeremo **Email** come testo segnaposto per il nostro campo Email.

![Aggiungi testo segnaposto](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**Nota:** Se desideri modificare l'aspetto del pulsante di invio per adattarlo allo stile del tuo modulo, puoi seguire la [nostra guida sulla personalizzazione del pulsante di invio](https://wpforms.com/docs/how-to-customize-the-submit-button/).

Ecco come apparirà il modulo sul frontend del sito:

Abilita JavaScript nel tuo browser per completare questo modulo.

Nome

Email

Telefono

Invia![Caricamento in corso](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **Nota:** Se stai cercando un altro esempio o un modello pronto all'uso per un modulo a riga singola, dai un'occhiata al nostro [Modello di modulo di iscrizione alla newsletter in linea](https://wpforms.com/templates/inline-newsletter-signup-form/).

Ecco fatto! Ora puoi creare moduli che verranno visualizzati su una singola riga.

Successivamente, vorresti ricevere una copia delle informazioni inviate dai tuoi utenti tramite i tuoi moduli? Assicurati di dare un'occhiata al nostro tutorial su [come impostare le notifiche dei moduli](https://wpforms.com/docs/setup-form-notification-wpforms/ "Come impostare le notifiche dei moduli in WPForms") per maggiori dettagli.

**Categorie:** Stile, Stile e personalizzazione

---