Hvordan justere CSS Kontaktskjema 7

Innhold

retninger
tips
advarsel
Hva du trenger

Kontaktformular 7 er et WordPress-publiseringsplattform-plugin som lar brukerne raskt lage tilpassede kontaktskjemaer. Selv om skjemaene er enkle å lage og distribuere, er feltene deres minimalt tilpasset, slik at det blir integrert med et hvilket som helst nettsted. Opprett dine egendefinerte stiler og implementer dem i skjemafeltene som genereres av denne plugin.

retninger

Tilpass stilen til kontaktformular 7-feltene ved hjelp av CSS (Comstock / Comstock / Getty Images)

Åpne tema stilarket til WordPress og bla til slutten. Opprett et annotert område slik at du enkelt kan finne koden din. eksempel:

/ Dette er hvor min tilpassede CF7-kode starter /
Tilpass stilene til feltene og tekstområdene dine. For å gjøre dette, opprett en oppføring i stilarket. eksempel:

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

Legg til grenser, bakgrunner, utfylling og størrelser av tekstelementer. eksempler:

.wpcf7 input [type = "text"] {bakgrunn: ingen gjentatt rulle 0 0 # F9F9F9; grense: 1px solid # 8E9BA9; polstring: 5px; bredde: 200px; }
Tilpass stilene i rullegardinmenyen og valgmenyene.For å gjøre dette, opprett en oppføring i stilarket. eksempel:

.wpcf7 input [type = "select"] {

}

Tilpass valgfeltene som ligner tekstfeltene. Valgfeltene er ikke så brede som tekstfeltene, så legg til noen ekstra ekstra piksler til bredden. eksempel:

.wpcf7 input [type = "selected"] {bakgrunn: ingen repetisiell rulle 0 0 # F9F9F9; grense: 1px solid # 8E9BA9; polstring: 5px; bredde: 210px; }
Tilpass stilen på innleveringsknappen din. For å gjøre dette, opprett en oppføring i stilarket. eksempel:

.wpcf7 input [type = "submission"] {

}

Tilpass innleveringsknappen for å utfylle utseendet på nettstedet ditt (det skal fortsette å skille seg ut fra bakgrunnen). Eksempel på en rød sendeknapp:

.wpcf7 input [type = "submission"] {bakgrunnsfarge: # 990000; grense: 4px solid # B34040; farge: #FFFFFF; }
Lagre endringene i stilarket og overfør dataene til temamappen.

tips

Prøv forskjellige stilarter og forskjellige grensefarger.
Gjør en ny sjekk av skjemaene i Firefox, Safari og Internet Explorer, fordi hver nettleser gir litt forskjellige inputfelter.

advarsel

Legg til tilpasset CSS til temaets stilark og ikke plugin stilark. Hvis du gjør dette, kan det hende at tilpasningen av filene i mappen din går tapt når plugin er oppdatert.