Come regolare il modulo di contatto CSS 7

Video: Contact form 7: come creare moduli di contatto completi ✉

Contenuto

indicazioni
suggerimenti
avvertimento
Cosa ti serve

Contact Form 7 è un plugin per piattaforma di pubblicazione WordPress che consente agli utenti di creare rapidamente moduli di contatto personalizzati. Sebbene i moduli siano facili da creare e implementare, i loro campi sono minimamente personalizzati, consentendo l'integrazione con qualsiasi sito. Crea i tuoi stili personalizzati e implementali nei campi del modulo generati da questo plugin.

indicazioni

Personalizza lo stile dei campi del modulo di contatto 7 usando i CSS (Comstock / Comstock / Getty Images)

Apri il foglio di stile del tema di WordPress e scorri fino alla fine. Crea un'area annotata in modo da poter individuare facilmente il tuo codice. esempio:

/ È qui che inizia il mio codice CF7 personalizzato /
Personalizza gli stili dei tuoi campi e aree di testo. Per fare ciò, crea una voce nel tuo foglio di stile. esempio:

.wpcf7 input [type = "text"], .wpcf7 areadotexto {}

Aggiungi bordi, sfondi, spaziatura e dimensioni degli elementi di testo. Esempi:

.wpcf7 input [type = "text"] {background: none repeat scroll 0 0 # F9F9F9; border: 1px solid # 8E9BA9; imbottitura: 5px; larghezza: 200 px; }
Personalizza gli stili dei menu a discesa e di selezione.Per fare ciò, crea una voce nel tuo foglio di stile. esempio:

.wpcf7 input [type = "select"] {

}

Personalizza i campi di selezione in modo simile ai campi di testo. I campi di selezione non sono ampi come i campi di testo, quindi aggiungi alcuni pixel in più alla larghezza. esempio:

.wpcf7 input [type = "selected"] {background: none repeat scroll 0 0 # F9F9F9; border: 1px solid # 8E9BA9; imbottitura: 5px; larghezza: 210 px; }
Personalizza lo stile del tuo pulsante di invio. Per fare ciò, crea una voce nel tuo foglio di stile. esempio:

.wpcf7 input [type = "submission"] {

}

Personalizza il pulsante di invio per integrare l'aspetto del tuo sito (dovrebbe continuare a risaltare sullo sfondo). Esempio di un pulsante di invio rosso:

.wpcf7 input [type = "submission"] {background-color: # 990000; border: 4px solid # B34040; colore: #FFFFFF; }
Salvare le modifiche nel foglio di stile e trasferire i dati nella cartella del tema.

suggerimenti

Prova diversi stili e diversi colori di bordo.
Esegui un nuovo controllo dei moduli in Firefox, Safari e Internet Explorer, poiché ciascun browser fornisce campi di input leggermente diversi.

avvertimento

Aggiungi CSS personalizzati al foglio di stile del tuo tema e non plug-in stylesheet. Se lo fai, quando il plugin viene aggiornato, la personalizzazione dei file nella tua cartella potrebbe andare persa.