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.

Raggiungi i tuoi obiettivi con noi!