Standardstilarna för Contact Form 7 är det första du märker efter att du installerat tillägget. Smala inmatningsfält, en enkel skicka-knapp och felmeddelanden utan minsta designinsats. Efter att ha satt upp ett dussin sajter tappar du räkningen på hur många gånger du manuellt redigerat style.css, och det är alltid samma rutin.

En förberedd formulärexportfil löser detta problem. Du importerar ett färdigt formulär med förkonfigurerade stilar: fälten, knappen, valideringen och reCAPTCHA ser okej ut direkt efter aktivering. Det enda som återstår är att byta ut e-postadresserna och logotypens sökväg för ditt specifika projekt.

Här nedan följer en fullständig genomgång av de CSS-regler vi använder i våra projekt, plus en exportfil för en snabb start. Stilarna har testats på Contact Form 7 version 6.x och är aktuella per 2026.

💡 Snabb översikt:

• Ladda ner formulärexportfilen och importera den till WordPress med standardmetoden
• Byt ut e-postadresserna i e-postmallen och logotypens sökväg
• Kopiera CSS-stilarna till ditt temas style.css eller till ytterligare CSS
• Anpassa färger och typsnitt till ditt projekts varumärke vid behov

1. Exportfil: import och grundläggande inställningar

Exportfilen innehåller ett färdigt kontaktformulär med fälten: namn, e-post, telefon, textfält och Google reCAPTCHA. Formuläret finns i fyra språkversioner: ryska, ukrainska, engelska och tyska.

Importen görs med standardverktyget i WordPress: Verktyg → Importera → Contact Form 7 → Kör import. Välj den nedladdade XML-filen så visas formulären i avsnittet "Formulär".

Gå direkt efter importen till e-postmallen för varje formulär under fliken E-post. Byt ut tre saker:

• Fältet "Till": ange din faktiska e-postadress;
• Fältet "Från": adressen måste ligga på sajtens domän (till exempel [email protected]), annars hamnar mejlen i skräpposten;
• Logotypens sökväg: hitta taggen <img src="/Logo-150x150.png"> i e-postmeddelandets brödtext och ersätt den med den fullständiga webbadressen till logotypen från din sajt.

Utan att byta ut e-postadresserna kommer formuläret inte att skicka e-post. Detta är en vanlig orsak till att CF7 "inte fungerar" efter import.

2. CSS-stilar: fullständig genomgång

Här nedan är den stiluppsättning vi tillämpar på varje nytt projekt. Kopiera den till det aktiva temats style.css eller till Ytterligare CSS (Utseende → Anpassa → Ytterligare CSS). Det andra alternativet är att föredra: stilarna går inte förlorade när temat uppdateras.

2.1. Svarsmeddelanden och 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 är blocket som visas efter inskickning (lyckat eller fel). Som standard stör det flödet; den negativa margin-top drar det närmare formuläret. .wpcf7-not-valid-tip är den röda markeringen under ett ofyllt fält; här är texten centrerad och fetstilt för synlighetens skull.

2.2. Inmatningsfält och textfält

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
}

Selektorn input.wpcf7-form-control riktar in sig på alla CF7-textfält. textarea#TextareaJA är en anpassad identifierare från vårt formulär; om ditt formulär har ett annat ID, ersätt det med det korrekta. Fokusramens färg #709242 är en olivgrön som är lugn och skonsam för ögonen.

2.3. Skicka-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ön bakgrund #5a8f2b med en vit streckad ram. Vid hover inverteras färgerna: vit bakgrund, grön text och ram. Om grönt inte ingår i ditt varumärkes palett, ersätt #5a8f2b med din accentfärg i båda reglerna (standard och hover).

2.4. Förladdare och laddningsindikator

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 snurrande CF7-inskickningsindikatorn klistrar mot kanten som standard. Här tvingas den centreras via margin-left/right: auto och display: block. Deklarationerna med !important är nödvändiga eftersom tillägget självt applicerar inline-stilar på laddaren.

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-blocket är vänsterställt som standard. Med margin-left/right: auto och en fast bredd på 300px centreras det i formuläret.

2.6. Mobilanpassning

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å skärmar mindre än 768px får valideringstipset extra bottenmarginal för att inte krocka med nästa fält. Textfälten har en begränsad höjd, vilket förhindrar att de sträcks ut för mycket på mobila enheter.

2.7. Dölja serviceelement

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 duplicerar valideringsfel som standard: både i tooltipen och i det allmänna blocket under formuläret. Vi döljer det allmänna blocket (.wpcf7-validation-errors) och bekräftelsemeddelandet (.wpcf7-mail-sent-ok), eftersom .wpcf7-not-valid-tip-tipsen räcker. Stilarna för .screen-reader-response är relevanta när formuläret placeras på en mörk bakgrund.

2.8. Centrera platshållartext

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
}

Platshållartexten inuti fältet centreras endast när fältet är tomt. När användaren börjar skriva följer texten normal justering. #TextareaJA är identifieraren från vårt formulär; ersätt den med rätt för ditt formulär.

2.9. Bonus: stilar för mörk bakgrund

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
}

Om formuläret placeras i ett block med mörk fyllning måste felmeddelanden förbli läsbara. Feltexten blir vit (aliceblue), och tooltipen får en ljus bakgrund.

2.10. Ytterligare förbättringar

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
}

Textfält för e-post och telefon centreras, vilket ser prydligare ut när formuläret består av 3-4 fält. Blocket div#recapcha-popups är en specifik selektor för fall när formuläret är inbäddat i ett popup-fönster.

3. Konfigurera e-postmallen

Efter import av formulär, kontrollera alltid fliken E-post i varje formulärredigerare. CF7 använder dessa inställningar för att skicka e-postaviseringar:

• Till: adressen dit inskickade meddelanden kommer. Som standard innehåller den en platshållare från exporten; ersätt den med din egen;
• Från: e-posthuvudet. Avsändaradressen måste finnas på webbplatsens domän, annars hamnar e-posten i skräppost eller levereras inte alls;
• Ämne: du kan behålla standardvärdet eller lägga till webbplatsens namn;
• Meddelandetext: en HTML-mall med logotypen. Ersätt src="/Logo-150x150.png" med den fullständiga webbadressen till din logotyp.

Om du behöver ytterligare taggar för mallen finns den fullständiga listan i den officiella dokumentationen på contactform7.com.

4. Optimera laddning av CF7-skript

Som standard laddar Contact Form 7 CSS och JavaScript på varje sida på webbplatsen, även där det inte finns något formulär. Det är onödiga anrop som saktar ner laddningen.

Från och med version 5.9 lade utvecklaren till ett inbyggt alternativ för att styra laddningen: i wp-config.php kan du sätta konstanterna WPCF7_LOAD_JS och WPCF7_LOAD_CSS till false, så laddas skripten bara på sidor med ett formulär. Mer information finns i CF7-dokumentationen.

För finare kontroll (endast specifika sidor), använd ett kodsnutt 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
}

Denna kodsnutt tar bort CF7-skript från alla sidor utom de som anges i is_page()-arrayen. Ersätt 'contact' och 'order' med sökvägarna till dina sidor som innehåller formulär.

⁉️🤔 Vanliga frågor

Formulär skickas inte efter import. Vad ska jag göra?

Kontrollera först fliken "Mail": fälten "Till" och "Från". Exportfilen innehåller platshållare där. "Till" måste innehålla en riktig e-postadress, och "Från" måste vara en adress på webbplatsens domän. Om domänen inte stämmer överens kommer mottagarens e-postserver att avvisa meddelandet som skräppost.

Var är det bättre att placera CSS-stilar: i temats style.css eller i Extra CSS?

Extra CSS är att föredra. När temat uppdateras skrivs style.css över, men Extra CSS gör det inte. Nackdelen: stilar i Extra CSS laddas inline i <head> istället för som en extern fil, men för 100-150 rader CSS är skillnaden i hastighet försumbar.

Hur ändrar jag knappfärger så att de matchar kundens varumärke?

Hitta de två reglerna för input.wpcf7-form-control.wpcf7-submit i stilarna (standard och hover). Ersätt #5a8f2b med varumärkets accentfärg i background-egenskapen för huvudregeln och i color- och border-egenskaperna för hover-regeln. Inget annat behöver ändras.

Varför förskjuts reCAPTCHA åt vänster på mobilen?

Blocket .g-recaptcha i våra stilar har en fast standardbredd. På mycket smala skärmar kan det hända att det inte får plats. Lägg till en regel med transform: scale() och transform-origin: left i media queryn, så kommer reCAPTCHA att skalas ned proportionerligt för att passa alla skärmar.

Stilar tillämpas inte. Vad är orsaken?

Tre vanliga orsaker: (1) webbläsarens cache (öppna webbplatsen i inkognitoläge); (2) cache från ett prestandaplugin (WP Rocket, LiteSpeed) som behöver rensas; (3) laddningsordning, eftersom CF7 laddar sin CSS sist. Lägg till !important i den motstridiga regeln eller öka selektorns specificitet genom att lägga till en föräldraklass.

Hur kontrollerar jag att formuläret faktiskt fungerar efter konfiguration?

Skicka ett testmejl via formuläret på själva webbplatsen. Om mejlet inte kommer fram, kontrollera skräppostmappen. Om det inte finns där heller, konfigurera ett SMTP-plugin (till exempel FluentSMTP eller Post SMTP). Utan SMTP skickar WordPress via wp_mail(), och många webbhotell blockerar sådana mejl.

Styla CF7: snabbt, en gång, och för alla projekt

En förberedd exportfil och en finslipad stiluppsättning sparar 15 till 30 minuter på varje nytt projekt. Istället för att manuellt justera margin-top: -14px genom trial and error får du ett formulär med fält, knapp och validering redan på plats. Allt som återstår är att infoga e-postadressen och logotypen.

Om den gröna paletten #5a8f2b inte passar designen, ersätt accentfärgen med din egen. Om formuläret är inbäddat i en popup, lägg till en selektor med popupens ID enligt avsnitt 2.10. Om webbplatsen är flerspråkig, använd språkduplikaten från exporten (RU/UK/EN/DE).

På projekt utan designer täcker denna stiluppsättning de allra flesta behov för ett snyggt kontaktformulär. På projekt med designer fungerar den som en grund för finare anpassning.

Spara stilarna som ett snippet, så tar din nästa CF7-konfiguration exakt två minuter.