Contact form 7 è lo standard per i form di contatto su WordPress. Sono molto stupito che l’autore non abbia ancora fatto nessun ADD-on ufficiale a pagamento (potrebbe fare un po’ di soldi e aiutare noi non-programmatori…
Una delle cose che più mi impressiona è che il form è osceno, e se non è stato integrato nel tema spesso il form ( e il bottone) sono un pugno nell’occhio.
Ho deciso quindi di condividere il mio CSS, che di sicuro non è perfetto, ma almeno funziona e ha tutte le voci che servono per fare il bottone verde e i campi del form un po’ più larghi.

Update 2019

Sono usciti un po’ di plugin che modificano la grafica del form, ma spesso hanno dei problemi di compatibilità. Personalmente dopo averne provati un po’ sono tornato a modificare i Css direttamente dal menu di personalizzazione

Ecco i codici per modificare i CSS dei form e i bottoni di Contact Form 7

Regola generale su Come modificare i Css su wordpress

entra come admin, Aspetto > personalizza

Video completo su come fare qui:

Questo codice cambia sfondo e bordi del contact form:

Sfondo, bordi etc etc

.wpcf7-form {background:#eeeeee;
padding:20px;
border:1px solid #ff0000;
margin-bottom:0px;
border-radius:10px;
}

Questo modifica dimesioni e colori delle aree di input dati (form etc etc) tranne la text area

.wpcf7-form input {background:#efefef;
padding:5px 7px;
border:1px solid #ff0000;
margin-bottom:8px;
border-radius:10px;
width: 100%;
max-width: 400px;
}

Con questo Css modifichi la Text Area di Contact form 7

.wpcf7-form textarea

{

background:#aa4444;
padding:5px 0px 5px 7px;
border:4px solid #888888;
border-radius:35px;
width: 100%;
}

Questo modifica la dimensione dei caratteri

.wpcf7-form p {
color:#4f2a0f;
margin-top:10px;
width: 100%;
font-size: 1.6em;
margin-bottom:30px;
}

Codice CSS per modificare il bottone Invia del form di contact form 7

.wpcf7-form .wpcf7-submit
{
background:#269800;
cursor:pointer;
padding-left:15px;
padding-right:15px;
color:#fff;
border-radius:7px;
font-size:2em;
width: 50%;
}

Modificare la dimensione dei checkbox e dei radio button con Contact form 7

input[type=”checkbox”]

{
width: 20px; /*Desired width*/
height: 20px; /*Desired height*/
}