Дизайн формы заявки на лендинге: поля, состояния, микроанимации

Форма заявки — самый недооценённый экран лендинга. Над первым экраном и кейсами обычно долго думают, а форму «докидывают» шаблоном из конструктора и удивляются, что конверсия не растёт. При этом именно на форме люди сдаются: устают заполнять, пугаются десяти обязательных полей, не понимают, где ошибка, и просто закрывают вкладку. Хорошо спроектированная форма даёт +20–50% к заявкам без изменения оффера и трафика.

В этой статье разберём дизайн формы по кусочкам: сколько полей нужно, какие состояния, где ставить кнопку, как показывать ошибки и валидацию, какие микроанимации оправданы, а какие мешают. Статья дополняет базовый разговор про дизайн и UX лендинга — тут узкий фокус только на форму. Заодно поговорим про мобильную версию и типичные ошибки, которые сжигают конверсию.

Сколько полей — это данные, а не вкусовщина

HubSpot проанализировал формы на лендингах более 40 000 компаний — выводы однозначны:

• 3 поля дают максимум конверсии (около 25%); при 5 полях — уже примерно 21%. Каждое лишнее поле в среднем снижает конверсию на 4,1% (HubSpot).
• ≤7 полей → ~34% против ~15% у форм с 10+ полей — длинная форма примерно вдвое режет отклик. Сильнее всего бьют выпадающие списки и многострочные поля, а не короткие текстовые (HubSpot).

Сколько полей нужно и какие

Правило простое: чем меньше полей, тем выше конверсия. Каждое лишнее поле — это минус 3–7% заявок. Для холодного лида идеально 2 поля: имя и телефон (или email — в зависимости от того, как удобнее менеджеру продолжить контакт). Три поля — предел, если очень нужно уточнить город или объём заказа. Всё, что дальше — уже квиз или второй шаг, а не «форма заявки».

Часто дизайнеры сдаются под давлением заказчика: «нам нужен email, телефон, город, компания, должность, комментарий и загрузить бриф». Тут два сценария. Первый — превращать это в квиз с прогрессом: 5 экранов по одному вопросу, конверсия падает мягче. Второй — оставить в форме только имя и телефон, а всё остальное собирать в разговоре с менеджером. Второй вариант почти всегда лучше.

Состояния поля: не одно, а пять

Одно из самых частых упущений — дизайнер рисует поле в состоянии «пусто» и на этом останавливается. Но у любого поля должно быть минимум пять состояний, и все они одинаково важны. Именно они делают форму понятной: пользователь всегда знает, что происходит и что делать дальше. Без них любая ошибка выглядит как «что-то сломалось».

• Пусто (empty). Плейсхолдер с примером или подсказкой: «+7 999 000-00-00», а не «Введите телефон».
• Фокус (focus). Бордер акцентного цвета, иногда — увеличение поля. Явно показывает, куда сейчас идёт ввод.
• Заполнено (filled). Значение видно, плейсхолдер уходит вверх как лейбл (floating label).
• Ошибка (error). Красный бордер, красный текст ошибки ПОД полем, никаких всплывающих окон.
• Успех (success). Мягкий зелёный чекбокс или галочка справа: «всё в порядке».

Валидация: когда и как показывать ошибки

Валидация «в лоб» — всё проверять по клику «отправить» — самая раздражающая. Человек заполнил семь полей, нажал кнопку и получил красную вспышку по всей форме. Правильно проверять поле после того, как пользователь его покинул (событие blur), а не во время ввода. Исключение — телефон и email, где можно валидировать формат «на лету», как только строка становится длиннее 3–4 символов.

Тексты ошибок пишите людьми, а не роботом. «Поле обязательно к заполнению» — плохо. «Забыли номер?» или «Проверьте, кажется, не хватает цифры» — хорошо. Ошибка должна не только сообщить о проблеме, но и подсказать, как её решить. И никогда не удаляйте введённое — пусть человек поправит, а не набирает заново с нуля.

Кнопка отправки: заголовок, размер, положение

Кнопка «Отправить» — худший текст на кнопке отправки. Он ничего не обещает и не отвечает на страх «а что будет дальше». Хорошая кнопка называет действие и результат: «Получить расчёт», «Забронировать замер», «Записаться на консультацию». Такой текст даёт +3–8% к конверсии по сравнению с абстрактным «Отправить».

Размер — не меньше 48px по высоте, чтобы палец точно попадал на мобильном. Цвет — контрастный, отличный от бордеров полей: если кнопка того же цвета, что и линии поля, она визуально сливается. Одна главная кнопка на форме — никаких «Отправить» и «Очистить» рядом. Кнопка «Очистить» на форме заявки нужна примерно никому.

Микроанимации: где помогают, а где мешают

Микроанимации в форме — это не украшение, а обратная связь. Плейсхолдер плавно уезжает вверх при фокусе — пользователь понимает, что поле «поймало» ввод. Кнопка меняет заливку при hover — очевидно, что на неё можно кликнуть. Галочка «согласен на обработку» рисуется анимацией — виден момент изменения. Всё это уменьшает шанс ошибки и делает форму «живой».

Плохие микроанимации — те, что задерживают ввод или отвлекают. Дрожание всей формы при ошибке, огромный «shake», парящие частицы вокруг кнопки, свечение при вводе символа — всё это выглядит как игра, а не как форма. Держите анимации в диапазоне 150–300 мс: быстрее — не заметно, медленнее — раздражает. Про общий подход к дизайну и микроанимациям пригодится статья про первый экран лендинга: те же принципы «отклик за 200 мс».

Мобильная форма: чем отличается

Больше половины трафика лендинга — с мобильных, а значит форма проектируется в первую очередь под них. Первое: правильные типы input. Для телефона — inputmode=tel и pattern, чтобы клавиатура открылась цифровой. Для email — inputmode=email, тогда появится @ и точка. Обычный type=text — базовая ошибка, из-за которой человек с телефона мучается больше, чем с ноутбука.

Второе: одно поле на строку. Никаких «два поля рядом» — на узком экране это выглядит криво и не даёт места для лейбла. Третье: кнопка на всю ширину формы, без «размытых краёв». Четвёртое: расстояние между полями не меньше 12–16 пикселей, чтобы не промахнуться пальцем. Пятое: клавиатура iOS/Android не должна перекрывать активное поле — прокрутка автоматически поднимает форму.

Согласие на ПДн и чекбоксы

Согласие на обработку персональных данных — не украшение, а требование 152-ФЗ. Без него любая форма нарушает закон, а Роскомнадзор при жалобе штрафует. Оформлять его нужно так: чекбокс отдельно от текста, ссылка «Политика конфиденциальности» ведёт на реальный документ. Никаких «отправляя, вы соглашаетесь» без чекбокса — это уже не считается явным согласием.

Хорошая практика: чекбокс по умолчанию не отмечен, кнопка отправки активируется только после отметки. Это не снижает конверсию, зато защищает от жалоб. Дополнительно уточните мелким шрифтом, куда именно уйдут данные: «в CRM, для звонка менеджера, не передаём третьим сторонам». Такая честность снимает возражение «вдруг мне будут спамить».

Многошаговая форма и квизы

Если бизнес требует много полей — превратите форму в квиз. Один экран — один вопрос, прогресс-бар сверху, кнопка «Далее» под каждым вопросом. Психология простая: заполнив первый экран, человек уже вложился и не хочет бросать. Конверсия квиза с 5–7 шагами обычно на 20–40% выше, чем у формы из тех же полей одним экраном.

Порядок вопросов важен: сначала лёгкие и приятные (что интересует, какой объём), потом контакт (телефон, email). Никогда не начинайте с телефона — это подсознательно воспринимается как «сначала возьмут в оборот, потом что-то предложат». Про то, как встроить квиз в общую воронку продаж на лендинге, у нас есть отдельная статья.

Экран «Спасибо»: что показать после отправки

После отправки формы 90% сайтов показывают серое «Спасибо, мы с вами свяжемся». Это упущенная возможность. Экран благодарности — идеальное место для трёх вещей одновременно. Первое: подтвердить, что заявка принята и когда ждать ответ. Второе: занять человека, пока менеджер перезванивает — статьи блога, видео о компании, кейсы.

Третье — и это часто забывают — отслеживать целевое событие в Яндекс Метрике и Google Tag Manager. Без цели «отправка формы» вы не увидите, откуда идёт трафик, а какой — просто листает. Настройка события — один вечер работы, но именно она позволяет считать стоимость заявки и оптимизировать рекламу. Дальше это удобно связывать с интеграциями лендинга с CRM и аналитикой.

Форма — это не «приложение к лендингу». Это его финал: если она проиграла, весь лендинг проиграл.

Топ-7 ошибок дизайна формы

Пробегите глазами список — если хоть один пункт про вашу форму, там уже утекает 5–15% заявок. Всё это чинится за час дизайнером и вёрсткой, не требует переделки всего лендинга и почти всегда окупается уже на следующей неделе.

1. 1Лейбл только внутри поля — исчезает после клика, человек забывает, что вводит.
2. 2Обязательные поля не отмечены — пользователь узнаёт о них только при отправке.
3. 3Ошибка в alert() поверх страницы — уводит фокус и раздражает на мобильном.
4. 4Тип клавиатуры не учтён — телефон вводится буквами, email — без @.
5. 5Кнопка «Очистить» рядом с «Отправить» — люди случайно нажимают и уходят.
6. 6После отправки страница остаётся прежней — непонятно, ушла заявка или нет.
7. 7Нет чекбокса согласия на ПДн — юридически невалидная форма, риск штрафа.

Если ставить дизайн формы в план работы над лендингом — закладывайте на неё отдельные полдня-день с итерациями по прототипу. Не «дорисуем в конце», а именно как отдельный этап: макет всех состояний, тексты подсказок и ошибок, чекбокс согласия, экран спасибо, события в аналитике. Только тогда форма перестаёт быть узким горлышком и начинает работать в связке с остальным лендингом.

Где на лендинге ставить форму

Одна форма на весь лендинг — базовая ошибка. Даже если она идеальна, до неё нужно доскроллить. Минимум — три точки контакта на длинном лендинге: на первом экране (короткая, для «горячих»), в середине (после кейсов и «плюшек»), в конце (после закрытия возражений). Все три ведут в одну CRM с разной utm_content, чтобы понять, какая точка сработала.

Отдельно — липкая кнопка «Оставить заявку» на мобильном, которая всегда видна внизу экрана. Она поднимает конверсию на мобильных на 15–25%: человек листает контент и в любой момент может ткнуть кнопку, форма всплывает поверх. Про то, где вообще размещать блоки и как строить структуру продающего лендинга, у нас есть отдельная разборная статья.

Как тестировать форму: A/B и живые пользователи

Дизайн формы всегда проверяется на реальном трафике, а не по интуиции. Самые быстрые тесты — A/B на два поля vs три поля, две кнопки с разным текстом, две валидации (по blur vs по клику). Результат виден на 300–500 заявках, обычно это 1–2 недели. Дальше — итерация с победителем.

Живой юзер-тест — второй способ. 5 человек за 20 минут показывают все узкие места лучше, чем месяц догадок. Дайте задание «оставьте заявку на нашем лендинге» и попросите вслух комментировать. Через две-три сессии повторяющиеся жалобы становятся очевидными: не понимают, где кнопка, не видят ошибки, бросают на третьем поле. Про сам процесс A/B и что мерить — в статье про A/B-тесты и аналитику лендинга.

Частые вопросы

Сколько полей должно быть в форме заявки на лендинге?

Оптимум — 2–3 поля: имя, телефон или email, максимум одна короткая уточняющая строка. Каждое лишнее поле снижает конверсию на 3–7%.

Когда лучше проверять валидность поля?

После того как пользователь его покинул (blur), а не во время ввода. Исключение — телефон и email: их можно проверять на лету, как только появилась достаточная длина.

Какой текст ставить на кнопке отправки?

Не «Отправить», а конкретное действие и результат: «Получить расчёт», «Забронировать замер», «Записаться на консультацию». Это даёт +3–8% к конверсии.

Нужен ли чекбокс согласия на обработку персональных данных?

Да, обязательно по 152-ФЗ. Без явного отмеченного чекбокса форма юридически невалидна и грозит штрафом от Роскомнадзора при жалобе.

Как показывать ошибки в форме?

Красный бордер поля плюс короткая подсказка ПОД полем в человеческом тоне: «Кажется, не хватает цифры». Никаких alert() и не удаляйте введённое.