Personalizza, modifica il layout di Contact Form 7 via Css wpp.altervista.org/blog/personalizza-modifica-il-layout-di-contact-form-7/ Ciao, benvenuto su Go WordPress. In un articolo precedente ho spiegato, con una piccola videoguida, 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:. Come applicare il codice css. Conoscere i selettori. Utilizzare l attributo id. Esempi pratici. Risorse esterne. 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:. Nella sezione Custom Css, se il tuo tema ne è provvisto. Nel file style.css del tuo tema (meglio sul tema child). Via plugin con Wp Add Custom Css e simili. 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, il seguente codice: <link rel='stylesheet' type='text/css' href='miosito.it/.../miostile.css' /> Riportando la corretta url (percorso del file). 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).. Conoscere i selettori /0
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:.wpcf7 text.wpcf7 email.wpcf7 url.wpcf7 submit La classe generica.wpcf7, invece, ti consente di apportare modifiche all intero modulo. Esempio: Modulo centrato.wpcf7 { background-color: #b0f9ae; font: 8px 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 8 pixel.. 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:. [text text- id: mio-stile-testo] (da inserire nel modulo). impostiamo ora lo stile nel Custom Css #mio-stile-testo { color: #red; border: px solid #f00; Risultato: /0
. 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 Modulo centrato.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 textarea { float : none; margin: 0 auto;.wpcf7 { text-align: center; Risultato: Il modulo presenta i bordi arrotondati, che più avanti ti mostrerò come realizzare, e uno sfondo di color beige che ho /0
inviduato grazie ad uno strumento di Google, effettuando questa semplice ricerca: www.google.it/search? q=pickcolor Una volta scelto il colore nella formula HEX #..; ho inserito lo sfondo beige nel modulo html di Contact Form 7, con un comando div e l attributo style: 6 7 8 <div style="background-color: #efbe69"> <p> Nome* [text* your-name]</p> etc... </div> Cambiare lo sfondo al bottone di invio.wpcf7-form input { background: #fff; border: px solid #bbb; color: #FFF; 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 e centrare l intero modulo 6 7 8 9 0.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="url"],.wpcf7 input[type="submit"] { border-radius: 0px; width: 60px; float : none; margin: 0 auto;.wpcf7 textarea { border-radius: 0px; width: 0px; float : none; margin: 0 auto;.wpcf7 { text-align: center; /0
L attributo width (larghezza) è facoltativo (l attuale misura è responsive). Risultato: Allineare due singoli campi in orizzontale Ti mostro prima il risultato: /0
In questo caso ho omesso il width:60px; dal selettore input[type=text], altrimenti andrebbe in conflitto coi due singoli campi text. Ecco i codici: Html <ol class="stessa-linea"> <li> <p for="cf7-phone">telefono [text cf7-phone /]</p></li> <li> <p for="cf7-mobile">cellulare [text cf7-mobile /]</p></li> Css 6/0
6 7 8 9 0 6 7 8 9 0 6 7 8 9.wpcf7-form.stessa-linea ol { list-style: none; margin: 0;.wpcf7-form.stessa-linea li{ display: inline-block; float: center; margin-right: 0px; padding-right: 0px; border-radius: 0px; font-size: 0px;.wpcf7 input[type="text"],.wpcf7 input[type="email"],.wpcf7 input[type="url"],.wpcf7 input[type="submit"] { border-radius: 0px; float : none; margin: 0 auto;.wpcf7 textarea { border-radius: 0px; width: 0px; float : none; margin: 0 auto;.wpcf7 { text-align: center; Certo, la soluzione più corretta sarebbe di creare la classe stessa-linea alla funzione tel di Contact Form 7, [tel tel-fisso] e [tel tel-cellulare], in modo da poter impostare il campo text a piacimento. Ultimo esempio: Modulo a due colonne Questa soluzione, stilisticamente apprezzabile, non ha un layout Mobile-friendly o responsive, si adatta quindi solo agli schermi dei Pc desktop e Tablet. Css 7/0
8/0
6 7 8 9 0 6 7 8 9 0 6 7 8 9 0 6 7 8 9 0 6 7 8 9 0 6 7 8 #two-column{ width: 0px; #two-column #left{ width: 00px; float: left; #two-column #right{ width: 0px; float: right; #two-column p{ margin-bottom: px; #two-column input[type="text"]{ border:none; border:px solid #000; font-size :px; -webkit-border-radius: px; -moz-border-radius: px; border-radius: px; width: 0px; padding: px; #two-column #right input[type="text"], #two-column #left input[type="text"]{ width:0px; #two-column input[type="email"]{ border:none; border:px solid #000; font-size :px; -webkit-border-radius: px; -moz-border-radius: px; border-radius: px; width: 0px; padding: px; #two-column #right input[type="email"], #two-column #left input[type="email"]{ width:0px; #two-column textarea { position: relative; padding: px; border:px solid #000; -webkit-border-radius: px; -moz-border-radius: px; border-radius: px; width: 0px; input.wpcf7-form-control.wpcf7-submit{ background:#0c00ff; cursor:pointer; color:#fff; 9/0
Html 6 7 8 9 0 6 7 8 9 0 <p style="font-size: 0px;">Modulo a due colonne</p> <div id="two-column"> <div id="left"> <p> Il tuo nome* [text* your-name] </p> <p> La tua email* [email* your-email] </p> </div> <div id="right"> <p> Oggetto [text your-subject] </p> <p> Sito web [text your-site] </p> </div> <p> Il tuo messaggio [textarea your-message] </p> <p>[submit "Invia"]</p> </div>. 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: Pdf di Tecnologie Web L-A Pdf di Html e Css Università di Padova Conclusione 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 Go WordPress 07 Tutti i diritti riservati Chi siamo 0/0