Modificare lo stile dei moduli di Contact Form 7

09 Dic Modificare lo stile dei moduli di Contact Form 7

Contact Form 7 è un plugin di WordPress molto comodo per generare dei moduli di contatto completi di varie funzionalità, il tutto in modo anche piuttosto intuitivo. In alcuni casi però, il modulo online graficamente non compare in modo così gradevole come ce lo aspettiamo, e ciò avviene spesso per possibili conflitti con il CSS del tema usato o quello di altri plugin.

Per risolvere però non servono grossi sbattimenti, basta infatti semplicemente modificare lo stile dei moduli di Contact Form 7 agendo con del semplice codice CSS che trovate in questo articolo. Iniziamo col dire che l’inserimento di tale codice va fatto andando su Aspetto > Personalizza > CSS aggiuntivo che è un campo standard presente in tutti i siti realizzati con WordPress. Se, per una qulsiasi ragione, tale campo non dovesse esserci, allora è possibile che il vostro tema abbia un suo pannello nel quale includa quel campo di inserimento. Se poi anche quest’utima funzione non dovesse essere presente nel vostro tema, allora potete ripiegare sull’installazione di un plugin chiamato Simple Custom CSS dal repository di WordPress che vi risolve il problema.

In questo articolo, andremo a vedere come modificare lo stile di 3 elementi appartenenti ai moduli di Contact Form 7, ossia rispettivamente sfondo e bordi, campi di inserimento ed area testo, ed infine il pulsante invia. La premessa ovviamente è che i codici CSS inseriti d’ora inpoi varranno per tutti i moduli CF7 presenti nel vostro sito.

Modificare lo sfondo e i bordi dei moduli di Contact Form 7

Il seguente codice va a dare uno stile allo sfondo ed ai bordi dei moduli, ovviamente, anche se non conoscete il CSS, in modo intuitivo potete capire da soli che modificando alcuni di quei valori potrete personalizzare sfondo e bordi a vostro piacere.

.wpcf7 {
     background: #e0e0e0;
     border: 8px solid #6e6e6e;
     width: 700px;
     padding: 17px 17px 17px 50px !important;
 }

Modificare i campi di inserimento e l’area di testo dei moduli di Contact Form 7

Anche al seguente codice può essere applicato lo stesso concetto del precedente se volete personalizzare alcuni valori, considerando anche che i primi quattro tag inseriti, cioè text, email, tel e message sono quelli maggiormente usati.

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="message"]
 textarea {
     font-size: 15px;
     background-color: #ededed;
     border: none;
     width: 95%;
     padding: 3%;
 }

Modificare il pulsante Invia dei moduli di Contact Form 7

Quest’ultimo codice va a modificare esclusivamente lo stile del pulsante invia di CF7. Dobbiamo però aprire una parentesi a riguardo, poiché oggigiorno pressoché tutti i pulsanti possiedono un’animazione, per renderla operativa esistono tre diverse regole CSS, motivo per cui per ogni azione scriverò il relativo codice sottostante, ma ciò non toglie che i tre codici possono essere aggiunti complessivamente nel campo del CSS aggiuntivo.

La prima regola è input, ed è lo stato del pulsante “a riposo” e questo è il suo codice:

.wpcf7 input[type="submit"] {
     color: #ffffff;
     font-size: 17px;
     font-weight: 700;
     background: #25a85c;
     padding: 13px 20px 13px 20px;
     border: none;
     border-radius: 5px;
     width: auto;
     text-transform: uppercase;
     letter-spacing: 4px;
 }

La seconda regola è input:hover, ed è lo stato del pulsante quando il mouse passa sopra di esso e questo è il suo codice:

.wpcf7 input:hover[type="submit"] {
     background: #1c1c1c;
     transition: all 0.4s ease 0s;
 }

La terza regola è input:active, ed è lo stato del pulsante quando viene cliccato e questo è il suo codice:

.wpcf7 input:active[type="submit"] {
     background: #000000;
 }

Sulla base di quanto detto, personalizzateli a vostro piacere e ovviamente scegliete voi facendo anche varie prove se necessitate di tutti e tre i codici.