Форма — это финальный шаг перед конверсией. Пользователь уже зашёл на сайт, прочитал текст, заинтересовался. И вот он открывает форму — и уходит. Просто закрывает вкладку.
По данным исследования Baymard Institute, около 27% пользователей бросают оформление заказа именно на этапе заполнения формы. Не потому что передумали. А потому что форма их раздражает.
Разберём конкретные ошибки — и как их исправить.
Слишком много полей
Самая частая и самая разрушительная ошибка. Владелец сайта думает: «Чем больше данных соберу — тем лучше». Пользователь думает иначе.
Experience Dynamics выяснили, что сокращение формы с 11 до 4 полей увеличивает конверсию на 120%. Не на 10%, не на 20% — на 120%.
Практический тест: возьмите свою форму и пройдитесь по каждому полю. Задайте вопрос — «что произойдёт, если убрать это поле?». Если ничего критичного — убирайте.
Типичные лишние поля:
- «Отчество» — нужно только для юридических документов
- «Как вы о нас узнали?» — собирайте аналитику через UTM-метки
- «Подтвердите email» — просто покажите пароль по кнопке, или проверьте адрес при отправке
- «Должность» — если вы не B2B SaaS с корпоративными тарифами
Для формы заявки на лендинге часто достаточно имени и номера телефона. Остальное менеджер уточнит при звонке.
Placeholder вместо label
Ph-ошибка: разработчик убирает подпись поля (label) и оставляет только placeholder — серый текст внутри поля, который исчезает при вводе.
Выглядит чище. Работает хуже.
Когда пользователь заполняет пятое поле и возвращается к третьему — он уже не помнит, что там нужно было написать. Placeholder исчез. Подсказки нет. Раздражение растёт.
Правило простое: label всегда отображается. Placeholder — дополнительная подсказка о формате (например, «+7 (999) 123-45-67»), но не замена подписи.
Хорошая практика — floating label: подпись изначально выглядит как placeholder, но при фокусе поднимается вверх и остаётся видимой. Material Design сделал этот паттерн популярным, и он работает.
Ошибки валидации — слишком поздно и слишком грубо
Пользователь заполнил всю форму, нажал «Отправить» — и получил список из семи красных ошибок. Это провал.
Две проблемы здесь:
Валидация только при сабмите. Пользователь уже мысленно отправил форму и двигался дальше. Возврат к началу психологически тяжёлый. Внедряйте inline-валидацию: проверяйте поле сразу после того, как пользователь из него вышел (событие blur).
Сообщения об ошибках бесполезны. «Некорректный формат» — это не помощь. «Введите email в формате name@domain.ru» — это помощь. «Поле обязательно» — плохо. «Укажите номер телефона, чтобы мы могли связаться» — лучше, потому что объясняет зачем.
Отдельная история — показывать ошибку до того, как пользователь закончил вводить. Вы начали набирать email, а форма уже кричит «Некорректный адрес». Это называется premature validation — и это раздражает.
Мобильная форма — отдельный зверь
Если форму проектировали под десктоп и потом «отмасштабировали» на мобильный — она почти наверняка ломается.
Что идёт не так на мобильных:
Не тот тип клавиатуры. Поле для телефона должно открывать цифровую клавиатуру (type="tel"), для email — клавиатуру с @-символом (type="email"). Если этого нет, пользователь вручную переключает раскладку на каждом шаге. Мелочь, которая бесит.
Слишком маленькие поля и кнопки. Apple рекомендует минимум 44×44 пикселей для интерактивных элементов. На практике встречаются формы с полями высотой 28px. Попасть пальцем — лотерея.
Клавиатура перекрывает поле. На iOS/Android виртуальная клавиатура занимает половину экрана. Если JavaScript не скроллит к активному полю — пользователь вводит вслепую.
Автозаполнение отключено. Браузеры умеют подставлять имя, email, телефон, адрес. Если на форме стоит autocomplete="off" — вы заставляете людей вводить всё вручную. Для большинства форм это неоправданно.
Непонятная кнопка отправки
«Отправить» — плохой текст кнопки. «Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности» прямо на кнопке — ещё хуже.
Кнопка должна говорить, что произойдёт после нажатия. Сравните:
- «Отправить» → «Получить консультацию»
- «Подать заявку» → «Оставить заявку на расчёт»
- «Зарегистрироваться» → «Создать аккаунт бесплатно»
Первый вариант каждой пары — абстракция. Второй — конкретика с ценностью.
Размер и цвет тоже важны. Кнопка должна быть явно главным элементом формы. Не маленькая ссылка в углу, не серая кнопка, которая сливается с фоном.
И уберите ссылки или кнопки рядом с CTA, которые уводят пользователя с формы. «Узнать подробнее» рядом с «Отправить заявку» — это прямой конкурент конверсии.
Многошаговые формы без прогресс-бара
Иногда форму нельзя сократить — регистрация, оформление заказа, сложная заявка. Тогда её разбивают на шаги. Это правильно.
Но если пользователь не знает, сколько шагов впереди — он в любой момент может бросить, решив что «ещё долго». Особенно если шаг 3 из 5, а он думал что их два.
Прогресс-бар («Шаг 2 из 4» или визуальная полоска) снижает тревогу и увеличивает процент завершения. Исследования показывают рост completion rate на 28% просто от добавления индикатора прогресса.
Дополнительно: позвольте пользователю вернуться на предыдущий шаг без потери данных. Если нажатие «Назад» сбрасывает форму — это баг, который дорого обходится.
Нет сигналов доверия рядом с формой
Пользователь оставляет личные данные. Номер телефона, email, иногда адрес или платёжную информацию. В этот момент у него возникает вопрос: «А можно ли вам доверять?»
Если рядом с формой пусто — этот вопрос остаётся без ответа. Пользователь уходит.
Что работает как сигналы доверия:
- Короткий отзыв клиента прямо рядом с формой
- «Уже работают с нами 200+ компаний»
- Логотипы известных клиентов или партнёров
- «Ответим в течение 2 часов» — конкретное обещание
- Ссылка на политику конфиденциальности (не простыня текста на кнопке, а нормальная ссылка под формой)
- Иконка замка рядом с полем карты или данными
На лендинге это особенно важно: пользователь пришёл впервые, ничего о вас не знает, и форма — это момент максимального недоверия.
Форма не даёт обратной связи после отправки
Пользователь нажал кнопку. Секунда. Две. Пять. Ничего не происходит. Он нажимает снова. Ещё раз. И ещё.
Потом приходит пять одинаковых заявок.
Или наоборот — кнопка заблокировалась, но экран не изменился. Форма отправлена или нет? Непонятно.
Обязательный минимум:
- Пока форма отправляется — кнопка заблокирована и показывает состояние (спиннер, «Отправляем...»)
- После успешной отправки — чёткое подтверждение. Не маленькая зелёная галочка, а полноценное сообщение: «Заявка принята! Позвоним вам в течение часа»
- Если ошибка сети — сообщите об этом и предложите попробовать снова
Хорошая практика — после отправки показать отдельную thank you page. Это даёт возможность настроить цели в аналитике, показать дополнительную полезную информацию и просто оставить у пользователя приятное ощущение завершённости.
Как это влияет на реальные деньги
Возьмём лендинг с 1000 посетителей в месяц и конверсией формы 2% — это 20 заявок. Если исправить критичные ошибки и поднять конверсию до 4% — получите 40 заявок с того же трафика. Без роста бюджета на рекламу.
Каждый процент конверсии — это деньги. И форма — один из самых дешёвых рычагов для роста, потому что не требует новых страниц, нового контента или нового трафика.
В REEXY при разработке лендингов и корпоративных сайтов мы всегда прорабатываем формы отдельно: структуру полей, валидацию, мобильную версию, состояния кнопки. Это не опция — это часть работы. Лендинг стоит от 3 500 ₽, и неработающая форма просто убивает весь смысл вложений в сайт.
Как проверить свою форму прямо сейчас
Чеклист для быстрого аудита:
Если хотя бы на три вопроса ответ «нет» — у вас есть конкретные точки роста. Не теоретические, а те, исправление которых напрямую добавит заявки.
Форма — это не техническая деталь. Это интерфейс между вашим предложением и деньгами клиента. Стоит уделить ей столько же внимания, сколько тексту и дизайну остальной страницы.