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

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

[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:

/* 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:

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

[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)
    Attributo ID - Modifica il layout di Contact form 7
  2. impostiamo ora lo stile nel Custom Css
#mio-stile-testo
{
 color: #red;
 border: 1px solid #f00;
 border-radius: 5px;
}

Risultato:

effetto attributo id

[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:

/* 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:

/* 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;}
}

[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:

/* 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.

[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

.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

.wpcf7-form input {
    background: #fff;
    border: 1px solid #bbb;
    color: #4F4F4F;
}

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

.wpcf7-form input:hover[type="submit"] {
    background:#0c00ff;
    cursor:pointer;
    color:#fff;
}

Puoi impostare un colore diverso da background.

Arrotondare i bordi dei form

.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

<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>
    [email* your-email placeholder "[email protected]"] </p>
</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

/* 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.

[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:

[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

Condividi sui Social



Potrebbero interessarti anche...



Lascia un commento

Il tuo indirizzo email non sarà pubblicato.