Kasutaja avab vormi, näeb nuppu „Saada", klõpsab sellel ja saab valideerimisvead. Aken tõstab väljad punaselt esile: „Kohustuslik." Kõlab tuttavalt?

Contact Form 7, kõige populaarsem WordPressi vormiplugin, omab üle 5 miljoni aktiivse paigalduse. Kuid vaikimisi näitab see saatmisnuppu alati, isegi kui väljad on tühjad. Kasutaja jaoks tähendab see lisaklikki ja frustratsiooni. Saidihalduri jaoks tähendab see kaotatud müügivihjeid: kolmandik külastajatest, kes puutuvad kokku vormiveaga, lihtsalt lahkuvad ega naase kunagi.

Saate selle parandada kolme rea jQuery abil. Või saate seda teha ilma ühegi skriptita, kasutades puhast CSS-i. Selles ülevaates saate mõlemad lähenemised, lisaks valmis plugin neile, kes koodi puutuda ei soovi.

💡 Kiirülevaade:

• jQuery jälgimine: peida nupp ja näita seda ainult siis, kui teksti pikkus kõigil väljadel jõuab teie seatud piirideni
• Puhas CSS: nipp :valid, :has() ja required atribuudiga, ilma ühegi rea JavaScriptita
• Conditional Fields Contact Form 7 jaoks: visuaalne tingimuste koostaja keerulise loogika jaoks ilma koodita

Miks saatmisnuppu peita

Kasutaja ei peaks arvama, mis valesti läks. Kui nupp on nähtav ja klikitav, kuid vorm pole valmis, tekitab see kognitiivset dissonantsi. Inimene klõpsab, saab veateate, otsib esiletõstetud väljad, parandab need, klõpsab uuesti. Iga selline tsükkel vähendab konversiooni.

Nupp, mis on peidetud seni, kuni kõik on valmis, lahendab kolm probleemi:

• Välistab valed saatmiskatsed. Pole nuppu, pole enneaegset klõpsu.
• Annab visuaalset tagasisidet. Nupu ilmumine = signaal, et vorm on saatmiseks valmis.
• Vähendab hõõrdumist. Kasutaja täidab väljad, nupp ilmub, üks klõps, valmis.

Contact Form 7-l pole selle käitumise jaoks sisseehitatud mehhanismi. Kuid selle lisamine võtab 10 minutit tööd.

Meetod 1: jQuery sisendi jälgimine

Kõige paindlikum lähenemine. Seate ise reeglid: mitu tähemärki peab iga väli sisaldama, enne kui nupp ilmub. Töötab iga väljatüübiga (tekst, e-post, tekstiala, telefon).

Contact Form 7 vormi keha

Näitena võtame standardse kontaktvormi kolme välja, Google reCAPTCHA ja saatmisnupuga. Siin on selle märgendus CF7 redaktoris:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

Vormi sees olev CSS-plokk on lahendus reCAPTCHA venitamiseks konteineri täislaiusele; see tuleb kasuks, kui vorm asub kitsas veerus.

JQuery skript

Kopeerige see kood oma teema faili custom.js või Code Snippets plugina väljale „Additional Scripts":

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

Mis siin toimub:

• Rida 4: nupp peidetakse kohe lehe laadimisel (display: none).
• Rida 7: meetod .on('input', ...) kuulab igat tekstimuutust kolmel väljal (kasutaja trükib, kleebib lõikepuhvrist, kustutab tähemärke). Varem kasutati .keyup(), kuid input on usaldusväärsem: see käivitub ka hiirega kleepimisel.
• Read 8-10: loeme praegused väärtused ja eemaldame tühikud äärtelt .trim() abil.
• Rida 13: tingimuse kontroll. Saate numbreid vastavalt vajadusele muuta: näiteks > 1 võib nimevälja jaoks piisata, > 10 sõnumi jaoks.
• Read 14 ja 16: fadeIn ja fadeOut annavad nupu sujuvaks ilmumiseks ja kadumiseks 200 millisekundi jooksul. See näeb korralikum välja kui järsk show()/hide().

Füüsiliselt on nupu element alati lehe DOM-puus; nähtavust kontrollib CSS-i display omadus. See on ohutu: isegi kui skript ei lae (võrguprobleem, reklaamiblokeerija), jääb nupp lihtsalt nähtavaks ja kasutaja ei kaota võimalust vormi saata.

Kuidas kohandada oma vormi jaoks

Muutke kolme asja:

• Välja ID-d: CF7 märgenduses asendage bim-name, bim-email ja bim-message oma identifikaatoritega.
• Tähemärkide piirangud: if tingimusse sisestage vajalikud numbrid. Telefonivälja puhul saate kontrollida .replace(/\D/g, '').length > 9 (ainult numbrid, vähemalt 10).
• Väljade loend: kui teil on 5 välja, lisage need selektorisse $('#id1, #id2, ...') ja if tingimusse.

[checkbox], [select] või [radio] tüüpi väljade puhul teksti pikkus ei tööta; kontrollige valikut ennast:

1
var agreeChecked = $('#bim-agree').is(':checked');

Meetod 2: puhas CSS ilma skriptideta

Lihtsate, ühe või kahe väljaga vormide puhul saate JavaScripti täielikult vahele jätta. Idee on selles, et kaasaegsed brauserid saavad kontrollida välja kehtivust :valid pseudoklassi abil ja CSS-i kombinaator :has() (toetatud kõigis brauserites alates 2023. aastast) võimaldab vaadata "sisse" vanemelementi.

See töötab nii:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Kuid on üks nüanss: CF7 ei lisa required atribuuti väljadele automaatselt. Peate selle käsitsi vormi märgendusse lisama; tärn * välja nime kõrval CF7 redaktoris on piisav:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

Tärn pärast välja tüüpi (text*, email*) lubab kohustuslikkuse staatuse. CF7 ise lisab HTML-i required atribuudi <input> sildi sisse ja CSS-i selektor töötab.

CSS-meetodi eelis: null skripti, see ei purune jQuery konfliktide korral ja töötab isegi siis, kui JavaScript on keelatud. Puudus: loogika on lihtsam („kõik kohustuslikud väljad on täidetud" versus „nimeväli on pikem kui 4 tähemärki"). Enamiku kontaktvormide jaoks on see piisav.

Meetod 3: Conditional Fields for Contact Form 7 plugin

Kui loogika muutub keerukamaks (näiteks näita nuppu ainult siis, kui [select]-is on valitud konkreetne element ja e-post on täidetud), kasvab jQuery kood. Siin tuleb appi tasuta plugin Conditional Fields for Contact Form 7 (üle 100 000 aktiivse paigalduse, 5-tärni hinnang).

Plugin lisab visuaalse tingimuste redaktori otse CF7 liidesesse. Seate reeglid paari klõpsuga:

• „Näita nuppu, kui väli 'Nimi' pole tühi JA väli 'E-post' pole tühi JA väli 'Sõnum' sisaldab rohkem kui 20 tähemärki."
• Või: „Näita välja 'Tarneaadress', kui raadionupp 'Kulleriga kohaletoimetamine' on valitud."

Koodi pole vaja. Tingimusi saab rakendada igale väljale või väljade grupile, sealhulgas saatmisnupule endale. Plugina arendus on aktiivne ja seda uuendatakse regulaarselt; 2026. aasta juuni seisuga ühildub see praeguse WordPressi versiooniga.

Milline lahendus valida

Kolm lähenemist katavad kolme erinevat stsenaariumi:

• Puhas CSS: ideaalne maandumislehe jaoks lihtsa 2-3 väljaga vormiga. Minimaalselt liikuvaid osi, pole midagi, mis puruneks.
• jQuery skript: teie valik, kui vajate täpselt häälestatud piiranguid („nimi pikem kui 4 tähemärki, sõnum pikem kui 20"). Täielik kontroll tingimuste üle.
• Conditional Fields: kasutage seda, kui loogika hargneb (erinevad väljade komplektid erinevate valikute jaoks, pesastatud tingimused, tervete vormisektsioonide näitamine/peitmine). Visuaalne koostaja säästab tunde silumist.

Enamiku WordPressi saitide jaoks piisab kombinatsioonist „jQuery + terve mõistus". Ülaltoodud skript (20 rida) sisestatakse üks kord ja töötab aastaid ilma uuendusteta.

Video: samm-sammuline seadistamine

See 8-minutiline õpetus juhatab läbi kogu protsessi, alates vormi loomisest CF7-s kuni valmis nupu peitmise skriptini, mis kontrollib, kas kõik väljad on täidetud:

⁉️🤔 Korduma kippuvad küsimused

Kas skript töötab vahemälu pluginatega?

Jah, eeldusel, et kasutatakse korrektset jQuery(document).ready(...) ümbrist. Kui sait kasutab agressiivset tihendamist (Autoptimize, WP Rocket koos skriptide kombineerimisega), jätke skriptifail kombineerimisest välja või kasutage Code Snippets pluginat: see lisab koodi lehe jalusesse eraldi plokina, mida tihendajad ei puuduta.

Mis siis, kui kasutajal on JavaScript keelatud?

Kui JavaScript on keelatud, jääb nupp nähtavaks; skript lihtsalt ei peida seda. See on sujuv halvenemine: CF7 teostab serveripoolse valideerimise ja kuvab vead standardsel viisil. :has() kasutava CSS-meetodi puhul on olukord sama: ilma JS-i valideerimiseta kontrollib CF7 välju saatmisel endiselt serveris.

Kas ma saan nuppu peita konkreetse vormi jaoks, kui lehel on neid mitu?

Lihtsaim viis on anda nupule CF7 redaktoris unikaalne id ja seejärel kasutada seda ID-d skriptis selektorina. Kui vorme on mitu, dubleerige koodiplokk iga nupu jaoks selle oma ID-ga või leidke nupp dünaamiliselt praeguse vormi seest $(this).closest('form').find('.wpcf7-submit') abil.

Miks mitte lihtsalt kasutada required väljadel ja loota brauseri valideerimisele?

Sest required ei peida nuppu; see ainult blokeerib vormi saatmise ja näitab brauseri sisseehitatud vihjet. Meie eesmärk on eemaldada eksliku klõpsu võimalus üldse. Lisaks ei kontrolli standardne brauseri valideerimine teksti pikkust, ainult täitmise fakti, ja 2 tähemärgi pikkuse sõnumi puhul on see nõrk kaitse.

Kas ma pean endiselt välju serveris valideerima?

Jah, kindlasti. Kliendipoolne loogika nupu peitmiseks ei asenda CF7 serveripoolset valideerimist. Konfigureerige alati kohustuslikud väljad vormiredaktoris (tärn * märgenduses) ja kontrollige, et e-kirjad jõuaksid kohale. Kaks kaitsekihti: esiosa mugavuseks, tagasüsteem turvalisuseks.

Peidetud nupp, puhtad müügivihjed: mida oma saidil kasutada

Saatmisnupu peitmise lähenemine on üks neid mikrotäiustusi, mis on silmale nähtamatud, kuid kätele tuntavad. Kasutaja ei ütle „lahe, nupp ilmus õigel hetkel". Kuid ta täidab vormi ega lahku pärast esimest klõpsu tühjusesse.

Lihtsa kontaktvormi jaoks kasutage CSS-meetodit koos :has()-ga: 5 koodirida, null sõltuvust. Väljade kohandatud pikkusepiirangute jaoks kasutage jQuery skripti meetodist 1 (kopeerige ja kleepige Code Snippetsisse). Keeruliste, hargneva loogikaga vormide jaoks kasutage Conditional Fieldsi.

Proovige kohe: avage oma kontaktvormi redaktor CF7-s, lisage väljadele ja nupule id:, kleepige skript ja kontrollige, kuidas nupp ilmub alles siis, kui kõik väljad on sisukalt, mitte huupi täidetud.