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 2017

FINALMENTE qualcuno ha pensato di fare dei plugin per questo.

Aggiungi il Material design al tuo Contact form 7: https://wordpress.org/plugins/material-design-for-contact-form-7/

 

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


.wpcf7-form {
background:#FFFFFF;
padding:20px;
border:0px solid #f6efdf;
margin-bottom:30px;
border-radius:0px;
}
.wpcf7-form input {
background:#efefef;
padding:5px 7px;
border:1px solid #afafaf;
margin-bottom:8px;
border-radius:0px;
width: 100%;
max-width: 400px;
}

.wpcf7-form textarea {
background:#efefef;
padding:5px 0px 5px 7px;
border:1px solid #afafaf;
border-radius:0px;
width: 100%;
}

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

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

 

 

Immagine presa da: http://cf7materialdesign.com/demos/columns/

Manolo WP Coach

Utilizzo Wordpress dal 2004, e nonostante questo sono sempre riuscito a mantenere la sanità mentale e non iniziare a smanettare col codice :-), rimanendo sempre dalla parte dell'utilizzatore finale. Dopo le ennesime consulenze su come utilizzare Wordpress ho deciso di creare questo sito per rispondere a chi ha dei dubbi.

Leave a Reply