La creazione di un modulo di contatto responsive con più colonne sembra semplice, ma quando si inizia a lavorarci, le cose possono complicarsi rapidamente.
Potreste chiedervi: "Posso davvero fare in modo che questo modulo abbia un bell'aspetto su tutti i dispositivi senza rompere il design?". Si tratta di una preoccupazione valida, soprattutto se avete lottato con moduli che non si adattano bene o che risultano goffi sui dispositivi mobili.
La buona notizia è che potete usare WPForms per impostare un modulo di contatto reattivo con più colonne. Seguite i passi di questa guida per iniziare!
Create subito il vostro modulo a più colonne! 🙂
Come creare un modulo a più colonne in WPForms
Creare un modulo a più colonne in WPForms è incredibilmente facile. Prima di iniziare, assicuratevi di avere una licenza WPForms Pro, perché con questo piano otterrete il campo Layout e molte altre utili funzioni.
Una volta acquistata la licenza e installato WPForms sul vostro sito, seguite i passaggi seguenti per creare layout di colonne nel vostro modulo.
Passo 1. Creare un nuovo modulo
Iniziamo creando un nuovo modulo con un layout a colonne. Per farlo, aprite la vostra dashboard di WordPress e andate su WPForms " Aggiungi nuovo.
Si aprirà l'interfaccia del costruttore di moduli WPForms. È possibile inserire il nome che si desidera dare al modulo e selezionare un modello.
Per questo esempio, costruiamo un modulo da zero. Questo ci consentirà di scegliere prima un layout di modulo a più colonne e poi di assegnare campi diversi a ciascuna colonna, come riteniamo opportuno.
Tuttavia, WPForms ha diversi modelli già pronti che utilizzano più colonne, come il modello di modulo di contatto a più colonne.
Per creare un modulo da zero, passare il cursore su Modulo vuoto (dovrebbe essere la prima voce dell'elenco dei modelli) e premere Crea modulo vuoto.
WPForms caricherà ora un modulo vuoto che potrete iniziare a costruire usando semplici controlli di trascinamento.
Aggiungiamo ora alcuni campi a questo modulo e disponiamoli in un layout a più colonne.
Passo 2. Aggiungere campi al layout di colonna
Per dividere un'area del modulo in più colonne, è sufficiente aggiungere il campo Layout.
È sufficiente consultare la sezione Campi fantasia nel riquadro di sinistra e trascinare il campo Layout nel modulo alla vostra 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 è fare clic su una colonna per renderla attiva e poi fare clic sui campi che si desidera aggiungere a quella colonna.
Nota: è anche possibile trascinare i campi nelle colonne a cui si desidera assegnarli.
Iniziamo assegnando i campi alla colonna di sinistra. Faremo clic sulla colonna sinistra per impostarla come attiva (come indicato dalla freccia verso l'alto).
Ora facciamo clic sui campi Nome, Email e Telefono in modo che vengano aggiunti direttamente alla colonna attiva, uno per uno.
Successivamente, ripeteremo lo stesso procedimento per la colonna a destra e vi aggiungeremo il campo Indirizzo.
Ottimo! Questo modulo a 2 colonne è ora in buona forma.
Ma se si volessero larghezze diverse per le due colonne? O magari anche più di 2 colonne?
WPForms rende possibile tutto questo, come mostreremo nel prossimo passo.
Leggi anche: Moduli a colonna singola: Esempi e ispirazioni
Passo 3. Personalizzare il layout del modulo
Per impostazione predefinita, il campo Layout crea 2 colonne di uguali dimensioni nel modulo. Tuttavia, è possibile scegliere tra 8 diversi layout e aggiungere fino a 4 colonne in un singolo modulo.
Per selezionare una preimpostazione di layout, è sufficiente fare clic sul campo Layout dopo che è stato aggiunto al modulo.
Dopodiché, è sufficiente selezionare il layout più adatto alle proprie esigenze. Ad esempio, se desiderate una colonna stretta a sinistra ma più larga a destra, potete scegliere la terza opzione di layout.
Se si desidera avere 4 colonne nel modulo, è sufficiente scegliere l'opzione di layout corrispondente dal riquadro di sinistra e trascinare i campi nelle rispettive colonne.
Si consiglia di sperimentare diversi layout e di visualizzare l'anteprima del modulo sul frontend per verificare che tutto sia a posto. La nostra guida alla progettazione dei layout dei moduli vi fornirà un buon inizio.
A volte, il layout del modulo scelto potrebbe non andare d'accordo con il layout della pagina e causare problemi di allineamento. Ma se si esegue bene il test del modulo e si controlla tutto prima della pubblicazione, questo non dovrebbe essere un problema.
WPForms crea automaticamente moduli reattivi a più colonne. Ciò significa che il modulo si comprime in un numero inferiore di colonne per adattarsi allo schermo più piccolo quando viene visualizzato da dispositivi mobili.
Passo 4. Configurare la notifica e la conferma del modulo
La configurazione delle notifiche consente di essere sempre aggiornati sui nuovi inserimenti nel modulo. Andate su Impostazioni e poi su Notifiche nel costruttore di moduli.
Da qui, è possibile modificare le impostazioni di notifica predefinite, come l'oggetto, o cambiare le e-mail dei destinatari, se necessario.
È ora possibile selezionare Conferme nel menu Impostazioni per impostare le risposte per gli invii di moduli andati a buon fine.
Scegliete il tipo di conferma più adatto al vostro sito: un messaggio, la visualizzazione di una pagina o un reindirizzamento.
Ricordate di salvare le modifiche per mantenere aggiornati il modulo e le sue impostazioni. Ora siete pronti a pubblicare il modulo sul vostro sito WordPress!
Passo 5. Pubblicare il modulo a più colonne
Ora è il momento di passare alla fase finale della pubblicazione. Per iniziare il processo di incorporazione, fare clic sul pulsante Incorpora accanto a Salva.
Dopo aver premuto il pulsante Incorpora, apparirà una maschera che chiede se si desidera incorporare il modulo in una pagina esistente o crearne una nuova. Noi sceglieremo l'opzione Crea nuova pagina , ma i passaggi sono molto simili in entrambi i casi.
Assegnate un nome alla vostra pagina e premete il tasto Lets' Go.
Troverete il modulo incorporato in questa nuova pagina. Modificate il modulo utilizzando l'editor di WordPress e, quando siete soddisfatti, premete Pubblica.
Ecco come apparirà una colonna multipla pubblicata quando viene visualizzata dal frontend:
Ed ecco fatto! Ora potete creare facilmente moduli a più colonne in WPForms senza codice. Non dimenticate: potete anche creare facilmente lo stile dei vostri moduli nell'editor di blocchi.
Domande frequenti su come creare un modulo a più colonne in WordPress
Qual è il vantaggio del layout di un modulo a più colonne?
I moduli a più colonne possono essere molto utili dal punto di vista dell'esperienza utente. Uno scenario comune in cui i moduli a più colonne sono utili è quando si ha un modulo abbastanza lungo da avere uno scorrimento verticale.
In questo scenario, è possibile ridurre la lunghezza del modulo e renderlo più compatto ordinando i campi in due o più colonne.
Allo stesso modo, quando si incorpora un modulo lungo in una barra laterale, è possibile che si adatti meglio e riduca lo scorrimento verticale se si utilizza un layout a colonne.
Non esiste un approccio univoco alla progettazione efficace dei moduli, per questo è importante avere a disposizione diverse opzioni di layout per i vari scenari.
Come si crea un modulo a più colonne?
Per creare un modulo a più colonne in WordPress, potete utilizzare WPForms e il suo costruttore drag-and-drop. Una volta impostato il modulo, è possibile suddividere facilmente i campi in più colonne utilizzando il campo Layout.
WPForms assicura automaticamente che il modulo sia reattivo, in modo che si adatti agli schermi più piccoli per un'esperienza utente senza problemi.
Come posso dividere i dati in più colonne?
Con WPForms, la suddivisione dei dati in più colonne è semplice.
Quando si costruisce il modulo, è sufficiente selezionare i campi del modulo che si desidera visualizzare affiancati e utilizzare la funzionalità di trascinamento per aggiungerli a un campo di layout.
WPForms si occuperà del resto, assicurandosi che le colonne siano visualizzate correttamente su tutti i dispositivi.
Quindi, utilizzare il Net Promoter Score per i sondaggi
Se state cercando di misurare i livelli di soddisfazione dei clienti, il miglior strumento di indagine che potete utilizzare è il Net Promoter Score (NPS). WPForms rende molto semplice la creazione di moduli di indagine con la scala Net Promoter, come spieghiamo in questa guida.
Se avete problemi con gli utenti che non inseriscono correttamente l'indirizzo e-mail, ecco come aggiungere un campo di conferma dell'indirizzo e-mail per evitare che ciò accada. Inoltre, potreste trovare interessante la nostra guida alle principali domande dei sondaggi su "come ci hai conosciuto".
Se non sapete quale strumento di prevenzione dello spam dovreste utilizzare per i vostri moduli, consultate il nostro confronto tra Akismet e reCAPTCHA.
Create ora il vostro modulo WordPress
Siete pronti a creare il vostro modulo? Iniziate oggi stesso con il più semplice plugin per la creazione di moduli per WordPress. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.
Se questo articolo vi ha aiutato, seguiteci su Facebook e Twitter per altre guide e tutorial gratuiti su WordPress.
Come creare una colonna su uno schermo mobile?
Ciao Bilal, i campi del Layout sono responsivi per i dispositivi mobili e visualizzeranno il campo come una singola colonna sul cellulare. Quando hai un po' di tempo, potresti controllare e farci sapere come va?
Se avete una licenza WPForms, avete accesso al nostro supporto via e-mail, quindi inviate un ticket di supporto. Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite WordPress.org.
Grazie.
Ho sempre progettato i moduli per il telefono, ma la modalità automatica di risposta continua a incasinare il modulo nella vista telefono, come posso risolvere questo problema?
Ehi Sam - Quando puoi, scrivici una riga con maggiori dettagli sul problema che stai affrontando in assistenza, in modo da poterti aiutare ulteriormente.
Se avete una licenza WPForms, avete accesso al nostro supporto via e-mail, quindi inviate un ticket di supporto.
Altrimenti, forniamo un supporto gratuito limitato nel forum di supporto di WPForms Lite WordPress.org.
Grazie 🙂
Ho bisogno di 10 colonne
Ciao Patrick!
Mi scuso, ma attualmente non è possibile creare 10 colonne utilizzando il campo Layout. Tuttavia, è possibile ottenere layout a più colonne utilizzando le classi CSS: abbiamo una guida dettagliata sulla creazione di layout di moduli a più colonne che illustra tutte le opzioni e le classi CSS disponibili.
Per una consulenza personalizzata sulle vostre esigenze specifiche di layout, vi consiglio di contattare i nostri consulenti di fiducia del team di supporto se avete una licenza WPForms. Inviate un ticket di assistenza e vi risponderanno al più presto.