Personalizza, modifica il layout di Contact Form 7 via Css

Personalizzare modifica il layout di Contact Form 7 via Css

Ciao, benvenuto su Go WordPress. In un articolo precedente ho spiegato, con una piccola videoguida, 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)
  3. Via plugin con 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). 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

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:

  • .wpcf7 text
  • .wpcf7 email
  • .wpcf7 url
  • .wpcf7 submit

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.

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)
    Attributo ID - Modifica il layout di Contact form 7
  2. impostiamo ora lo stile nel Custom Css

Risultato:

effetto attributo id

4. 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

Risultato:

Modulo centrato modifica il layout di Contact Form 7

Il modulo presenta i bordi arrotondati, che più avanti ti mostrerò come realizzare, e uno sfondo di color beige che ho inviduato grazie ad uno strumento di Google, effettuando questa semplice ricerca: www.google.it/search?q=pickcolor

Una volta scelto il colore nella formula HEX – #…..; – ho inserito lo sfondo beige nel modulo html di Contact Form 7, con un comando div e l’attributo style:

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 e centrare l’intero modulo

L’attributo width (larghezza) è facoltativo (l’attuale misura è responsive). Risultato:

Allineare due singoli campi in orizzontale

Ti mostro prima il risultato:

Singoli campi orizzonatli Modifica il layout di Contact Form 7

In questo caso ho omesso il width:260px; dal selettore input[type=text], altrimenti andrebbe in conflitto coi due singoli campi text. Ecco i codici:

Html

Css

Certo, la soluzione più corretta sarebbe di creare la classe “stessa-linea” alla funzione tel di Contact Form 7, [tel tel-fisso] e [tel tel-cellulare], in modo da poter impostare il campo text a piacimento.

Ultimo esempio: Modulo a due colonne

Questa soluzione, stilisticamente apprezzabile, non ha un layout Mobile-friendly o responsive, si adatta quindi solo agli schermi dei Pc desktop e Tablet.

Modulo a due colonne Modifica il layout di Contact Form 7

Css

Html

5. 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:

Conclusione

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


Potrebbe interessarti anche...



Go WordPress

Questo Blog nasce dalla passione per WordPress. Nel tempo libero cerco di arricchirlo di nuove Guide. Se ti abboni alla Newsletter sarai sempre aggiornato sui nuovi contenuti (in regalo un Ebook fantastico!). Se ti va, puoi offrirmi un caffè seguendo il link sulla barra laterale. Buona lettura da Lino Tumminieri. Go WordPress!