Vi sarà capitato di voler inserire un contact form usando il plugin Contact Form 7 sul vostro sito WordPress. Questo plugin é infatti uno dei migliori – a mio avviso – per l’inserimento di moduli di contatto. Di default, la predisposizione dei campi é su una riga. Ad ogni riga corrisponde un campo.
Come fare quindi a inserire i campi del contact form su due colonne? Non è così complicato, bisognerà indubbiamente usare del codice custom ma se segui passo a passo questa guida sono certa riuscirai nell’impresa!
Come predisporre i campi di Contact Form 7 su due colonne
Per prima cosa, dovrai andare sul tuo modulo di contatto creato dentro a Contact Form 7 e cliccare su modifica.
Ora, le opzioni che abbiamo sono 2. Nella prima ti mostrerò come inserire i campi Nome, Email e Messaggio con tanto di “Label” prima della casella, il risultato finale sarà questo:
Procediamo dunque a inserire il seguente codice nella sezione Modulo che ti avevo mostrato poco fa’.
Se hai esigenze di inserire più campi, basterà replicare il codice
sostituendo i vari campi per quelli che desideri.
Modifica del CSS per impostare il Contact Form su due colonne
Il secondo step invece, é quello del CSS. Dunque, sotto il tuo editor di CSS (solitamente sotto Aspetto → Personalizzazione e poi Custom CSS) inserisci il seguente codice:
Salva, et voilà! Il gioco é fatto!
Se invece, desideri che i campi non abbiano un label che li preceda, e preferisci dunque un placeholder al loro posto, ovvero vuoi ottenere il seguente risultato:
Allora il codice da inserire nel tuo Modulo di Contact Form 7 sarà il seguente:
Il CSS resta invariato per entrambe le opzioni di visualizzazione!
Tutto chiaro? 😉
