Contact form 7 su due colonne

Home - WordPress - Contact form 7 su due colonne

Contact form 7 su due colonne

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? 😉

Resta aggiornat@ sui nuovi articoli!

Iscrivi alla mia newsletter mensile - zero spam!

.

CONTATTI


Da remoto in tutto il mondo!

(+39) 379 204 2131

info@nicolecurioni.com

© 2011 - 2022 MADE WITH ✨ BY NICOLE CURIONI WEB.DESIGN

P.IVA 10530630960 - PRIVACY POLICY - COOKIE POLICY