Come visualizzare il modulo in una singola riga in WordPress (in modo semplice)

Creare moduli attraenti e facili da usare è essenziale per una buona esperienza utente.

La visualizzazione di un modulo in un’unica riga può essere particolarmente efficace per gli spazi compatti, come header, footer o barre laterali, mantenendo un aspetto pulito e professionale del sito.

In questo modo è possibile aggiungere facilmente moduli alle aree ad alto traffico del sito e migliorare le conversioni.

Nel corso degli anni abbiamo sperimentato diversi moduli di contatto per mettere a punto il nostro processo di acquisizione dei contatti. Questa esperienza pratica ci ha insegnato che i campi semplici, a una sola riga, possono portare a tassi di completamento più elevati.

In questo articolo vi mostreremo come visualizzare facilmente il vostro modulo in una singola riga in WordPress, passo dopo passo.

Perché visualizzare i moduli a riga singola in WordPress?

I moduli a riga singola offrono una maggiore flessibilità nella scelta della loro collocazione. Poiché questo tipo di modulo è costituito da una sola riga, non occupa molto spazio e può essere facilmente integrato con i contenuti esistenti su un blog WordPress.

Ad esempio, i moduli di iscrizione alla newsletter vengono spesso visualizzati in una singola riga sopra o sotto il contenuto del post del blog. Questi tipi di moduli funzionano bene anche sulle landing page, sulle pagine di contatto e su altre pagine importanti del vostro sito web.

Oltre a generare un maggior numero di abbonati e di contatti, è possibile trasformare qualsiasi tipo di modulo in un modulo a riga singola.

Ad esempio, potrebbe avere senso visualizzare il modulo di contatto in una sola riga per salvare spazio sul sito web di WordPress e rendere il modulo più responsive per i dispositivi mobili.

Detto questo, vi mostriamo come visualizzare un modulo a riga singola sul vostro sito WordPress.

Come creare un modulo a riga singola in WordPress

Per questo tutorial, utilizzeremo il plugin WPForms per creare un modulo a riga singola, perché è uno dei migliori plugin di lead generation per WordPress, utilizzato da oltre 6 milioni di siti web.

È possibile utilizzare il builder con trascinamento e rilascio per creare rapidamente qualsiasi modulo di WordPress. Inoltre, si integra con i più diffusi strumenti di email marketing per far crescere facilmente la vostra mailing list.

Per maggiori informazioni, consultate la nostra recensione completa di WPForms.

Per prima cosa, è necessario installare e attivare il plugin WPForms. Per maggiori dettagli, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, visitate la pagina WPForms ” Aggiungi nuovo nella barra laterale dell’amministrazione di WordPress e date un nome al vostro modulo. Poi, dovete scegliere il modello del vostro modulo.

Selezioneremo il modello “Modulo Opt-In”. È sufficiente passare sopra il modello e fare clic sul pulsante “Usa modello”.

In questo modo si avvia il costruttore di moduli WPForms con il drag-and-drop sullo schermo.

Si noterà che il modello scelto include automaticamente i campi del nome e dell’e-mail e un pulsante di invio.

Ogni campo può essere modificato facendo clic su di esso e apportando le modifiche nella colonna di sinistra.

È anche possibile trascinare e rilasciare i campi per modificarne l’ordine.

Una volta terminata la personalizzazione dei campi, è possibile visualizzare il modulo in una singola riga.

A tale scopo, passare alla scheda Impostazioni ” Generale del costruttore di moduli e fare clic sul menu a discesa “Avanzate”.

Quindi, digitate “inline-fields” nella casella “Form CSS Class” (senza virgolette).

Questo applicherà la classe CSS al modulo. Poiché WPForms include lo stile per la classe “inline-fields”, cambierà automaticamente l’intero layout del modulo e lo visualizzerà in una sola riga.

Successivamente, è possibile rendere il modulo ancora più piccolo nascondendo le etichette dei campi.

A tale scopo, è sufficiente fare clic su un campo del modulo per aprirne le impostazioni nella colonna di sinistra.

Una volta fatto ciò, selezionare l’opzione di menu ‘Avanzate’ e fare clic sulla levetta ‘Nascondi etichetta’ per attivarla.

Poi, occorre fare la stessa cosa per tutte le etichette dei campi del modulo.

Successivamente, nella stessa sezione ‘Avanzate’, è possibile inserire del testo nella casella ‘Segnaposto’.

Questo indica agli utenti a cosa serve ogni campo del modulo.

Una volta terminata la personalizzazione del modulo, assicurarsi di fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Se utilizzate il vostro modulo per generare lead, potete collegarlo al vostro provider di email marketing. Per maggiori dettagli, consultate la nostra guida su come creare una newsletter via e-mail nel modo giusto.

Aggiunta di un modulo a riga singola al sito web WordPress

Ora è il momento di aggiungere il modulo a riga singola al vostro sito WordPress. Potete aggiungerlo a qualsiasi pagina, post o area widget.

Lo aggiungeremo a una pagina esistente, ma il processo sarà simile se lo aggiungete a un’altra area del vostro blog WordPress.

È sufficiente aprire la pagina in cui si desidera il modulo a riga singola e fare clic sul pulsante “Aggiungi blocco” (+) per aprire il menu dei blocchi.

Quindi, fare clic sul blocco ‘WPForms’ per aggiungerlo al sito.

Quindi, scegliere il modulo a riga singola creato in precedenza dal menu a discesa del blocco stesso.

Una volta scelto il modulo, il plugin caricherà un’anteprima del modulo nell’editor di contenuti. Quindi, fare clic sul pulsante “Aggiorna” o “Pubblica” per rendere attivo il nuovo modulo.

Ora è possibile visitare il sito web per vedere il nuovo modulo in azione.

Bonus: utilizzare OptinMonster per creare popup e banner

Oltre a creare moduli a riga singola, è possibile creare moduli di contatto fluttuanti, popup opt-in e banner sul sito web per catturare lead via email.

Per farlo, potete utilizzare OptinMonster, il miglior strumento di ottimizzazione delle conversioni per WordPress presente sul mercato.

OptinMonster consente di creare bellissimi moduli di optin che visualizzano informazioni personalizzate e pertinenti in base agli interessi dell’utente e rende super facile l’acquisizione di contatti.

Per istruzioni dettagliate, potete consultare il nostro tutorial su come creare un modulo di contatto popup in WordPress.

Oltre a questo, potete anche creare banner attraenti per il vostro sito web, chiedendo agli utenti di iscriversi e di entrare a far parte della vostra newsletter.

In questo modo, è possibile acquisire i dati degli utenti senza occupare molto spazio sul sito web e senza infastidire gli utenti.

Per maggiori dettagli, consultate la nostra guida per principianti su come costruire una lista e-mail con OptinMonster.

Speriamo che questo articolo vi abbia aiutato a capire come visualizzare il vostro modulo in una sola riga in WordPress. Potreste anche voler consultare la nostra guida su come creare moduli più interattivi o la nostra scelta delle migliori alternative a Typeform.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.