Skip to content

Все для WordPress, веб-розробки — і не тільки

🕵️ Як приховати кнопку надсилання в Contact Form 7, поки поля не заповнені: 3 робочих способи
Плагіни WordPressВеб-розробка
6 хв1,289 слів

🕵️ Як приховати кнопку надсилання в Contact Form 7, поки поля не заповнені: 3 робочих способи

Користувач відкриває форму, бачить кнопку «Надіслати», натискає й отримує помилки валідації. Вікно підсвічує червоним поля: «Обов’язкове для заповнення». Знайомо?

Contact Form 7, найпопулярніший плагін форм для WordPress, 5+ мільйонів активних встановлень. Але з коробки він показує кнопку надсилання завжди, навіть коли поля порожні. Для користувача це зайвий клік і роздратування. Для власника сайту, втрачені заявки: третина відвідувачів, які зіткнулися з помилкою форми, просто йдуть і не повертаються.

Можна виправити це трьома рядками jQuery. А можна взагалі без скриптів, на чистому CSS. У цьому розборі, обидва підходи, плюс готовий плагін для тих, хто не хоче чіпати код.

💡 Швидкий огляд:

  • jQuery-відстеження: ховаємо кнопку, показуємо лише тоді, коли довжина тексту в усіх полях досягла ваших лімітів
  • Чистий CSS: трюк із :valid, :has() та атрибутом required, без жодного рядка JavaScript
  • Плагін Conditional Fields for Contact Form 7: візуальний конструктор умов для складної логіки без коду

Користувач не повинен гадати, що пішло не так. Коли кнопка видима й клікабельна, а форма не готова — це когнітивний дисонанс. Людина натискає, отримує помилку, шукає очима підсвічені поля, виправляє, натискає знову. Кожен такий цикл знижує конверсію.

Прихована до готовності кнопка вирішує три завдання:

  • Прибирає хибні спроби надсилання. Немає кнопки, немає передчасного кліку.
  • Підказує візуально. Поява кнопки = сигнал «форма готова, можна надсилати».
  • Знижує тертя. Користувач заповнює поля, кнопка з’являється, один клік, готово.

У Contact Form 7 немає вбудованого механізму для такої поведінки. Але додати його, 10 хвилин роботи.

Метод 1: jQuery-відстеження введення

Найгнучкіший спосіб. Ви самі задаєте правила: скільки символів має бути в кожному полі, перш ніж кнопка з’явиться. Працює з будь-якими типами полів: текст, email, textarea, телефон.

Тіло форми Contact Form 7

Для прикладу візьмемо стандартну контактну форму з трьома полями, Google reCAPTCHA та кнопкою надсилання. Ось її розмітка в редакторі 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}
12div#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 "Отправить"]

CSS-блок усередині форми, милиця для розтягування reCAPTCHA на всю ширину контейнера, знадобиться, якщо форма у вузькій колонці.

JQuery-скрипт

Скопіюйте цей код у файл custom.js вашої теми або в поле «Додаткові скрипти» плагіна Code Snippets:

1jQuery(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});

Що тут відбувається:

  • Рядок 4, кнопка прихована одразу під час завантаження сторінки (display: none).
  • Рядок 7, метод .on('input', ...) слухає будь-яку зміну тексту в трьох полях (користувач друкує, вставляє з буфера, видаляє символи). Раніше використовували .keyup(), але input надійніший: він спрацьовує і на вставку мишею.
  • Рядки 8-10, читаємо поточні значення, обрізаємо пробіли по краях через .trim().
  • Рядок 13, перевірка умов. Цифри можна змінювати під себе: наприклад, для поля імені вистачить > 1, для повідомлення, > 10.
  • Рядки 14 і 16, fadeIn і fadeOut дають плавну появу та зникнення кнопки за 200 мілісекунд. Виглядає акуратніше, ніж різке show()/hide().

Фізично елемент кнопки завжди в DOM-дереві сторінки, видимістю керує CSS-властивість display. Це безпечно: навіть якщо скрипт не завантажиться (збій мережі, блокувальник реклами), кнопка просто залишиться видимою, користувач не втратить можливість надіслати форму.

Як адаптувати під свою форму

Змініть три речі:

  • ID полів: у CF7-розмітці замініть bim-name, bim-email і bim-message на свої ідентифікатори.
  • Ліміти символів: в умові if підставте потрібні числа. Для поля з телефоном можна перевіряти .replace(/\D/g, '').length > 9, тільки цифри, не менше 10.
  • Список полів: якщо у вас 5 полів, додайте їх у селектор $('#id1, #id2, ...') і в умову if.

Для полів типу [checkbox], [select] або [radio] довжина тексту не працює, перевіряйте сам факт вибору:

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

Метод 2: чистий CSS без скриптів

Для простих форм з одним-двома полями можна обійтися без JavaScript взагалі. Ідея в тому, що сучасні браузери вміють перевіряти валідність поля через псевдоклас :valid, а CSS-комбінатор :has() (підтримка в усіх браузерах з 2023 року) дає змогу зазирнути «всередину» батьківського елемента.

Працює це так:

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

Але є нюанс: CF7 не проставляє атрибут required на поля автоматично. Його потрібно додати вручну в розмітці форми, достатньо зірочки * поруч з іменем поля в редакторі CF7:

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

Зірочка після типу поля (text*, email*) вмикає обов’язковість, CF7 сам підставить HTML-атрибут required у тег <input>, і CSS-селектор запрацює.

Плюс CSS-методу: нуль скриптів, не ламається при конфліктах jQuery, працює навіть із вимкненим JavaScript. Мінус: логіка простіша, «всі обов’язкові поля заповнені» проти «поле імені довше за 4 символи». Для більшості контактних форм цього достатньо.

Метод 3: плагін Conditional Fields for Contact Form 7

Коли логіка складніша, наприклад, показати кнопку, лише якщо вибрано певний пункт у [select] і заповнено email, код на jQuery розростається. Тут виручає безплатний плагін Conditional Fields for Contact Form 7, 100 000+ активних встановлень, рейтинг 5 зірок.

Плагін додає візуальний редактор умов прямо в інтерфейс CF7. Ви задаєте правила за пару кліків:

  • «Показати кнопку, якщо поле "Ім’я" не порожнє І поле "Email" не порожнє І поле "Повідомлення" містить більше 20 символів».
  • Або: «Показати поле "Адреса доставки", якщо вибрано radiobutton "Кур’єрська доставка"».

Жодного коду. Умови можна накладати на будь-яке поле або групу полів, включно із самою кнопкою надсилання. Плагін активний і регулярно оновлюється, станом на червень 2026 року сумісний з актуальною версією WordPress.

Яке рішення обрати

Три підходи закривають три різні сценарії:

  • Чистий CSS, ідеальний для лендингу з простою формою на 2-3 поля. Мінімум рухомих частин, нема чому ламатися.
  • jQuery-скрипт, ваш вибір, коли потрібне тонке налаштування лімітів: «ім’я довше за 4 символи, повідомлення довше за 20». Повний контроль над умовами.
  • Conditional Fields, беріть, коли логіка розгалужується: різні набори полів для різних варіантів вибору, вкладені умови, показати/сховати цілі секції форми. Візуальний конструктор економить години налагодження.

Для більшості сайтів на WordPress вистачає зв’язки «jQuery + здоровий глузд». Скрипт вище, 20 рядків, вставляється один раз і працює роками без оновлень.

Відео: покрокове налаштування

У цьому 8-хвилинному туторіалі показано повний процес, від створення форми в CF7 до готового скрипта приховування кнопки з перевіркою заповнення всіх полів:

⁉️🤔 Часті запитання

Чи працює скрипт із плагінами кешування?

Так, за умови правильного обгортання jQuery(document).ready(...). Якщо сайт використовує агресивну мініфікацію (Autoptimize, WP Rocket з об’єднанням скриптів), виключіть файл зі скриптом з об’єднання або використовуйте плагін Code Snippets, він вставляє код у підвал сторінки окремим блоком, який не чіпають мініфікатори.

Що, якщо користувач вимкнув JavaScript?

При вимкненому JavaScript кнопка залишається видимою, скрипт просто не приховує її. Це граціозна деградація: CF7 відпрацює серверну валідацію та покаже помилки стандартним способом. Для CSS-методу через :has() ситуація аналогічна: без JS-валідації CF7 однаково перевірить поля на сервері під час надсилання.

Чи можна приховати кнопку для конкретної форми, якщо на сторінці їх кілька?

Найпростіше задати унікальний id кнопці в редакторі CF7. Потім у скрипті використовувати цей ID як селектор. Якщо форм кілька, продублюйте блок коду для кожної кнопки зі своїм ID або динамічно шукайте кнопку всередині поточної форми через $(this).closest('form').find('.wpcf7-submit').

Чому не використовувати required у полів і перевірку браузера?

Тому що required не приховує кнопку, а лише блокує надсилання форми з browser-native підказкою. Наше завдання, прибрати сам привід для помилкового кліку. Плюс стандартна браузерна валідація не перевіряє довжину тексту, лише факт заповнення, а для повідомлення довжиною у 2 символи це слабкий захист.

Чи потрібно додатково валідувати поля на сервері?

Так, обов’язково. Клієнтська логіка приховування кнопки не скасовує серверну валідацію CF7. Завжди налаштовуйте обов’язкові поля в редакторі форми (зірочка * в розмітці) і перевіряйте, що листи доходять. Два рівні захисту: фронтенд для зручності, бекенд для безпеки.

Прихована кнопка, чисті заявки: що ставити на свій сайт

Підхід із приховуванням кнопки надсилання, з розряду мікропокращень, які не видно оку, але відчуваються руками. Користувач не скаже «вогонь, кнопка з’явилася вчасно». Але він заповнить форму до кінця і не піде після першого ж кліку в порожнечу.

Для простої контактної форми беріть CSS-метод через :has(), 5 рядків коду, нуль залежностей. Для кастомних лімітів на довжину полів, jQuery-скрипт із методу 1, скопіювати та вставити в Code Snippets. Для складних форм із розгалуженою логікою, Conditional Fields.

Спробуйте прямо зараз: відкрийте редактор своєї контактної форми в CF7, додайте id: до полів і кнопки, вставте скрипт і перевірте, як кнопка з’являється лише тоді, коли всі поля заповнені осмислено, а не абияк.

Редакція
РедакціяРедакційна команда→ Усі публікації

Професійна команда авторів та редакторів, що спеціалізуються на створенні якісного контенту.