Käyttäjä avaa lomakkeen, näkee "Lähetä"-painikkeen, klikkaa sitä ja saa validointivirheitä. Ikkuna korostaa kentät punaisella: "Pakollinen." Kuulostaako tutulta?

Contact Form 7, suosituin WordPress-lomakelisäosa, jolla on yli 5 miljoonaa aktiivista asennusta. Mutta vakiona se näyttää lähetyspainikkeen aina, myös silloin kun kentät ovat tyhjiä. Käyttäjälle tämä tarkoittaa ylimääräistä klikkausta ja turhautumista. Sivuston omistajalle se tarkoittaa menetettyjä liidejä: kolmannes kävijöistä, jotka kohtaavat lomakevirheen, yksinkertaisesti poistuu eikä koskaan palaa.

Voit korjata tämän kolmella jQuery-rivillä. Tai voit tehdä sen ilman yhtään skriptiä, puhtaalla CSS:llä. Tässä erittelyssä saat molemmat lähestymistavat sekä valmiin lisäosan niille, jotka eivät halua koskea koodiin.

💡 Nopea yleiskatsaus:

• jQuery-seuranta: piilota painike ja näytä se vasta, kun tekstin pituus kaikissa kentissä saavuttaa asettamasi rajat
• Puhdas CSS: temppu, jossa käytetään :valid, :has() ja required-attribuuttia, ilman riviäkään JavaScript-koodia
• Conditional Fields for Contact Form 7 -lisäosa: visuaalinen ehtorakentaja monimutkaiseen logiikkaan ilman koodia

Miksi lähetyspainike kannattaa piilottaa

Käyttäjän ei pitäisi joutua arvailemaan, mikä meni pieleen. Kun painike on näkyvissä ja klikattavissa, mutta lomake ei ole valmis, se luo kognitiivista dissonanssia. Henkilö klikkaa, saa virheen, etsii korostetut kentät, korjaa ne, klikkaa uudelleen. Jokainen tällainen sykli laskee konversiota.

Painike, joka on piilotettu kunnes kaikki on valmista, ratkaisee kolme ongelmaa:

• Eliminoi turhat lähetysyritykset. Ei painiketta, ei ennenaikaista klikkausta.
• Antaa visuaalista palautetta. Painikkeen ilmestyminen = signaali siitä, että lomake on valmis lähetettäväksi.
• Vähentää kitkaa. Käyttäjä täyttää kentät, painike ilmestyy, yksi klikkaus, valmista.

Contact Form 7:ssä ei ole sisäänrakennettua mekanismia tälle toiminnalle. Mutta sen lisäämiseen menee 10 minuuttia työtä.

Tapa 1: jQuery-syötteenseuranta

Joustavin lähestymistapa. Asetat omat sääntösi: kuinka monta merkkiä kunkin kentän on sisällettävä ennen kuin painike ilmestyy. Toimii minkä tahansa kenttätyypin kanssa (teksti, sähköposti, tekstialue, puhelin).

Contact Form 7 -lomakkeen runko

Otetaan esimerkiksi vakio yhteydenottolomake, jossa on kolme kenttää, Google reCAPTCHA ja lähetyspainike. Tässä on sen merkintä CF7-editorissa:

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"]

Lomakkeen sisällä oleva CSS-lohko on kiertotapa reCAPTCHAn venyttämiseksi koko säiliön leveyteen; siitä on hyötyä, jos lomake on kapeassa sarakkeessa.

JQuery-skripti

Kopioi tämä koodi teemasi custom.js-tiedostoon tai Code Snippets -lisäosan "Additional Scripts" -kenttään:

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
});

Mitä tässä tapahtuu:

• Rivi 4: painike piilotetaan välittömästi sivun latautuessa (display: none).
• Rivi 7: .on('input', ...) -metodi kuuntelee tekstimuutoksia kolmessa kentässä (käyttäjä kirjoittaa, liittää leikepöydältä, poistaa merkkejä). Aiemmin käytettiin .keyup()-metodia, mutta input on luotettavampi: se laukeaa myös hiirellä liitettäessä.
• Rivit 8-10: luemme nykyiset arvot ja poistamme tyhjät merkit reunoilta .trim()-metodilla.
• Rivi 13: ehtotarkistus. Voit muuttaa numeroita tarpeidesi mukaan: esimerkiksi > 1 voi riittää nimikentälle, > 10 viestikentälle.
• Rivit 14 ja 16: fadeIn ja fadeOut antavat painikkeelle pehmeän ilmestymis- ja katoamisanimaation 200 millisekunnin aikana. Se näyttää siistimmältä kuin äkillinen show()/hide().

Fyysisesti painike-elementti on aina sivun DOM-puussa; näkyvyyttä ohjataan CSS:n display-ominaisuudella. Tämä on turvallista: vaikka skripti ei latautuisi (verkko-ongelma, mainosestäjä), painike pysyy yksinkertaisesti näkyvissä eikä käyttäjä menetä mahdollisuutta lähettää lomaketta.

Miten sovitat omaan lomakkeeseesi

Muuta kolme asiaa:

• Kenttien ID:t: CF7-merkinnässä korvaa bim-name, bim-email ja bim-message omilla tunnisteillasi.
• Merkkirajoitukset: if-ehtoon laita tarvitsemasi numerot. Puhelinkentälle voit tarkistaa .replace(/\D/g, '').length > 9 (vain numerot, vähintään 10).
• Kenttäluettelo: jos sinulla on 5 kenttää, lisää ne valitsimeen $('#id1, #id2, ...') ja if-ehtoon.

[checkbox]-, [select]- tai [radio]-kenttätyypeille tekstin pituus ei toimi; tarkista itse valinta:

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

Tapa 2: puhdas CSS ilman skriptejä

Yksinkertaisissa yhden tai kahden kentän lomakkeissa voit ohittaa JavaScriptin kokonaan. Idea on, että nykyaikaiset selaimet voivat tarkistaa kentän validiuden :valid-pseudoluokan avulla, ja CSS-yhdistelmävalitsin :has() (tuettu kaikissa selaimissa vuodesta 2023) antaa sinun katsoa yläelementin "sisään".

Se toimii näin:

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
}

Mutta tässä on vivahde: CF7 ei lisää required-attribuuttia kenttiin automaattisesti. Sinun on lisättävä se manuaalisesti lomakkeen merkintään; tähti * kentän nimen vieressä CF7-editorissa riittää:

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

Tähti kenttätyypin jälkeen (text*, email*) ottaa pakollisuuden käyttöön. CF7 itse lisää HTML required-attribuutin <input>-tagiin, ja CSS-valitsin toimii.

CSS-menetelmän hyvä puoli: nolla skriptiä, se ei hajoa jQuery-konflikteissa ja toimii myös JavaScriptin ollessa pois käytöstä. Huono puoli: logiikka on yksinkertaisempi ("kaikki pakolliset kentät on täytetty" verrattuna "nimikenttä on pidempi kuin 4 merkkiä"). Useimmille yhteydenottolomakkeille tämä riittää.

Tapa 3: Conditional Fields for Contact Form 7 -lisäosa

Kun logiikka muuttuu monimutkaisemmaksi (esimerkiksi näytä painike vain, jos tietty kohta [select]-valikosta on valittu ja sähköposti on täytetty), jQuery-koodi kasvaa. Tässä kohtaa ilmainen lisäosa Conditional Fields for Contact Form 7 tulee avuksi (yli 100 000 aktiivista asennusta, 5 tähden arvio).

Lisäosa lisää visuaalisen ehtoeditorin suoraan CF7-käyttöliittymään. Asetat säännöt parilla klikkauksella:

• "Näytä painike, jos 'Nimi'-kenttä ei ole tyhjä JA 'Sähköposti'-kenttä ei ole tyhjä JA 'Viesti'-kenttä sisältää yli 20 merkkiä."
• Tai: "Näytä 'Toimitusosoite'-kenttä, jos 'Kuriiritoimitus'-valintanappi on valittu."

Koodia ei tarvita. Ehtoja voidaan soveltaa mihin tahansa kenttään tai kenttäryhmään, mukaan lukien itse lähetyspainikkeeseen. Lisäosaa ylläpidetään aktiivisesti ja päivitetään säännöllisesti; kesäkuussa 2026 se on yhteensopiva nykyisen WordPress-version kanssa.

Mikä ratkaisu valita

Kolme lähestymistapaa kattaa kolme eri skenaariota:

• Puhdas CSS: ihanteellinen laskeutumissivulle, jossa on yksinkertainen 2-3 kentän lomake. Minimi määrä liikkuvia osia, ei mitään hajoavaa.
• jQuery-skripti: valintasi, kun tarvitset hienosäädettyjä rajoja ("nimi pidempi kuin 4 merkkiä, viesti pidempi kuin 20"). Täysi hallinta ehdoista.
• Conditional Fields: käytä, kun logiikka haarautuu (eri kenttäjoukot eri valinnoille, sisäkkäiset ehdot, kokonaisten lomakeosioiden näyttäminen/piilottaminen). Visuaalinen rakentaja säästää tunteja debuggausta.

Useimmille WordPress-sivustoille yhdistelmä "jQuery + maalaisjärki" riittää. Yllä oleva skripti (20 riviä) lisätään kerran ja toimii vuosia ilman päivityksiä.

Video: vaiheittainen asennus

Tämä 8 minuutin opasvideo käy läpi koko prosessin lomakkeen luomisesta CF7:ssä valmiiseen painikkeenpiilotusskriptiin, joka tarkistaa, ovatko kaikki kentät täytetty:

⁉️🤔 Usein kysytyt kysymykset

Toimiiko skripti välimuistilisäosien kanssa?

Kyllä, edellyttäen että käytetään asianmukaista jQuery(document).ready(...) -käärettä. Jos sivusto käyttää aggressiivista minifiointia (Autoptimize, WP Rocket skriptien yhdistämisellä), sulje skriptitiedosto yhdistämisen ulkopuolelle tai käytä Code Snippets -lisäosaa: se lisää koodin sivun alatunnisteeseen erillisenä lohkona, johon minifioijat eivät koske.

Entä jos käyttäjällä on JavaScript pois käytöstä?

JavaScriptin ollessa pois käytöstä painike pysyy näkyvissä; skripti ei yksinkertaisesti piilota sitä. Tämä on hallittua heikentymistä: CF7 suorittaa palvelinpuolen validoinnin ja näyttää virheet tavalliseen tapaan. CSS-menetelmälle, jossa käytetään :has()-valitsinta, tilanne on sama: ilman JS-validointia CF7 tarkistaa kentät palvelimella lähetyksen yhteydessä.

Voinko piilottaa painikkeen tietylle lomakkeelle, jos sivulla on useita?

Helpoin tapa on antaa painikkeelle yksilöllinen id CF7-editorissa ja käyttää sitten tätä ID:tä valitsimena skriptissä. Jos lomakkeita on useita, kopioi koodilohko jokaiselle painikkeelle omalla ID:llään tai etsi painike dynaamisesti nykyisen lomakkeen sisältä käyttäen $(this).closest('form').find('.wpcf7-submit').

Miksi ei vain käytettäisi required-attribuuttia kentissä ja luotettaisi selaimen validointiin?

Koska required ei piilota painiketta; se ainoastaan estää lomakkeen lähetyksen ja näyttää selaimen natiivin työkaluvihjeen. Tavoitteemme on poistaa virheellisen klikkauksen mahdollisuus kokonaan. Lisäksi selaimen vakio-validointi ei tarkista tekstin pituutta, ainoastaan täyttämisen tosiasian, ja 2 merkkiä pitkälle viestille tämä on heikko suoja.

Tarvitseeko kentät edelleen validoida palvelimella?

Kyllä, ehdottomasti. Painikkeen piilottamisen asiakaspuolen logiikka ei korvaa CF7:n palvelinpuolen validointia. Määritä aina pakolliset kentät lomake-editorissa (* merkinnässä) ja varmista, että sähköpostit toimitetaan. Kaksi suojakerrosta: frontend mukavuutta varten, backend turvallisuutta varten.

Piilotettu painike, puhtaat liidit: mitä käyttää sivustollasi

Lähetyspainikkeen piilottamisen lähestymistapa on yksi niistä mikrotason parannuksista, jotka ovat silmälle näkymättömiä mutta käsissä tunnettavia. Käyttäjä ei sano "mahtavaa, painike ilmestyi juuri oikealla hetkellä." Mutta hän täyttää lomakkeen loppuun eikä poistu ensimmäisen tyhjään klikkauksen jälkeen.

Yksinkertaiseen yhteydenottolomakkeeseen käytä CSS-menetelmää :has()-valitsimella: 5 riviä koodia, nolla riippuvuutta. Räätälöityihin kenttien pituusrajoituksiin käytä tavan 1 jQuery-skriptiä (kopioi ja liitä Code Snippetsiin). Monimutkaisiin lomakkeisiin, joissa on haarautuvaa logiikkaa, käytä Conditional Fields -lisäosaa.

Kokeile heti: avaa yhteydenottolomakkeesi editori CF7:ssä, lisää id: kenttiin ja painikkeeseen, liitä skripti ja tarkista, miten painike ilmestyy vasta, kun kaikki kentät on täytetty merkityksellisesti, ei sattumanvaraisesti.