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:
Indice Argomenti
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:
- Nella sezione “Custom Css“, se il tuo tema ne è provvisto
- Nel file style.css del tuo tema (meglio sul tema child, scopri come)
- Via plugin tipo “Wp Add Custom Css” e simili
- 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:
1 2 3 |
<head> <link rel='stylesheet' type='text/css' href='miosito.it/.../miostile.css' /> </head> |
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).
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:
1 2 3 4 5 6 7 8 9 10 |
/* Selettori Contact form 7 */ .wpcf7 p {} .wpcf7 label {} .wpcf7 input[type=text] {} .wpcf7 input[type=email] {} .wpcf7 input[type=url] {} .wpcf7 input[type=submit] {} .wpcf7 input[type=number] {} .wpcf7 input[type=tel] {} .wpcf7 textarea {} |
La classe generica .wpcf7, invece, ti consente di apportare modifiche all’intero modulo. Esempio:
1 2 3 4 |
.wpcf7 { background-color: #b0f9ae; font: 18px verdana, sans-serif; } |
Con questo piccolo esempio darai al modulo uno sfondo verde chiaro e un font (tipo di testo) Verdana o Sans-serif, di 18 pixel.
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 2 3 4 5 6 |
#mio-stile-testo { color: #red; border: 1px solid #f00; border-radius: 5px; } |
Risultato:
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:
1 2 3 4 5 6 |
/* Bottone al centro */ input.wpcf7-form-control.wpcf7-submit { display: block; margin: 0 auto; } |
Impostare due diverse larghezze per desktop o smartphone attraverso una semplice media query:
1 2 3 4 5 6 7 |
/* Per Desktop */ input.wpcf7-form-control.wpcf7-submit{width: 40% !important;} /* Media Query Per Mobile */ @media only screen and (max-width: 768px) { input.wpcf7-form-control.wpcf7-submit{width: 80% !important;} } |
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:
1 2 3 4 5 6 7 |
/* Larghezza massima sui grandi device */ .wpcf7 { max-width: 750px; margin-left: auto; margin-right: auto; } |
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.
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
1 2 3 4 |
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { float : none; margin: 0 auto; } .wpcf7 { text-align: center; } |
Cambiare lo sfondo al bottone di invio
1 2 3 4 5 |
.wpcf7-form input { background: #fff; border: 1px solid #bbb; color: #4F4F4F; } |
Cambiare lo sfondo al bottone con effetto hover (blu al passaggio del mouse):
1 2 3 4 5 |
.wpcf7-form input:hover[type="submit"] { background:#0c00ff; cursor:pointer; color:#fff; } |
Puoi impostare un colore diverso da background.
Arrotondare i bordi dei form
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="submit"], .wpcf7 input[type=number], .wpcf7 input[type=tel] { border-radius: 10px; } .wpcf7 textarea { border-radius: 10px; } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section class="my_modulo"> <p> Il tuo nome <span style="color: #ff0000;">*</span> [text* your-name placeholder "Mario Rossi..."] </p> <p> La tua email <span style="color: #ff0000;">*</span> </section> <section class="my_modulo"> <p> Cellulare [tel tel-414 placeholder "+39 333..."] </p> <p> Sito Web [url url-763 placeholder "www..."]</p> </section> <p> Il tuo messaggio [textarea your-message] </p> [acceptance acceptance-183] <span style="text-align: center; font-size: 0.7em;"> Utilizzando il modulo, accetti il trattamento dei dati secondo il Regolamento GDPR (UE) 2016/679</span> [/acceptance] <p>[submit "Invia il Messaggio"]</p> |
Codice Css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Modulo su due righe */ .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=url], .wpcf7 input[type=submit], .wpcf7 input[type=number], .wpcf7 input[type=tel] { border-radius:5px; width:95%; float:none; margin:0 auto; } .wpcf7 textarea{border-radius:5px; width:100%; float:none; margin:0 auto;} .my_modulo { display: flex; } /* Mobile Devices */ @media only screen and (max-width: 768px) { .my_modulo { flex-wrap: wrap; } } |
Se ti va di approfondire Flexbox, ne parliamo in questo articolo.
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:
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