Contact Form 7 è uno dei plugin più utilizzati per realizzare un modulo di contatto su un sito fatto con WordPress.

Grazie alla sua semplice interfaccia e all’utilizzo di tag, Contact Form 7 permette di creare dei moduli di contatto in modo facile e veloce. Inoltre è compatibile con numerosi template e plugin, compresi quelli per bloccare lo spam o tenere traccia delle mail ricevute con un database.

Purtroppo però il design del modulo di default di Contact Form 7 è molto basico e soprattutto orientato su un’unica colonna, come nella foto qui sotto.

Ma nel caso in cui, per una questione di spazi o di design, avessi bisogno di mettere il contact form su due colonne? In questo articolo ti spieghiamo come fare utilizzando un po’ di CSS!

Come predisporre i campi di Contact Form 7 su due colonne

Come prima cosa bisogna andare sul modulo di contatto che hai creato con Contact Form 7 e cliccare su modifica. Poi nella sezione Modulo aggiungi questo codice:

Copy to Clipboard

Nel caso tu abbia bisogno di un’altra riga nel tuo modulo di contatto ti basterà aggiungere questo codice inserendo il nome e il tag del campo che ti interessa:

Copy to Clipboard

Per inserire il nome del campo all’interno dei box invece devi invece usare questo codice:

Copy to Clipboard

Modifica del CSS per impostare Contact Form 7 su due colonne

Dopo aver modificato il modulo di contatto, è necessario modificare anche il CSS.
Per farlo vai sulla barra laterale nel backend di WordPress e clicca su Aspetto > Personalizza > CSS Aggiuntivo, e inserisci questo codice:

Copy to Clipboard

Conclusioni

Grazie al codice che ti abbiamo indicato in questo articolo, non solo potrai realizzare un modulo di contatto a due colonne, ma avrai più spazio a disposizione per inserire più campi con cui ottimizzare le comunicazioni che ti arrivano dagli utenti.

Scopri il Corso

Scarica la nostra Guida!

Scopri la Formazione ONE TO ONE

Ultimi Articoli

Raggiungi i tuoi obiettivi con noi!

CONTATTACI