Пользователь открывает форму, видит кнопку «Отправить», жмёт, и получает ошибки валидации. Окно подсвечивает красным поля: «Обязательно для заполнения». Знакомо?

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
}
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 "Отправить"]

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

jQuery-скрипт

Скопируйте этот код в файл custom.js вашей темы или в поле «Дополнительные скрипты» плагина 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
});

Что здесь происходит:

• Строка 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] длина текста не работает, проверяйте сам факт выбора:

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

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

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

Работает это так:

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
}

Но есть нюанс: 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: к полям и кнопке, вставьте скрипт, и проверьте, как кнопка появляется только когда все поля заполнены осмысленно, а не абы как.