Contact Form 7 -lisäosan oletustyylit ovat ensimmäinen asia, jonka huomaat asennuksen jälkeen. Kapeat syöttökentät, pelkistetty lähetyspainike ja virheilmoitukset, joihin ei ole panostettu ulkoasua lainkaan. Kun olet pystyttänyt tusinan verran sivustoja, et enää laske, kuinka monta kertaa olet käsin muokannut style.css-tiedostoa, ja se on aina sama rutiini.

Valmis lomakkeen vientitiedosto ratkaisee tämän ongelman. Tuot valmiin lomakkeen, jossa on esimääritellyt tyylit: kentät, painike, validointi ja reCAPTCHA näyttävät kelvollisilta heti aktivoinnin jälkeen. Jäljelle jää vain sähköpostiosoitteiden ja logopolun korvaaminen omaa projektiasi varten.

Alla on täydellinen erittely CSS-säännöistä, joita käytämme projekteissamme, sekä vientitiedosto nopeaa aloitusta varten. Tyylit on testattu Contact Form 7 -versiolla 6.x ja ne ovat ajan tasalla vuodelle 2026.

💡 Pikakatsaus:

• Lataa lomakkeen vientitiedosto ja tuo se WordPressiin vakiotyökalulla
• Korvaa sähköpostiosoitteet sähköpostipohjassa ja logopolku
• Kopioi CSS-tyylit teemasi style.css-tiedostoon tai Lisä-CSS-osioon
• Mukauta värit ja fontit projektisi brändiin tarvittaessa

1. Vientitiedosto: tuonti ja alkuasetukset

Vientitiedosto sisältää valmiin yhteydenottolomakkeen, jossa on kentät: nimi, sähköposti, puhelin, tekstialue ja Google reCAPTCHA. Lomake on luotu neljällä kieliversiolla: venäjä, ukraina, englanti ja saksa.

Tuonti tehdään WordPressin vakiotyökalulla: Työkalut → Tuo → Contact Form 7 → Suorita tuoja. Valitse ladattu XML-tiedosto, ja lomakkeet ilmestyvät "Lomakkeet"-osioon.

Heti tuonnin jälkeen siirry kunkin lomakkeen sähköpostipohjaan Sähköposti-välilehdellä. Korvaa kolme asiaa:

• "Vastaanottaja"-kenttä: syötä todellinen sähköpostiosoitteesi;
• "Lähettäjä"-kenttä: osoitteen on oltava sivuston verkkotunnuksessa (esimerkiksi [email protected]), muuten sähköpostit päätyvät roskapostiin;
• Logopolku: etsi sähköpostin rungosta <img src="/Logo-150x150.png"> -tagi ja korvaa se logosi täydellisellä URL-osoitteella sivustoltasi.

Ilman sähköpostiosoitteiden korvaamista lomake ei lähetä sähköposteja. Tämä on yleinen syy, miksi CF7 "ei toimi" tuonnin jälkeen.

2. CSS-tyylit: täydellinen erittely

Alla on tyylisetti, jonka otamme käyttöön jokaisessa uudessa projektissa. Kopioi se aktiivisen teeman style.css-tiedostoon tai Lisä-CSS-osioon (Ulkoasu → Mukauta → Lisä-CSS). Jälkimmäinen vaihtoehto on suositeltavampi: tyylit eivät katoa teeman päivityksen yhteydessä.

2.1. Vastausviestit ja validointi

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 on lohko, joka ilmestyy lähetyksen jälkeen (onnistuminen tai virhe). Oletuksena se rikkoo asettelun; negatiivinen margin-top vetää sen lähemmäs lomaketta. .wpcf7-not-valid-tip on punainen vihje täyttämättömän kentän alla; tässä teksti on keskitetty ja lihavoitu näkyvyyden vuoksi.

2.2. Syöttökentät ja tekstialueet

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
}

Valitsin input.wpcf7-form-control kohdistaa kaikkiin CF7-tekstikenttiin. textarea#TextareaJA on mukautettu tunniste lomakkeestamme; jos lomakkeessasi on eri ID, korvaa se oikealla. Fokuksen reunuksen väri #709242 on hillitty oliivinvihreä, joka on rauhallinen ja silmille miellyttävä.

2.3. Lähetyspainike

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
}

Painikkeessa on vihreä tausta #5a8f2b ja valkoinen katkoviivareunus. Hover-tilassa värit kääntyvät: valkoinen tausta, vihreä teksti ja reunus. Jos vihreä ei kuulu brändisi väripalettiin, korvaa #5a8f2b korostusvärilläsi molemmissa säännöissä (oletus ja hover).

2.4. Esilataaja ja latausilmaisin

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
}

CF7:n pyörivä lähetyksen ilmaisin pysyy oletuksena reunassa. Tässä se pakotetaan keskelle margin-left/right: auto- ja display: block -määrityksillä. !important-julistukset ovat välttämättömiä, koska lisäosa itse soveltaa inline-tyylejä latausilmaisimeen.

2.5. Google reCAPTCHA -tasaus

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-lohko on oletuksena vasemmalle tasattu. Käyttämällä margin-left/right: auto ja kiinteää 300 pikselin leveyttä se keskitetään lomakkeen sisällä.

2.6. Mobiiliresponsiivisuus

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
}

Alle 768 pikselin näytöillä validointivihje saa ylimääräistä alamarginaalia, jotta se ei törmää seuraavaan kenttään. Tekstikenttien korkeus on rajoitettu, mikä estää liiallisen venymisen mobiililaitteilla.

2.7. Palveluelementtien piilottaminen

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 toistaa validointivirheet oletuksena: sekä työkaluvihjeessä että lomakkeen alla olevassa yleisessä lohkossa. Piilotamme yleisen lohkon (.wpcf7-validation-errors) ja onnistumisviestin (.wpcf7-mail-sent-ok), koska .wpcf7-not-valid-tip-vihjeet ovat riittävät. .screen-reader-response-tyylit ovat olennaisia, kun lomake sijoitetaan tummalle taustalle.

2.8. Paikkamerkkien keskittäminen

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
}

Kentän sisällä oleva paikkamerkkiteksti on keskitetty vain silloin, kun kenttä on tyhjä. Kun käyttäjä alkaa kirjoittaa, teksti noudattaa normaalia tasausta. #TextareaJA on tunniste omasta lomakkeestamme; korvaa se omalle lomakkeellesi oikealla tunnisteella.

2.9. Bonus: tyylit tummille taustoille

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
}

Jos lomake sijoitetaan lohkoon, jossa on tumma täyttö, virheilmoitusten on pysyttävä luettavina. Virheteksti muuttuu valkoiseksi (aliceblue), ja työkaluvihje saa vaalean taustan.

2.10. Muita parannuksia

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
}

Sähköpostin ja puhelimen tekstikentät ovat keskitettyjä, mikä näyttää siistimmältä, kun lomake koostuu 3-4 kentästä. Lohko div#recapcha-popups on erityinen valitsin tilanteisiin, joissa lomake on upotettu ponnahdusikkunaan.

3. Sähköpostipohjan määrittäminen

Kun olet tuonut lomakkeet, tarkista jokaisen lomake-editorin Mail-välilehti. CF7 käyttää näitä asetuksia sähköposti-ilmoitusten lähettämiseen:

• To: osoite, johon lähetykset saapuvat. Oletuksena se sisältää viennistä peräisin olevan paikkamerkin; korvaa se omallasi;
• From: sähköpostin otsikkotieto. Lähettäjän osoitteen on oltava sivuston verkkotunnuksella, muuten sähköpostit päätyvät roskapostiin tai niitä ei toimiteta lainkaan;
• Subject: voit pitää oletuksen tai lisätä sivuston nimen;
• Message Body: HTML-pohja, jossa on logo. Korvaa src="/Logo-150x150.png" logosi täydellisellä URL-osoitteella.

Jos tarvitset pohjaan lisää tageja, täydellinen luettelo löytyy virallisesta dokumentaatiosta osoitteessa contactform7.com.

4. CF7-skriptien latauksen optimointi

Oletuksena Contact Form 7 lataa CSS:n ja JavaScriptin jokaisella sivuston sivulla, myös siellä, missä lomaketta ei ole. Nämä ovat tarpeettomia pyyntöjä, jotka hidastavat latautumista.

Versiosta 5.9 alkaen kehittäjä lisäsi natiivin vaihtoehdon latauksen hallintaan: wp-config.php-tiedostossa voit asettaa vakiot WPCF7_LOAD_JS ja WPCF7_LOAD_CSS arvoon false, jolloin skriptit latautuvat vain sivuilla, joilla on lomake. Lisätietoja CF7-dokumentaatiossa.

Tarkempaa hallintaa varten (vain tietyt sivut) käytä koodinpätkää functions.php-tiedostossa:

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
}

Tämä koodinpätkä poistaa CF7-skriptit kaikilta sivuilta paitsi niiltä, jotka on määritelty is_page()-taulukossa. Korvaa 'contact' ja 'order' niiden sivujesi polkutunnuksilla, jotka sisältävät lomakkeita.

⁉️🤔 Usein kysytyt kysymykset

Lomakkeet eivät lähetä tuonnin jälkeen. Mitä minun pitäisi tehdä?

Tarkista ensin "Mail"-välilehti: "To"- ja "From"-kentät. Vientitiedosto sisältää niissä paikkamerkkejä. "To"-kentässä täytyy olla oikea sähköpostiosoite, ja "From"-kentässä on oltava osoite sivuston omalta verkkotunnukselta. Jos verkkotunnus ei täsmää, vastaanottajan sähköpostipalvelin hylkää viestin roskapostina.

Kumpi on parempi paikka CSS-tyyleille: teeman style.css vai Lisä-CSS?

Lisä-CSS on suositeltavampi. Kun teema päivittyy, style.css ylikirjoittuu, mutta Lisä-CSS ei. Huono puoli: Lisä-CSS:n tyylit ladataan inline-muodossa <head>-elementissä ulkoisen tiedoston sijaan, mutta 100-150 CSS-rivin kohdalla nopeusero on merkityksetön.

Miten vaihdan painikkeiden värit vastaamaan asiakkaan brändiä?

Etsi tyyleistä kaksi sääntöä input.wpcf7-form-control.wpcf7-submit-valitsimelle (oletus ja hover). Korvaa #5a8f2b brändin korostusvärillä pääsäännön background-ominaisuudessa sekä hover-säännön color- ja border-ominaisuuksissa. Mitään muuta ei tarvitse muuttaa.

Miksi reCAPTCHA siirtyy vasemmalle mobiilissa?

.g-recaptcha-lohkolla on tyyleissämme kiinteä vakioleveys. Hyvin kapeilla näytöillä se ei välttämättä mahdu. Lisää media queryyn sääntö, jossa on transform: scale() ja transform-origin: left, niin reCAPTCHA skaalautuu suhteessa mahtuakseen mille tahansa näytölle.

Tyylit eivät tule voimaan. Mikä on syynä?

Kolme yleistä syytä: (1) selaimen välimuisti (avaa sivusto incognito-tilassa); (2) suorituskykyliitännäisen (WP Rocket, LiteSpeed) välimuisti, joka täytyy tyhjentää; (3) latausjärjestys, sillä CF7 lataa oman CSS:nsä viimeisenä. Lisää !important ristiriitaiseen sääntöön tai kasvata valitsimen tarkkuutta lisäämällä sille ylätason luokka.

Miten varmistan, että lomake todella toimii määritysten jälkeen?

Lähetä testiviesti lomakkeen kautta itse sivustolla. Jos viesti ei saavu, tarkista roskapostikansio. Jos se ei ole sielläkään, asenna SMTP-liitännäinen (esimerkiksi FluentSMTP tai Post SMTP). Ilman SMTP:tä WordPress lähettää wp_mail()-funktiolla, ja monet palveluntarjoajat estävät tällaiset viestit.

CF7:n tyylittely: nopeasti, kerralla ja kaikkiin projekteihin

Valmis vientitiedosto ja hiottu tyylisarja säästävät 15-30 minuuttia jokaisessa uudessa projektissa. Sen sijaan, että virittelisit margin-top: -14px -arvoa yrityksen ja erehdyksen kautta, saat lomakkeen, jossa kentät, painike ja validointi ovat jo kohdallaan. Jäljelle jää vain sähköpostiosoitteen ja logon lisääminen.

Jos vihreä paletti #5a8f2b ei sovi designiin, korvaa korostusväri omallasi. Jos lomake upotetaan popup-ikkunaan, lisää valitsin popupin ID:llä kuten osiossa 2.10 näytettiin. Jos sivusto on monikielinen, käytä viennin kieliversioita (RU/UK/EN/DE).

Projekteissa, joissa ei ole suunnittelijaa, tämä tyylisarja kattaa valtaosan tarpeista asiallisen näköiselle yhteydenottolomakkeelle. Projekteissa, joissa on suunnittelija, se toimii pohjana hienosäätöä varten.

Tallenna tyylit pätkänä, niin seuraava CF7-asetuksesi vie tasan kaksi minuuttia.