Come creare un modulo di contatto reattivo con più colonne

Creare un modulo di contatto responsive con più colonne sembra semplice, ma quando inizi a lavorarci, le cose possono complicarsi rapidamente.

Potresti chiederti: "Posso davvero rendere questo modulo bello su tutti i dispositivi senza rovinare il design?" Questa è una preoccupazione valida, specialmente se hai avuto difficoltà con moduli che non si adattano bene o sembrano goffi su dispositivi mobili.

La buona notizia è che puoi usare WPForms per creare un modulo di contatto responsive con più colonne. Segui i passaggi di questa guida per iniziare!

Crea Subito il Tuo Modulo Multi-Colonna! 🙂

Come Creare un Modulo Multi-Colonna in WPForms

Creare un modulo multi-colonna in WPForms è incredibilmente facile. Prima di iniziare, assicurati di avere una licenza WPForms Pro perché otterrai il campo Layout insieme a tantissime funzionalità utili con questo piano.

Una volta acquistata la licenza e installato WPForms sul tuo sito, segui semplicemente i passaggi seguenti per creare layout a colonne nel tuo modulo.

Passaggio 1. Crea un Nuovo Modulo

Iniziamo creando un nuovo modulo con un layout a colonne. Per farlo, apri la tua bacheca WordPress e vai su WPForms » Aggiungi Nuovo.

Questo aprirà l'interfaccia del costruttore di moduli di WPForms. Puoi inserire un nome che desideri dare al tuo modulo e selezionare un modello.

Per questo esempio, creiamo un modulo da zero. Questo ci permetterà prima di scegliere un layout di modulo multi-colonna e poi di assegnare campi diversi a ciascuna colonna come riteniamo opportuno.

Tuttavia, WPForms ha diversi modelli predefiniti che utilizzano più colonne, come il modello di modulo di contatto multi-colonna.

Per creare un modulo da zero, posiziona il cursore su Modulo Vuoto (dovrebbe essere il primo elemento nell'elenco dei modelli) e premi Crea Modulo Vuoto.

WPForms caricherà ora un modulo vuoto che puoi iniziare a costruire usando semplici controlli drag and drop.

Ora, aggiungiamo alcuni campi a questo modulo e disponiamoli in un layout multi-colonna.

Passaggio 2. Aggiungi Campi al Layout a Colonne

Per dividere un'area del tuo modulo in più colonne, devi semplicemente aggiungere il campo Layout.

Cerca semplicemente nella sezione Campi Fantasia nel pannello di sinistra e trascina il campo Layout sul modulo alla tua destra.

Ora, aggiungeremo i campi Nome, Email e Telefono nella colonna di sinistra e un campo Indirizzo nella colonna di destra.

Il modo più semplice per farlo è cliccare su una colonna per renderla attiva e poi cliccare sui campi che vogliamo aggiungere a quella colonna.

Iniziamo assegnando prima i campi alla colonna di sinistra. Cliccheremo sulla colonna di sinistra per impostarla come attiva (come indicato dalla freccia verso l'alto).

Ora, cliccheremo sui campi Nome, Email e Telefono in modo che vengano aggiunti direttamente alla colonna attiva uno per uno.

Successivamente, ripeteremo lo stesso processo per la colonna a destra e vi aggiungeremo il campo Indirizzo.

Ottimo! Questo modulo a 2 colonne ora ha un bell'aspetto.

Ma cosa succederebbe se volessi larghezze diverse per le due colonne? O magari anche più di 2 colonne?

WPForms rende tutto questo possibile, come mostriamo nel prossimo passaggio.

Leggi anche: Moduli a colonna singola: esempi e ispirazione

Passaggio 3. Personalizza il Layout del Modulo

Per impostazione predefinita, il campo Layout crea 2 colonne di uguali dimensioni nel tuo modulo. Ma puoi scegliere tra 8 layout diversi e aggiungere fino a 4 colonne in un singolo modulo.

Per selezionare un preset di layout, fai semplicemente clic sul campo Layout dopo che è stato aggiunto al tuo modulo.

Dopodiché, seleziona semplicemente un layout che funzioni meglio per te. Ad esempio, se desideri una colonna stretta a sinistra ma una più larga a destra, puoi optare per la terza opzione di layout.

Se desideri avere 4 colonne nel tuo modulo, scegli semplicemente l'opzione di layout corrispondente dal pannello di sinistra e trascina i campi nelle rispettive colonne.

Ti consigliamo di sperimentare con diversi layout e di visualizzare in anteprima il tuo modulo sul frontend per verificare che tutto sia a posto. La nostra guida alla progettazione dei layout dei moduli ti darà un buon punto di partenza.

A volte, il layout del modulo scelto potrebbe non andare bene con il layout della tua pagina e causare problemi di allineamento. Ma se fai bene il tuo test del modulo e controlli tutto prima della pubblicazione, questo non dovrebbe essere un problema.

Passaggio 4. Configura le Notifiche e le Conferme del Tuo Modulo

La configurazione delle notifiche garantisce che tu sia sempre aggiornato riguardo alle nuove voci del modulo. Vai su Impostazioni e poi su Notifiche nell'editor del modulo.

Da qui, modifica le impostazioni di notifica predefinite, come la riga dell'oggetto, o cambia le email dei destinatari secondo necessità.

Ora puoi selezionare Conferme nel menu Impostazioni per impostare le risposte per le richieste di modulo completate con successo.

Scegli il Tipo di conferma che si adatta meglio al tuo sito: un messaggio, la visualizzazione di una pagina o un reindirizzamento.

Ricorda di salvare le modifiche per mantenere aggiornato il tuo modulo e le sue impostazioni. Ora sei pronto per pubblicare il modulo sul tuo sito WordPress!

Passaggio 5. Pubblica il Tuo Modulo Multi-Colonna

Ora è il momento di passare all'ultimo passaggio della pubblicazione. Per avviare il processo di incorporamento, fai clic sul pulsante Incorpora accanto a Salva.

Dopo aver premuto il pulsante Incorpora, vedrai una finestra modale che ti chiederà se desideri incorporare il tuo modulo in una pagina esistente o crearne una nuova. Andremo con l'opzione Crea nuova pagina, ma i passaggi sono molto simili in entrambi i casi.

Dai un nome alla tua pagina e premi Iniziamo.

Troverai il modulo incorporato all'interno di questa nuova pagina. Apporta eventuali modifiche utilizzando l'editor di WordPress qui, e quando sarai soddisfatto, premi Pubblica.

Ecco come apparirà un modulo multi-colonna pubblicato quando visualizzato dal frontend:

E questo è tutto! Ora puoi creare facilmente moduli a più colonne in WPForms senza codice. Non dimenticare: puoi anche personalizzare i tuoi moduli nell'editor a blocchi con facilità.

Domande frequenti su come creare un modulo a più colonne in WordPress

Qual è il vantaggio di un layout di modulo a più colonne?

I moduli a più colonne possono essere molto vantaggiosi dal punto di vista dell'esperienza utente. Uno scenario comune in cui i moduli a più colonne tornano utili è quando hai un modulo abbastanza lungo da avere uno scorrimento verticale.

In questo scenario, puoi ridurre la lunghezza del modulo e renderlo più compatto ordinando i tuoi campi in due o più colonne.

Allo stesso modo, quando incorpori un modulo lungo in una barra laterale, potrebbe adattarsi meglio e ridurre lo scorrimento verticale se utilizzi un layout a colonne.

Non esiste un approccio universale per una progettazione efficace dei moduli, motivo per cui è così importante avere diverse opzioni di layout disponibili per scenari diversi.

Come creo un modulo a più colonne?

Per creare un modulo a più colonne in WordPress, puoi utilizzare WPForms e il suo generatore drag-and-drop. Una volta impostato il tuo modulo, puoi facilmente dividere i campi in più colonne utilizzando il campo Layout.

WPForms garantisce automaticamente che il modulo sia reattivo, quindi si adatterà agli schermi più piccoli per un'esperienza utente fluida.

Come divido i dati in più colonne?

Con WPForms, dividere i dati in più colonne è semplice.

Quando crei il tuo modulo, seleziona semplicemente i campi del modulo che desideri visualizzare uno accanto all'altro e utilizza la funzionalità drag-and-drop per aggiungerli a un campo Layout.

WPForms si occuperà del resto, assicurando che le tue colonne vengano visualizzate correttamente su tutti i dispositivi.

Successivamente, Utilizza il Net Promoter Score per i Sondaggi

Se stai cercando di valutare i livelli di soddisfazione dei clienti, lo strumento di sondaggio migliore che puoi utilizzare a questo scopo è il Net Promoter Score (NPS). WPForms rende molto facile creare moduli di sondaggio con la Scala Net Promoter come spieghiamo in questa guida.

Se stai riscontrando problemi con gli utenti che non inseriscono correttamente i loro indirizzi email, ecco come aggiungere un campo di conferma dell'indirizzo email per evitarlo. Inoltre, potresti trovare interessante la nostra guida alle migliori domande per sondaggi "come ci hai conosciuto".

E, se non sei sicuro di quale strumento di prevenzione dello spam dovresti usare sui tuoi moduli, consulta il nostro confronto su Akismet vs reCAPTCHA.

Crea subito il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.