Come visualizzare il tuo modulo su una singola riga in WordPress (Modo facile)

Visualizzare un modulo su una singola riga è un ottimo modo per risparmiare spazio dando al tuo sito un aspetto pulito.

Funziona particolarmente bene nelle intestazioni, nei piè di pagina o nelle barre laterali, permettendoti di posizionare i moduli in aree ad alto traffico e aumentare le conversioni.

Su WPBeginner, abbiamo testato diverse posizioni per i moduli di contatto per ottimizzare il nostro processo di acquisizione di lead. Attraverso questa esperienza, abbiamo scoperto che i moduli semplici portano spesso a tassi di completamento più elevati.

In questo articolo, ti mostreremo come visualizzare facilmente il tuo modulo su una singola riga in WordPress, passo dopo passo.

Perché visualizzare moduli su una singola riga in WordPress?

I moduli su una singola riga ti offrono maggiore flessibilità nella scelta di dove posizionarli. Poiché questo stile di modulo occupa solo una singola riga, non occupano molto spazio e possono essere facilmente integrati con i tuoi contenuti esistenti su un blog WordPress.

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

Oltre a generare più iscritti e lead, puoi trasformare qualsiasi tipo di modulo in un modulo su una singola riga.

Ad esempio, potrebbe avere senso visualizzare il tuo modulo di contatto su una singola riga per risparmiare spazio sul sito web WordPress e rendere il tuo modulo più reattivo sui dispositivi mobili.

Detto questo, ti mostreremo come visualizzare un modulo su una singola riga sul tuo sito WordPress.

Come creare un modulo su una singola riga in WordPress

Per questo tutorial, utilizzeremo il plugin WPForms. Ha un costruttore drag-and-drop che ti permette di creare rapidamente qualsiasi modulo WordPress. Inoltre, si integra con i più diffusi strumenti di email marketing in modo da poter espandere facilmente la tua lista email.

Su WPBeginner, abbiamo utilizzato questo strumento per creare moduli di contatto e sondaggi annuali, e abbiamo ottenuto ottimi risultati. Per maggiori informazioni, consulta la nostra recensione completa di WPForms.

Innanzitutto, devi installare e attivare il plugin WPForms. Per maggiori dettagli, consulta la nostra guida per principianti su come installare un plugin di WordPress. 

Dopo l'attivazione, visita la pagina WPForms » Aggiungi nuovo nella barra laterale di amministrazione di WordPress e dai un nome al tuo modulo. Quindi, devi scegliere il modello del tuo modulo.

Selezioneremo il modello 'Modulo di iscrizione'. Passa semplicemente il mouse sul modello e fai clic sul pulsante 'Usa modello'.

Questo avvierà il costruttore di moduli drag-and-drop di WPForms sullo schermo.

Vedrai che il modello che abbiamo scelto include automaticamente i campi nome ed email e un pulsante di invio.

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

Puoi anche trascinare e rilasciare i campi per cambiarne l'ordine.

Una volta terminate le personalizzazioni dei campi, puoi visualizzare il tuo modulo su una singola riga.

Per fare ciò, passa alla scheda Impostazioni » Generali nel costruttore di moduli e quindi fai clic sul menu a discesa 'Avanzate'.

Successivamente, digita ‘inline-fields’ nella casella ‘Form CSS Class’ (senza virgolette).

Questo applicherà quella classe CSS al modulo. Poiché WPForms include lo styling per la classe ‘inline-fields’, cambierà automaticamente l'intero layout del tuo modulo e lo visualizzerà in modo ordinato su una singola riga.

Dopodiché, puoi rendere il tuo modulo ancora più piccolo nascondendo le etichette dei campi.

Per farlo, fai semplicemente clic su un campo nel modulo per aprire le sue impostazioni nella colonna di sinistra.

Una volta fatto ciò, seleziona l'opzione del menu ‘Avanzate’ e fai clic sull'interruttore ‘Nascondi etichetta’ per attivarlo.

Quindi, devi fare la stessa cosa per tutte le etichette dei campi del modulo.

Dopodiché, nella stessa sezione ‘Avanzate’, puoi inserire del testo nella casella ‘Placeholder’. 

Questo indica ai tuoi utenti a cosa serve ciascun campo del modulo. 

Una volta terminate le personalizzazioni del modulo, assicurati di fare clic sul pulsante ‘Salva’ per memorizzare le tue impostazioni. 

Se stai utilizzando il tuo modulo per generare lead, puoi collegare il tuo modulo al tuo provider di email marketing. Per maggiori dettagli, consulta la nostra guida su come creare una newsletter via email nel modo giusto. 

Aggiungere il tuo modulo a riga singola al tuo sito WordPress

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

Lo aggiungeremo a una pagina esistente, ma il processo sarà simile se lo stai aggiungendo a un'altra area del tuo blog WordPress.

Apri semplicemente la pagina in cui desideri il modulo a riga singola e fai clic sul pulsante ‘Aggiungi blocco’ (+) per aprire il menu dei blocchi.

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

Successivamente, scegli il modulo a riga singola che hai creato in precedenza dal menu a discesa nel blocco stesso.

Una volta scelta la tua form, il plugin caricherà un'anteprima della tua form all'interno dell'editor dei contenuti. Quindi, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per rendere attiva la tua nuova form.

Ora puoi visitare il tuo sito web per vedere la tua nuova form in azione. 

Bonus: Usa OptinMonster per Creare Popup e Banner

Oltre a creare form a riga singola, puoi anche creare form di contatto fluttuanti, popup di iscrizione e banner sul tuo sito web per acquisire lead via email.

Per fare ciò, puoi usare OptinMonster, che è il miglior strumento di ottimizzazione delle conversioni per WordPress sul mercato.

Lo usiamo costantemente su WPBeginner per creare popup e banner che promuovono i nostri servizi professionali e la nostra newsletter, e ci piace molto. Per saperne di più, consulta la nostra recensione completa di OptinMonster.

Lo strumento ti consente di creare bellissime form di iscrizione che visualizzano informazioni personalizzate e pertinenti in base agli interessi del tuo utente e rende semplicissimo acquisire lead.

Per istruzioni dettagliate, potresti voler consultare il nostro tutorial su come creare un popup con form di contatto in WordPress.

Oltre a ciò, puoi anche creare banner accattivanti per il tuo sito web, chiedendo agli utenti di iscriversi e diventare parte della tua newsletter.

In questo modo, sei in grado di acquisire i dettagli dell'utente senza occupare molto spazio sul sito web o infastidire gli utenti.

Per maggiori dettagli, consulta la nostra guida per principianti su come creare una lista email con OptinMonster.

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare il tuo modulo su una singola riga in WordPress. Potresti anche voler consultare la nostra guida su come creare moduli più interattivi o la nostra selezione di esperti delle migliori alternative a Typeform.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.