Standardstilene til Contact Form 7 er det første du legger merke til etter at du har installert pluginen. Smale inndatafelt, en enkel send-knapp og feilmeldinger uten noen form for designinnsats. Etter å ha satt opp et dusin nettsteder mister du tellingen på hvor mange ganger du manuelt redigerte style.css, og det er alltid den samme rutinen.

En forberedt skjemaeksportfil løser dette problemet. Du importerer et ferdiglaget skjema med forhåndskonfigurerte stiler: feltene, knappen, valideringen og reCAPTCHA ser anstendige ut rett etter aktivering. Det eneste som gjenstår er å erstatte e-postadressene og logobanen for ditt spesifikke prosjekt.

Nedenfor finner du en fullstendig gjennomgang av CSS-reglene vi bruker i våre prosjekter, pluss en eksportfil for en rask start. Stilene er testet på Contact Form 7 versjon 6.x og er oppdaterte per 2026.

💡 Rask oversikt:

• Last ned skjemaeksportfilen og importer den til WordPress ved hjelp av standardmetoden
• Erstatt e-postadressene i e-postmalen og logobanen
• Kopier CSS-stilene inn i temaets style.css eller i Tilleggs-CSS
• Tilpass farger og fonter til prosjektets merkevare om nødvendig

1. Eksportfil: import og innledende oppsett

Eksportfilen inneholder et ferdiglaget kontaktskjema med feltene: navn, e-post, telefon, tekstområde og Google reCAPTCHA. Skjemaet er opprettet i fire språkversjoner: russisk, ukrainsk, engelsk og tysk.

Import utføres ved hjelp av standard WordPress-verktøyet: Verktøy → Importer → Contact Form 7 → Kjør importør. Velg den nedlastede XML-filen, så vil skjemaene vises i «Skjemaer»-delen.

Rett etter import går du til e-postmalen for hvert skjema under fanen E-post. Erstatt tre ting:

• «Til»-feltet: skriv inn din faktiske e-postadresse;
• «Fra»-feltet: adressen må være på nettstedets domene (for eksempel [email protected]), ellers havner e-postene i søppelpost;
• Logobanen: finn <img src="/Logo-150x150.png">-taggen i e-postinnholdet og erstatt den med den fullstendige URL-en til logoen fra nettstedet ditt.

Uten å erstatte e-postadressene vil ikke skjemaet sende e-post. Dette er en vanlig årsak til at CF7 «ikke fungerer» etter import.

2. CSS-stiler: fullstendig gjennomgang

Nedenfor finner du stilsettet vi bruker på hvert nye prosjekt. Kopier det inn i det aktive temaets style.css eller i Tilleggs-CSS (Utseende → Tilpass → Tilleggs-CSS). Det andre alternativet er å foretrekke: stilene går ikke tapt når temaet oppdateres.

2.1. Svarmeldinger og validering

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output er blokken som vises etter innsending (suksess eller feil). Som standard forstyrrer den flyten; den negative margin-top trekker den nærmere skjemaet. .wpcf7-not-valid-tip er det røde hintet under et uutfylt felt; her er teksten sentrert og i fet skrift for synlighet.

2.2. Inndatafelt og tekstområder

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

Selektoren input.wpcf7-form-control retter seg mot alle CF7-tekstfelt. textarea#TextareaJA er en egendefinert identifikator fra vårt skjema; hvis skjemaet ditt har en annen ID, erstatt den med den riktige. Fokusrammefargen #709242 er en olivengrønn som er rolig og behagelig for øynene.

2.3. Send-knapp

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

Knappen har en grønn bakgrunn #5a8f2b med en hvit stiplet kantlinje. Ved hover inverteres fargene: hvit bakgrunn, grønn tekst og kantlinje. Hvis grønt ikke er i merkevarens palett, erstatt #5a8f2b med din aksentfarge i begge reglene (standard og hover).

2.4. Forhåndslaster og lasteindikator

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

Den snurrende CF7-innsendingsindikatoren klistrer seg til kanten som standard. Her er den tvunget sentrert via margin-left/right: auto og display: block. !important-deklarasjonene er nødvendige fordi pluginen selv legger på innebygde stiler på lasteren.

2.5. Google reCAPTCHA-justering

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

reCAPTCHA-blokken er venstrestilt som standard. Ved å bruke margin-left/right: auto med en fast bredde på 300px sentreres den i skjemaet.

2.6. Mobilresponsivitet

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

På skjermer under 768px får valideringshintet ekstra bunnmarg for å unngå kollisjon med neste felt. Tekstfeltene er begrenset i høyde, noe som hindrer overdreven strekking på mobile enheter.

2.7. Skjule tjenesteelementer

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 dupliserer valideringsfeil som standard: både i tooltipet og i den generelle blokken under skjemaet. Vi skjuler den generelle blokken (.wpcf7-validation-errors) og suksessmeldingen (.wpcf7-mail-sent-ok), siden hintene i .wpcf7-not-valid-tip er tilstrekkelige. Stilene for .screen-reader-response er relevante når skjemaet plasseres på en mørk bakgrunn.

2.8. Sentrere plassholdertekst

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

Plassholderteksten inne i feltet er sentrert bare så lenge feltet er tomt. Når brukeren begynner å skrive, følger teksten normal justering. #TextareaJA er identifikatoren fra vårt skjema; erstatt den med den korrekte for ditt skjema.

2.9. Bonus: stiler for mørk bakgrunn

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Hvis skjemaet plasseres i en blokk med mørk fyll, må feilmeldinger forbli lesbare. Feilteksten blir hvit (aliceblue), og tooltipet får en lys bakgrunn.

2.10. Ytterligere forbedringer

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Tekstfelt for e-post og telefon er sentrert, noe som ser ryddigere ut når skjemaet består av 3-4 felt. Blokken div#recapcha-popups er en spesifikk selektor for tilfeller der skjemaet er innebygd i et popup-vindu.

3. Konfigurere e-postmalen

Etter import av skjemaer må du huske å sjekke E-post-fanen i hvert skjemaredigeringsprogram. CF7 bruker disse innstillingene til å sende e-postvarsler:

• Til: adressen der innsendinger ankommer. Som standard inneholder den en plassholder fra eksporten; erstatt den med din;
• Fra: e-postheaderen. Avsenderadressen må være på nettstedets domene, ellers havner e-poster i spam eller leveres ikke i det hele tatt;
• Emne: du kan beholde standarden eller legge til nettstedets navn;
• Meldingstekst: en HTML-mal med logoen. Erstatt src="/Logo-150x150.png" med full URL til logoen din.

Hvis du trenger flere tagger for malen, er hele listen tilgjengelig i den offisielle dokumentasjonen på contactform7.com.

4. Optimalisere CF7-skriptlasting

Som standard laster Contact Form 7 CSS og JavaScript på hver side av nettstedet, selv der det ikke finnes noe skjema. Dette er unødvendige forespørsler som senker lastetiden.

Fra og med versjon 5.9 la utvikleren til et innebygd alternativ for å kontrollere lasting: i wp-config.php kan du sette konstantene WPCF7_LOAD_JS og WPCF7_LOAD_CSS til false, så lastes skript bare på sider med et skjema. Mer detaljer i CF7-dokumentasjonen.

For finere kontroll (bare bestemte sider), bruk en kodesnutt i functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Denne kodesnutten fjerner CF7-skript fra alle sider unntatt de som er spesifisert i is_page()-arrayen. Erstatt 'contact' og 'order' med slugene til dine sider som inneholder skjemaer.

⁉️🤔 Ofte stilte spørsmål

Skjemaer sendes ikke etter import. Hva bør jeg gjøre?

Sjekk først «E-post»-fanen: feltene «Til» og «Fra». Eksportfilen inneholder plassholdere der. «Til» må inneholde en faktisk e-postadresse, og «Fra» må være en adresse på nettstedets domene. Hvis domenet ikke samsvarer, vil mottakerens e-postserver avvise e-posten som søppelpost.

Hvor er det best å plassere CSS-stiler: i temaets style.css eller i Tilleggs-CSS?

Tilleggs-CSS er å foretrekke. Når temaet oppdateres, blir style.css overskrevet, men Tilleggs-CSS blir det ikke. Ulempen: stiler i Tilleggs-CSS lastes inline i <head> i stedet for som en ekstern fil, men for 100-150 linjer med CSS er hastighetsforskjellen ubetydelig.

Hvordan endrer jeg knappefarger for å matche kundens merkevare?

Finn de to reglene for input.wpcf7-form-control.wpcf7-submit i stilene (standard og hover). Erstatt #5a8f2b med merkevarens aksentfarge i background-egenskapen til hovedregelen og i color- og border-egenskapene til hover-regelen. Ingenting annet trenger å endres.

Hvorfor forskyves reCAPTCHA mot venstre på mobil?

.g-recaptcha-blokken i stilene våre har en fast standardbredde. På svært smale skjermer kan det hende den ikke passer. Legg til en regel med transform: scale() og transform-origin: left i media queryen, så vil reCAPTCHA proporsjonalt krympe for å passe enhver skjerm.

Stiler blir ikke tatt i bruk. Hva er årsaken?

Tre vanlige årsaker: (1) nettleserbuffer (åpne nettstedet i inkognitomodus); (2) buffer fra en ytelsesplugin (WP Rocket, LiteSpeed) som må tømmes; (3) innlastingsrekkefølge, siden CF7 laster sin CSS sist. Legg til !important i den motstridende regelen eller øk selektorens spesifisitet ved å legge til en overordnet klasse.

Hvordan bekrefter jeg at skjemaet faktisk fungerer etter konfigurasjon?

Send en test-e-post gjennom skjemaet på selve nettstedet. Hvis e-posten ikke kommer frem, sjekk søppelpostmappen. Hvis den ikke er der heller, sett opp en SMTP-plugin (for eksempel FluentSMTP eller Post SMTP). Uten SMTP sender WordPress via wp_mail(), og mange hoster blokkerer slike e-poster.

Styling av CF7: raskt, én gang, og for alle prosjekter

En forberedt eksportfil og et raffinert stilsett sparer 15 til 30 minutter på hvert nye prosjekt. I stedet for å manuelt finjustere margin-top: -14px gjennom prøving og feiling, får du et skjema med felt, knapp og validering allerede ordnet. Det eneste som gjenstår er å sette inn e-post og logo.

Hvis den grønne paletten #5a8f2b ikke passer designet, bytt ut aksentfargen med din egen. Hvis skjemaet er innebygd i en popup, legg til en selektor med popupens ID som vist i avsnitt 2.10. Hvis nettstedet er flerspråklig, bruk språkduplikatene fra eksporten (RU/UK/EN/DE).

På prosjekter uten designer dekker dette stilsettet de aller fleste behov for et anstendig utseende kontaktskjema. På prosjekter med designer fungerer det som et fundament for finere tilpasning.

Lagre stilene som en snippet, så vil ditt neste CF7-oppsett ta nøyaktig to minutter.