Come Modificare il Layout di Contact Form 7

Come modificare il layuot di Contact Form 7, il plugin per i contatti via mail più famoso e scaricato del web, per quanto riguarda WordPress. Oggi diamo una piccola sbirciatina alla personalizzazione del form, che per quanto funzionale non sempre appare come vorremmo, dal punto di vista estetico, e a questo punto ci viene incontro la personalizzazione CSS aggiuntiva di wordpress. La personalizzazione si trova nel menu di wordpress -> Aspetto ->Personalizza

Qui vanno modificati alcune classi CSS del contact form per fare le volute modifiche. Come sempre queste operazioni richiedono un minimo di conoscenza del codice CSS, ma sul web si trova praticamente di tutto. Se optiamo per aggiungere qualche riga sul CSS aggiuntivo di wordpress in caso di errore possiamo sempre tornare indietro non pregiudicando alcunché. Le classi CSS che andremo a modificare sono:

.wpcf7{…..} Personalizzazione Contact Form

.wpcf7-form{…..}

.wpcf7-textarea{…..}

.wpcf7 input{…..}

es.

/* Contact Form 7 personalizzazione */

.wpcf7{

background-color: #DEDEDE ;

font-family: ‘Montserrat’, sans-serif;

font-weight: 600;

font-size: 18px;

border: 5px solid #244E9C ;

padding-left: 25px;

padding-top: 25px;

padding-right:25px;

padding-bottom: 10px;

border-radius: 10px;

color: #244E9C;

}

Ottenendo questo risultato di colori. Non è esteticamente bello ma il concetto che ci serve per renderlo come vogliamo è questo. Per quanto riguarda il testo nelle caselle di input va modificato nel settaggio di Contact Form, vanno rimosse le ed inseriti i placeholder in questo modo

[text* your-name placeholder “Nome (*)”] [email* your-email placehoder “Email (*)”] [text your-subject placeholder “Oggetto”] [textarea your-message placeholder “Messaggio”][submit “INVIA”]

invece che come di default cosi

Il tuo nome (richiesto)

[text* your-name]

La tua email (richiesto)

[email* your-email]

Oggetto

[text your-subject]

Il tuo messaggio

[textarea your-message] [submit “Invia”]