Kontaktivorm 7 vaikestiilid on esimene asi, mida pärast pluginat installimist märkad. Kitsad sisestusväljad, tavaline saatmisnupp ja veateated, mille kujundusse pole vaeva nähtud. Pärast tosina saidi ülesseadmist kaotad järje, mitu korda sa style.css-i käsitsi muutsid, ja see on alati sama rutiin.

Valmis vormi ekspordifail lahendab selle probleemi. Impordid valmiskujul vormi koos eelhäälestatud stiilidega: väljad, nupp, valideerimine ja reCAPTCHA näevad kohe pärast aktiveerimist korralikud välja. Jääb üle vaid asendada meiliaadressid ja logo tee oma konkreetse projekti jaoks.

Allpool on täielik ülevaade meie projektides kasutatavatest CSS-reeglitest ning ekspordifail kiireks alustamiseks. Stiile on testitud Kontaktivorm 7 versiooniga 6.x ja need on ajakohased 2026. aasta seisuga.

💡 Kiirülevaade:

• Laadi vormi ekspordifail alla ja impordi see WordPressi standardsel meetodil
• Asenda meiliaadressid meilimallis ja logo tee
• Kopeeri CSS-stiilid oma teema style.css-i või Lisatud CSS-i
• Kohanda värve ja fonte vastavalt oma projekti brändile

1. Ekspordifail: import ja esmane seadistus

Ekspordifail sisaldab valmis kontaktivormi väljadega: nimi, e-post, telefon, tekstiala ja Google reCAPTCHA. Vorm on loodud neljas keeleversioonis: vene, ukraina, inglise ja saksa.

Importimine toimub standardse WordPressi tööriista abil: Tööriistad → Impordi → Kontaktivorm 7 → Käivita importija. Vali allalaaditud XML-fail ja vormid ilmuvad jaotisesse „Vormid".

Kohe pärast importimist mine iga vormi meilimalli juurde vahekaardi Mail all. Asenda kolm asja:

• Väli „To": sisesta oma tegelik e-posti aadress;
• Väli „From": aadress peab olema saidi domeenilt (näiteks [email protected]), vastasel juhul satuvad kirjad rämpsposti;
• Logo tee: leia meili sisust <img src="/Logo-150x150.png"> silt ja asenda see oma saidi logo täis-URL-iga.

Ilma meiliaadresse asendamata vorm e-kirju ei saada. See on levinud põhjus, miks CF7 pärast importimist „ei tööta".

2. CSS-stiilid: täielik ülevaade

Allpool on stiilikomplekt, mida rakendame igale uuele projektile. Kopeeri see aktiivse teema style.css-i või Lisatud CSS-i (Välimus → Kohanda → Lisatud CSS). Teine variant on eelistatum: stiilid ei kao teema uuendamisel.

2.1. Vastussõnumid ja valideerimine

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 plokk, mis ilmub pärast saatmist (edukas või veateade). Vaikimisi lõhub see paigutuse; negatiivne margin-top tõmbab selle vormile lähemale. .wpcf7-not-valid-tip on punane vihje täitmata välja all; siin on tekst nähtavuse huvides keskele joondatud ja paksus kirjas.

2.2. Sisestusväljad ja tekstialad

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
}

Selektor input.wpcf7-form-control on suunatud kõigile CF7 tekstiväljadele. textarea#TextareaJA on meie vormi kohandatud identifikaator; kui sinu vormil on teine ID, asenda see õigega. Fookuse äärise värv #709242 on oliivroheline, mis on rahulik ja silmasõbralik.

2.3. Saatmisnupp

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
}

Nupul on roheline taust #5a8f2b valge kriipsjoonega äärisega. Hõljumisel värvid pöörduvad: valge taust, roheline tekst ja ääris. Kui roheline ei kuulu sinu brändipaletti, asenda #5a8f2b mõlemas reeglis (vaikimisi ja hõljumine) oma aktsentvärviga.

2.4. Eellaadur ja laadimisindikaator

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 saatmise pöörlev indikaator jääb vaikimisi serva külge. Siin on see sunniviisiliselt tsentreeritud margin-left/right: auto ja display: block abil. !important deklaratsioonid on vajalikud, sest plugin ise rakendab laadurile reasiseseid stiile.

2.5. Google reCAPTCHA joondus

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 plokk joondub vaikimisi vasakule. Kasutades margin-left/right: auto koos fikseeritud laiusega 300px, tsentreeritakse see vormi sees.

2.6. Mobiilne kohanduvus

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
}

Ekraanidel, mis on kitsamad kui 768px, saab valideerimisvihje täiendava alumise veerise, et vältida kokkupõrget järgmise väljaga. Tekstiväljade kõrgus on piiratud, mis hoiab ära liigse venimise mobiilseadmetes.

2.7. Teeninduselementide peitmine

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 dubleerib valideerimisvead vaikimisi: nii vihjes kui ka üldises plokis vormi all. Me peidame üldise ploki (.wpcf7-validation-errors) ja edastusteate (.wpcf7-mail-sent-ok), kuna .wpcf7-not-valid-tip vihjed on piisavad. .screen-reader-response stiilid on asjakohased, kui vorm on paigutatud tumedale taustale.

2.8. Kohatäidete tsentreerimine

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
}

Välja sees olev kohatäite tekst on tsentreeritud ainult siis, kui väli on tühi. Kui kasutaja hakkab tippima, järgib tekst tavalist joondust. #TextareaJA on meie vormi identifikaator; asenda see oma vormi õige identifikaatoriga.

2.9. Boonus: stiilid tumedatele taustadele

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
}

Kui vorm on paigutatud tumeda täidisega plokki, peavad veateated jääma loetavaks. Veateate tekst muutub valgeks (aliceblue) ja vihje saab heleda tausta.

2.10. Täiendavad täiustused

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
}

E-posti ja telefoni tekstiväljad on tsentreeritud, mis näeb korralikum välja, kui vorm koosneb 3-4 väljast. Plokk div#recapcha-popups on spetsiifiline selektor juhtudeks, kui vorm on manustatud hüpikaknasse.

3. E-posti malli seadistamine

Pärast vormide importimist kontrolli kindlasti iga vormiredaktori vahekaarti Mail. CF7 kasutab neid seadeid e-posti teavituste saatmiseks:

• To: aadress, kuhu pöördumised saabuvad. Vaikimisi sisaldab see ekspordist pärit kohatäidet; asenda see enda omaga;
• From: e-kirja päis. Saatja aadress peab olema saidi domeenil, vastasel juhul lähevad kirjad rämpsposti või ei jõua üldse kohale;
• Subject: võid jätta vaikimisi pealkirja või lisada saidi nime;
• Message Body: HTML mall koos logoga. Asenda src="/Logo-150x150.png" oma logo täieliku URL-iga.

Kui vajad malli jaoks täiendavaid silte, on täielik nimekiri saadaval ametlikus dokumentatsioonis aadressil contactform7.com.

4. CF7 skriptide laadimise optimeerimine

Vaikimisi laeb Contact Form 7 CSS-i ja JavaScripti igal saidi lehel, isegi seal, kus vormi pole. Need on tarbetud päringud, mis aeglustavad laadimist.

Alates versioonist 5.9 lisas arendaja natiivse võimaluse laadimise kontrollimiseks: failis wp-config.php saad seada konstandid WPCF7_LOAD_JS ja WPCF7_LOAD_CSS väärtusele false ning skripte laetakse ainult vormiga lehtedel. Täpsemalt CF7 dokumentatsioonis.

Peenema kontrolli jaoks (ainult kindlad lehed) kasuta järgmist koodijuppi failis 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
}

See koodijupp eemaldab CF7 skriptid kõigilt lehtedelt, välja arvatud need, mis on määratud massiivis is_page(). Asenda 'contact' ja 'order' oma vorme sisaldavate lehtede püsilinkidega.

⁉️🤔 Korduma kippuvad küsimused

Vormid ei saada pärast importimist. Mida teha?

Esmalt kontrolli vahekaarti „Mail": välju „To" ja „From". Ekspordifail sisaldab seal kohatäiteid. „To" peab sisaldama tegelikku e-posti aadressi ja „From" peab olema aadress saidi domeenil. Kui domeen ei ühti, lükkab saaja meiliserver kirja rämpspostina tagasi.

Kuhu on parem paigutada CSS-stiilid: teema faili style.css või lisatud CSS-i (Additional CSS)?

Lisatud CSS on eelistatum. Kui teema uueneb, kirjutatakse style.css üle, kuid lisatud CSS mitte. Miinus: lisatud CSS-i stiilid laaditakse <head> sees reasisese koodina, mitte välise failina, kuid 100-150 CSS-i rea puhul on kiiruse erinevus tühine.

Kuidas muuta nuppude värve, et need sobiksid kliendi brändiga?

Leia stiilidest kaks reeglit input.wpcf7-form-control.wpcf7-submit jaoks (vaikimisi ja hõljumine). Asenda #5a8f2b brändi aktsentvärviga põhireegli background omaduses ning hõljumisreegli color ja border omadustes. Midagi muud pole vaja muuta.

Miks reCAPTCHA nihkub mobiilis vasakule?

Meie stiilides oleval .g-recaptcha plokil on fikseeritud standardlaius. Väga kitsastel ekraanidel ei pruugi see ära mahtuda. Lisa meediapäringusse reegel transform: scale() ja transform-origin: left-iga ning reCAPTCHA kahaneb proportsionaalselt, et sobida igale ekraanile.

Stiile ei rakendata. Milles põhjus?

Kolm levinud põhjust: (1) brauseri vahemälu (ava sait inkognito režiimis); (2) jõudluspluginast (WP Rocket, LiteSpeed) tulenev vahemälu, mis tuleb tühjendada; (3) laadimisjärjekord, kuna CF7 laadib oma CSS-i viimasena. Lisa vastuolulisele reeglile !important või suurenda selektori spetsiifilisust, lisades vanemklassi.

Kuidas kontrollida, kas vorm pärast seadistamist tegelikult töötab?

Saada testkiri läbi vormi saidil endal. Kui kiri ei saabu, kontrolli rämpsposti kausta. Kui seda ka seal pole, seadista SMTP-plugin (näiteks FluentSMTP või Post SMTP). Ilma SMTP-ta saadab WordPress kirju läbi wp_mail() funktsiooni ja paljud hostid blokeerivad sellised kirjad.

CF7 stiilimine: kiirelt, ühekordselt ja kõikide projektide jaoks

Valmis ekspordifail ja viimistletud stiilikomplekt säästavad igal uuel projektil 15 kuni 30 minutit. Selle asemel, et katse-eksituse meetodil käsitsi margin-top: -14px paika timmida, saad vormi, mille väljad, nupp ja valideerimine on juba paigas. Jääb üle vaid sisestada e-post ja logo.

Kui roheline palett #5a8f2b kujundusega ei sobi, asenda aktsentvärv enda omaga. Kui vorm on manustatud hüpikaknasse, lisa selektor koos hüpikakna ID-ga, nagu näidatud jaotises 2.10. Kui sait on mitmekeelne, kasuta ekspordis olevaid keeleduublikaid (RU/UK/EN/DE).

Projektide puhul, kus disainerit pole, katab see stiilikomplekt valdava enamuse vajadustest korraliku kontaktvormi välimuse osas. Projektide puhul, kus disainer on olemas, on see aluseks peenemale kohandamisele.

Salvesta stiilid fragmendina ja sinu järgmine CF7 seadistamine võtab täpselt kaks minutit.