Użytkownik otwiera formularz, widzi przycisk „Wyślij", klika i otrzymuje błędy walidacji. Okno podświetla pola na czerwono: „Pole wymagane". Brzmi znajomo?

Contact Form 7, najpopularniejsza wtyczka formularzy dla WordPress, 5+ milionów aktywnych instalacji. Jednak od razu po instalacji pokazuje przycisk wysyłania zawsze, nawet gdy pola są puste. Dla użytkownika to zbędny klik i irytacja. Dla właściciela witryny to utracone zapytania: jedna trzecia odwiedzających, którzy napotkali błąd formularza, po prostu odchodzi i nie wraca.

Można to naprawić trzema linijkami jQuery. Albo całkowicie bez skryptów, na czystym CSS. W tym omówieniu oba podejścia plus gotowa wtyczka dla tych, którzy nie chcą dotykać kodu.

💡 Szybki przegląd:

• Śledzenie jQuery: ukrywamy przycisk, pokazujemy go dopiero wtedy, gdy długość tekstu we wszystkich polach osiągnie Państwa limity
• Czysty CSS: sztuczka z :valid, :has() i atrybutem required, bez ani jednej linijki JavaScript
• Wtyczka Conditional Fields for Contact Form 7: wizualny kreator warunków dla złożonej logiki bez kodu

Po co ukrywać przycisk wysyłania

Użytkownik nie powinien zgadywać, co poszło nie tak. Gdy przycisk jest widoczny i klikalny, a formularz niegotowy, powstaje dysonans poznawczy. Osoba klika, otrzymuje błąd, szuka wzrokiem podświetlonych pól, poprawia, klika ponownie. Każdy taki cykl obniża konwersję.

Przycisk ukryty do momentu gotowości rozwiązuje trzy zadania:

• Eliminuje fałszywe próby wysłania. Nie ma przycisku, nie ma przedwczesnego kliknięcia.
• Daje wizualną podpowiedź. Pojawienie się przycisku = sygnał „formularz gotowy, można wysyłać".
• Zmniejsza tarcie. Użytkownik wypełnia pola, przycisk się pojawia, jedno kliknięcie, gotowe.

Contact Form 7 nie ma wbudowanego mechanizmu dla takiego zachowania. Ale dodanie go to 10 minut pracy.

Metoda 1: śledzenie wprowadzania danych jQuery

Najbardziej elastyczny sposób. Samodzielnie ustalają Państwo zasady: ile znaków musi być w każdym polu, zanim przycisk się pojawi. Działa z dowolnymi typami pól: tekst, email, textarea, telefon.

Treść formularza Contact Form 7

Jako przykład weźmy standardowy formularz kontaktowy z trzema polami, Google reCAPTCHA i przyciskiem wysyłania. Oto jego znaczniki w edytorze CF7:

1
[text text-776 id:bim-name class:bim-name placeholder "Имя"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Сообщение"]
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 "Отправить"]

Blok CSS wewnątrz formularza, obejście do rozciągnięcia reCAPTCHA na całą szerokość kontenera, przyda się, jeśli formularz jest w wąskiej kolumnie.

Skrypt jQuery

Proszę skopiować ten kod do pliku custom.js Państwa motywu lub w pole „Dodatkowe skrypty" wtyczki Code Snippets:

1
jQuery(document).ready(function ($) {
2
 
3
    // Исходно кнопка скрыта
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Слушаем ввод во всех трёх полях
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
        // Условия: имя > 4 символов, email > 6, сообщение > 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
});

Co tu się dzieje:

• Linia 4, przycisk jest ukrywany natychmiast podczas ładowania strony (display: none).
• Linia 7, metoda .on('input', ...) nasłuchuje każdej zmiany tekstu w trzech polach (użytkownik pisze, wkleja ze schowka, usuwa znaki). Dawniej używano .keyup(), ale input jest bardziej niezawodny: reaguje również na wklejenie myszą.
• Linie 8-10, odczytujemy bieżące wartości, przycinamy spacje na brzegach za pomocą .trim().
• Linia 13, sprawdzenie warunków. Liczby można zmieniać według potrzeb: na przykład dla pola imienia wystarczy > 1, dla wiadomości > 10.
• Linie 14 i 16, fadeIn i fadeOut dają płynne pojawianie się i znikanie przycisku w ciągu 200 milisekund. Wygląda to estetyczniej niż ostre show()/hide().

Fizycznie element przycisku jest zawsze w drzewie DOM strony, widocznością zarządza właściwość CSS display. To bezpieczne: nawet jeśli skrypt się nie załaduje (awaria sieci, bloker reklam), przycisk po prostu pozostanie widoczny, użytkownik nie straci możliwości wysłania formularza.

Jak dostosować do swojego formularza

Proszę zmienić trzy rzeczy:

• ID pól: w znacznikach CF7 proszę zastąpić bim-name, bim-email i bim-message swoimi identyfikatorami.
• Limity znaków: w warunku if proszę wstawić potrzebne liczby. Dla pola z telefonem można sprawdzać .replace(/\D/g, '').length > 9, tylko cyfry, nie mniej niż 10.
• Lista pól: jeśli mają Państwo 5 pól, proszę dodać je do selektora $('#id1, #id2, ...') i do warunku if.

Dla pól typu [checkbox], [select] lub [radio] długość tekstu nie działa, proszę sprawdzać sam fakt wyboru:

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

Metoda 2: czysty CSS bez skryptów

Dla prostych formularzy z jednym-dwoma polami można obejść się całkowicie bez JavaScript. Pomysł polega na tym, że nowoczesne przeglądarki potrafią sprawdzać poprawność pola za pomocą pseudoklasy :valid, a kombinator CSS :has() (wsparcie we wszystkich przeglądarkach od 2023 roku) pozwala zajrzeć „do wnętrza" elementu nadrzędnego.

Działa to tak:

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
}

Jest jednak pewien niuans: CF7 nie dodaje atrybutu required do pól automatycznie. Trzeba go dodać ręcznie w znacznikach formularza, wystarczy gwiazdka * obok nazwy pola w edytorze CF7:

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

Gwiazdka po typie pola (text*, email*) włącza obowiązkowość, CF7 sam wstawi atrybut HTML required do tagu <input> i selektor CSS zadziała.

Plus metody CSS: zero skryptów, nie psuje się przy konfliktach jQuery, działa nawet przy wyłączonym JavaScript. Minus: logika jest prostsza, „wszystkie pola obowiązkowe wypełnione" zamiast „pole imienia dłuższe niż 4 znaki". Dla większości formularzy kontaktowych to wystarczy.

Metoda 3: wtyczka Conditional Fields for Contact Form 7

Gdy logika jest bardziej złożona, na przykład pokaż przycisk tylko wtedy, gdy wybrano określoną pozycję w [select] i wypełniono email, kod w jQuery się rozrasta. Tu z pomocą przychodzi bezpłatna wtyczka Conditional Fields for Contact Form 7, 100 000+ aktywnych instalacji, ocena 5 gwiazdek.

Wtyczka dodaje wizualny edytor warunków bezpośrednio do interfejsu CF7. Zasady ustala się za pomocą kilku kliknięć:

• „Pokaż przycisk, jeśli pole "Imię" nie jest puste I pole "Email" nie jest puste I pole "Wiadomość" zawiera więcej niż 20 znaków".
• Lub: „Pokaż pole "Adres dostawy", jeśli wybrano przycisk radiowy "Dostawa kurierem"".

Zero kodu. Warunki można nakładać na dowolne pole lub grupę pól, włącznie z samym przyciskiem wysyłania. Wtyczka jest aktywna i regularnie aktualizowana, według stanu na czerwiec 2026 roku kompatybilna z aktualną wersją WordPress.

Które rozwiązanie wybrać

Trzy podejścia pokrywają trzy różne scenariusze:

• Czysty CSS, idealny dla landing page z prostym formularzem na 2-3 pola. Minimum ruchomych części, nie ma się co psuć.
• Skrypt jQuery, Państwa wybór, gdy potrzebne jest precyzyjne ustawienie limitów: „imię dłuższe niż 4 znaki, wiadomość dłuższa niż 20". Pełna kontrola nad warunkami.
• Conditional Fields, proszę wybrać, gdy logika się rozgałęzia: różne zestawy pól dla różnych opcji wyboru, zagnieżdżone warunki, pokaż/ukryj całe sekcje formularza. Wizualny kreator oszczędza godziny debugowania.

Dla większości stron na WordPress wystarcza połączenie „jQuery + zdrowy rozsądek". Powyższy skrypt, 20 linijek, wstawia się raz i działa latami bez aktualizacji.

Wideo: konfiguracja krok po kroku

W tym 8-minutowym samouczku pokazano pełny proces, od utworzenia formularza w CF7 do gotowego skryptu ukrywania przycisku ze sprawdzeniem wypełnienia wszystkich pól:

⁉️🤔 Często zadawane pytania

Czy skrypt działa z wtyczkami buforowania?

Tak, pod warunkiem prawidłowego opakowania w jQuery(document).ready(...). Jeśli strona używa agresywnej minifikacji (Autoptimize, WP Rocket z łączeniem skryptów), proszę wykluczyć plik ze skryptem z łączenia lub użyć wtyczki Code Snippets, która wstawia kod w stopce strony jako osobny blok, którego minifikatory nie ruszają.

Co, jeśli użytkownik wyłączył JavaScript?

Przy wyłączonym JavaScript przycisk pozostaje widoczny, skrypt po prostu go nie ukrywa. To degradacja funkcjonalna: CF7 przeprowadzi walidację po stronie serwera i pokaże błędy w standardowy sposób. Dla metody CSS przez :has() sytuacja jest analogiczna: bez walidacji JS CF7 i tak sprawdzi pola na serwerze podczas wysyłania.

Czy można ukryć przycisk dla konkretnego formularza, jeśli na stronie jest ich kilka?

Najprościej nadać unikalny id przyciskowi w edytorze CF7. Następnie w skrypcie użyć tego ID jako selektora. Jeśli formularzy jest kilka, proszę zduplikować blok kodu dla każdego przycisku z jego własnym ID lub dynamicznie wyszukać przycisk wewnątrz bieżącego formularza przez $(this).closest('form').find('.wpcf7-submit').

Dlaczego nie użyć required w polach i walidacji przeglądarki?

Ponieważ required nie ukrywa przycisku, a jedynie blokuje wysłanie formularza z natywną podpowiedzią przeglądarki. Naszym zadaniem jest usunięcie samego powodu do błędnego kliknięcia. Ponadto standardowa walidacja przeglądarki nie sprawdza długości tekstu, tylko fakt wypełnienia, a dla wiadomości o długości 2 znaków to słaba ochrona.

Czy trzeba dodatkowo walidować pola na serwerze?

Tak, obowiązkowo. Logika ukrywania przycisku po stronie klienta nie zastępuje walidacji serwerowej CF7. Zawsze proszę konfigurować pola obowiązkowe w edytorze formularza (gwiazdka * w znacznikach) i sprawdzać, czy wiadomości przychodzą. Dwa poziomy ochrony: frontend dla wygody, backend dla bezpieczeństwa.

Ukryty przycisk, czyste zapytania: co wdrożyć na swojej stronie

Podejście z ukrywaniem przycisku wysyłania należy do kategorii mikroulepszeń, których nie widać gołym okiem, ale czuć je w obsłudze. Użytkownik nie powie „super, przycisk pojawił się w porę". Ale wypełni formularz do końca i nie odejdzie po pierwszym kliknięciu w pustkę.

Dla prostego formularza kontaktowego proszę wziąć metodę CSS przez :has(), 5 linijek kodu, zero zależności. Dla niestandardowych limitów długości pól, skrypt jQuery z metody 1, skopiować i wkleić w Code Snippets. Dla złożonych formularzy z rozgałęzioną logiką, Conditional Fields.

Proszę spróbować teraz: otworzyć edytor swojego formularza kontaktowego w CF7, dodać id: do pól i przycisku, wstawić skrypt i sprawdzić, jak przycisk pojawia się tylko wtedy, gdy wszystkie pola są wypełnione sensownie, a nie byle jak.