Personalizza, modifica il layout di Contact Form 7 via Css

Ciao, benvenuto su Go WordPress. In un articolo precedente ho spiegato, con una piccola video-guida, come creare moduli di contatto col plugin Contact Form 7. In quest’altra, invece, spiegherò come modificare e personalizzare lo stile grafico di Contact Form 7.

Per fare ciò è necessario intervenire manualmente sul codice .css (Cascading Style Sheets). Ovviamente gli utenti che masticano un po’ di codice html e css saranno più avvantaggiati, ma cercherò di rendere il tema accessibile a tutti (se ne sarò capace). 😉

A primo impatto sembra una materia difficile, lo ammetto, ma ti assicuro che bastano pochi passaggi per dare al tuo modulo di contatto uno stile del tutto personale.

Applichiamo il codice Css

Se hai già creato il tuo modulo di contatto con Contact Form 7, segui questi pochi step:

 

 

1. Come applicare il codice css

Sia che tu voglia modificare il layout di Contact Form 7, sia che tu voglia cambiare altri aspetti grafici, avrai la necessità di implementare il codice .css al tuo sito, e qui ti elenco i vari modi in cui è possibile farlo:

1. Nella sezione “Custom Css“, se il tuo tema ne è provvisto
2. Nel file style.css del tuo tema (meglio sul tema child, scopri come)
3. Via plugin tipo “Wp Add Custom Css” e simili
4. Creare un file css, es: miostile.css , e “richiamarlo” nel file header.php
   

Quest’ultimo passaggio richiede di inviare il file al server via ftp (o dal pannello di amministrazione del tuo hosting) nella cartella del tema (meglio se un tema child) e aggiungere in header.php del tema, prima della chiusura </head>, il seguente codice:

Riportando la corretta url (percorso del file) e posizionando l’url sotto gli altri file css, in modo da eseguire l’override (ovvero la sovrascrittura). Questa soluzione è indicata qualora tu abbia molto codice css da implementare.

N.b. Se salvi il file miostile.css nel tema principale, rischi di perderlo non appena aggiorni il tema (tranne se nel tema child).

[Torna all’indice]

2. Conoscere i selettori wpcf7

La classe generica dei moduli di Contact Form 7 è .wpcf. Poi, per ogni campo del nostro modulo, esiste un specifico “selettore”, chiamato input. In ogni selettore basta inserire/stabilire tra parentesi graffe le regole o lo stile che vogliamo realizzare, in questo modo:

.wpcf7 input[type=”text”] { … }

Ecco un elenco degli input più usati:

 

La classe generica .wpcf7, invece, ti consente di apportare modifiche all’intero modulo. Esempio:

Con questo piccolo esempio darai al modulo uno sfondo verde chiaro e un font (tipo di testo) Verdana o Sans-serif, di 18 pixel.

[Torna all’indice]

3. Utilizzare l’attributo id

Possiamo personalizzare uno specifico campo stabilendo una classe di stile e implementarla via codice css, attraverso l’attributo id.

Se hai dato un’occhiata alla mia videoguida, saprai che Contact Form 7 dà la possibilità di inserire i vari tag (testo, email, url etc) e di aggiungere l’attributo ID al singolo campo/tag. Esempio:

1. [text text-111 id: mio-stile-testo] (da inserire nel modulo)
   
2. impostiamo ora lo stile nel Custom Css

Risultato:

[Torna all’indice]

4. Centrare il bottone

Spesso il bottone di invio crea problemi sull’alignment o sulla grandezza da impostare. Qui di seguito vi mostro come personalizzare il bottone di invio di Contact Form 7.

Posizionare il bottone al centro:

Impostare due diverse larghezze per desktop o smartphone attraverso una semplice media query:

[Torna all’indice]

5. Impostare una larghezza massima all’intero modulo

Una delle difficoltà più frequenti (e segnalatemi) per chi si accinge a creare la propria pagina di contatti è il dover impostare una larghezza massima all’intero modulo. Se da Mobile generalmente questo problema non è affatto sentito, perché si sfrutta l’intera larghezza, dai device più grandi invece il problema è ben noto. Se non stilizzato, il modulo andrà ad occupare l’intera pagina.

Pensate un attimo a quelle pagine senza sidebar laterale… sarebbe un obbrobrio! Ma niente panico, con appena due righe di codice css, il problema è bello che risolto! Ecco come:

Ovviamente si può impostare il max-width a proprio piacimento. Le due righe sui margini invece assicurano che il modulo intero stia al centro, quindi meglio non modificarle.

[Torna all’indice]

6. Esempi pratici

Per chi vuole cimentarsi subito, ecco una breve carrellata di esempi pratici da cui potrai prendere spunto per personalizzare e modificare il layout di Contact Form 7.

Il più delle volte dovrai intervenire, oltre che nel codice css, anche nel codice html del modulo di contatto.

Impostare il modulo allineato al centro

Cambiare lo sfondo al bottone di invio

Cambiare lo sfondo al bottone con effetto hover (blu al passaggio del mouse):

Puoi impostare un colore diverso da background.

Arrotondare i bordi dei form

Allineare due singoli campi in orizzontale

Con Flexbox è tutto molto semplice: basta allineare i vari campi via css e con una semplice media query avere un effetto diverso in desktop e mobile.

Desktop

Mobile

Ti piace la nostra grafica? Ecco l’html e il css necessari:

Codice Html

Codice Css

Se ti va di approfondire Flexbox, ne parliamo in questo articolo.

[Torna all’indice]

7. Risorse esterne

Per utenti avanzati che hanno dimestichezza con codici e lingua inglese, consiglio questo articolo di CF7 Skins, che offre parecchi spunti tecnici per modificare il layout di Contact Form 7. Quest’altro articolo suggerisce altri esempi pratici.

In alternativa, se vuoi iniziare dalle basi e conoscere a fondo i meandri del codice html e css, consiglio dei corsi online (la maggior parte previo pagamento), oppure dare una sbirciata a materiale liberamente fruibile online:

• Pdf di Tecnologie Web L-A
• Pdf di Html5 e Css3 – Università di Padova

[Torna all’indice]

Conclusioni

Spero di averti dato qualche spunto utile su cui “smanettare” per dare al tuo modulo di contatto un aspetto gradevole e un tocco di “classe”. Come sempre, sono a disposizione per eventuali dubbi che potrai esternare nei commenti. Stay tuned & Go WordPress. Linus