Hvordan style skjemaer i Contact Form 7 med CSS i WordPress
Vil du at WordPress-skjemaene dine skal se like skarpe ut som resten av nettstedet ditt? Med Contact Form 7 har du full kontroll over utseendet til skjemaet ditt ved å bruke CSS. Denne veiledningen tar deg gjennom prosessen steg for steg for å style Contact Form 7-skjemaer, slik at du kan skape en sømløs, merkevaretilpasset opplevelse for besøkende.
Hvorfor style Contact Form 7-skjemaer?
Contact Form 7 er en av de mest populære WordPress-utvidelsene for å lage skjemaer – men standardutseendet er enkelt. Egendefinert styling i klassiske WordPress-temaer lar deg:
Tilpass til nettstedets profil
Forbedre brukervennlighet og tilgjengelighet
Gjør skjemaene mer innbydende og profesjonelle
Steg 1: Identifiser CSS-velgerne til skjemaet ditt
Før du begynner å style, må du vite hvilke CSS-velgere som målretter skjemafeltene dine.
Hvert Contact Form 7-skjema er pakket inn i en unik klasse: .wpcf7
Individuelle elementer som input-felt, tekstområder og send inn-knapper bruker standard HTML-tagger
Steg 2: Legg til egendefinert CSS på WordPress-nettstedet ditt
Du kan legge til CSS på to hovedmåter:
Via Tilpasseren:
Gå til Utseende > Tilpass > Tilleggs-CSS og lim inn stilene dine.
MERK: Legg til CSS-en din i stilarket style.css for barnetemaet ditt for mer avanserte tilpasninger.
Steg 3: Skriv din egendefinerte CSS
Her er noen vanlige eksempler for å komme i gang, med «text»- og «submit»-skjemakomponentene som eksempel:
Style alle Contact Form 7-skjemaer
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-klasser i CSS, som :hover, lar deg style elementer basert på tilstand eller brukerinteraksjon. For eksempel brukes :hover-pseudoklassen når en bruker holder musepekeren over en knapp eller et felt. Dette brukes ofte for å fremheve knapper eller endre farge ved hover, noe som gjør skjemaene dine mer interaktive og visuelt engasjerende. Andre nyttige pseudo-klasser er :focus (når et felt er valgt) og :active (når et element klikkes på). Å bruke pseudo-klasser forbedrer brukeropplevelsen ved å gi umiddelbar tilbakemelding når besøkende samhandler med skjemaet ditt.
Målrett et spesifikt skjema
Hvert skjema har en unik ID, som #wpcf7-f123-o1. Bruk denne for å style kun det skjemaet:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Bytt ut f123-o1 med den faktiske ID-en til skjemaet ditt. Du finner den unike ID-en ved å se på siden der Contact Form 7-skjemaet er innebygd, høyreklikke på skjemaet og velge «Inspiser» (eller «Inspiser element») i nettleseren. Se etter <div>-elementet med klassen .wpcf7 – ID-en vises som noe à la id="wpcf7-f123-o1" i HTML-koden. Bruk denne ID-en i CSS-velgeren for å målrette kun det spesifikke skjemaet.
Steg 4: Bruk Contact Form 7s innebygde klasser
Contact Form 7 legger automatisk til klasser på elementene, noe som gjør målretting enda enklere. For eksempel:
.wpcf7-form-control – Alle skjemakontroller
.wpcf7-submit – Send inn-knappen
Du kan også legge til egne klasser i skjemaredigereren for enda mer kontroll.
Eksempel
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Steg 5: Forhåndsvis og juster
Etter at du har lagret CSS-en din, oppdater nettstedet for å se endringene. Bruk nettleserens inspeksjonsverktøy for å justere stiler i sanntid før du kopierer dem inn på nettstedet. Husk å tømme hurtigbufferen på nettstedet etter endringer, slik at oppdateringene blir synlige for besøkende.
Her er før- og etter-eksempler på et skjema på et demonettsted, der vi brukte CSS-koden fra steg 3 for å gjøre boksene rundt hvert skjemafelt blå.
Raske tips for bedre skjemastil
Gjør det tilgjengelig: Sørg for god kontrast og lesbare skriftstørrelser
Bruk mellomrom: Legg til polstring og marger for et ryddig og oversiktlig utseende
Fremhev feil: Style feilmeldinger med en tydelig farge (som rød) for å hjelpe brukere å rette opp feil
Test på mobil: Sørg for at skjemaene dine ser bra ut på alle enheter
Feilsøking
Hvis stilene dine ikke vises, prøv disse stegene:
Tøm nettleser- og nettstedsbuffer – Noen ganger hindrer bufrede filer at ny CSS vises. Hvis du bruker et bufferingsprogramtillegg eller administrert hosting, tøm disse buffrene også.
Sjekk for CSS-spesifisitetsproblemer – Hvis stilene dine ikke blir brukt, prøv å gjøre velgerne dine mer spesifikke for å overstyre eksisterende stiler.
Sørg for at du redigerer riktig CSS-fil eller seksjon – Dobbeltsjekk at du legger inn koden på riktig sted, for eksempel i Tilleggs-CSS-panelet, stilarket style.css for barnetemaet, eller et egendefinert CSS-programtillegg.
Gå gjennom CSS-klasser for skrivefeil eller feil – Se etter feilstavede klassenavn, unødvendige mellomrom eller feil bruk av klasser. Sjekk også at klassen du prøver å målrette faktisk finnes i HTML-en til skjemaet ditt.
Sjekk for dupliserte eller motstridende klasser – Sørg for at klassen du bruker ikke allerede er brukt andre steder med andre stiler som kan overstyre endringene dine.
Følg generelle beste praksiser – Bruk tydelige og konsistente navn på klassene dine, avslutt hver CSS-regel med semikolon, og lukk alltid kodeblokker med en krøllparentes (}).
Å gå nøye gjennom koden din for disse vanlige feilene vil hjelpe deg å sikre at de egendefinerte stilene dine vises riktig på nettstedet ditt.
Eksempel: Komplett egendefinert CSS for et Contact Form 7-skjema
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Her er et eksempel på et skjema som er stylet med CSS-koden over. Denne CSS-koden tilpasser utseendet til flere viktige elementer i Contact Form 7-skjemaet ditt. Den målretter alle tekstfelt, e-postfelt og tekstområder, og gir dem en lys grå kant, avrundede hjørner, behagelig polstring og jevn bredde for et rent, moderne utseende.
Koden stiler også send inn-knappen med grønn bakgrunn, hvit tekst, avrundede kanter og fet, lettlest skrift. Når brukere holder musepekeren over send inn-knappen, blir bakgrunnsfargen mørkere grønn, noe som gir interaktiv tilbakemelding.
Legge til CSS: klassiske temaer vs blokktemaer
Stegene i denne veiledningen for å style Contact Form 7-skjemaer med CSS er laget for klassiske temaer i WordPress. Klassiske temaer, som det populære Astra, bruker Tilpasseren, hvor du enkelt kan legge til egendefinert CSS under «Tilleggs-CSS»-seksjonen. Dette gjør det enkelt å style skjemaene dine og se endringer direkte.
Hvis nettstedet ditt derimot bruker et blokktema (noen ganger kalt Full Site Editing- eller FSE-tema), er prosessen annerledes. Blokktemaer har ikke alltid Tilpasseren eller feltet «Tilleggs-CSS» som standard. I stedet bruker du Nettstedsredigereren for å gjøre designendringer. Selv om du kan justere globale stiler for farger, typografi og oppsett, er det ikke alltid mulig å legge til egendefinert CSS direkte i brukergrensesnittet.
Hva gjør du hvis du bruker et blokktema
Åpne WordPress-kontrollpanelet og gå til Utseende > Rediger (Nettstedsredigereren).
I Nettstedsredigereren, se etter Stil-panelet (ikonet med halvt skygget sirkel).
Noen blokktemaer tilbyr nå et «Tilleggs-CSS»-alternativ i Stil-panelet, men dette avhenger av temaet og WordPress-versjonen din.
Hvis du ikke ser et alternativ for å legge til egendefinert CSS, kan du bruke et programtillegg som WPCode for å legge til egendefinert CSS på hele nettstedet.WPCode er brukervennlig og fungerer med alle temaer, slik at du fortsatt kan style skjemaene dine selv om temaet ikke støtter direkte CSS-redigering i brukergrensesnittet. Vær oppmerksom på at installasjon av dette programtillegget kan påvirke stilen til andre eksisterende skjemaer på nettstedet ditt.
Flere ressurser
Å style Contact Form 7-skjemaene dine er en enkel, men kraftig måte å løfte brukeropplevelsen på nettstedet ditt. Med bare noen få linjer CSS kan du få skjemaene til å se ut og føles som en naturlig del av merkevaren din.