Форма заявки — последний шаг между интересом клиента и сделкой, и именно на нём теряется до половины обращений. Разбираем, какие решения в дизайне формы повышают конверсию, а какие незаметно её убивают.
Где теряются заявки
Когда владелец сайта жалуется на мало обращений, он обычно думает о трафике: мало посетителей, слабая реклама, низкие позиции. Но в аналитике часто видна другая картина: люди доходят до формы, начинают её заполнять и уходят. По нашим наблюдениям на проектах, где настроено отслеживание взаимодействия с полями, от 30 до 60% пользователей, начавших заполнять форму, не отправляют её. Каждый такой уход — это клиент, который уже принял решение обратиться, но интерфейс его остановил.
Причины почти всегда одни и те же: слишком много полей, непонятно, что будет после отправки, раздражающая валидация, плохая работа на телефоне, страх спама. Хорошая новость в том, что всё это исправляется без переделки сайта целиком — иногда за пару дней работы дизайнера и верстальщика.
Количество полей: меньше — не всегда лучше
Популярный совет «оставьте только имя и телефон» верен наполовину. Каждое лишнее поле действительно снижает долю заполнений. Но слишком короткая форма даёт менеджеру заявку без контекста: он перезванивает, выясняет, что человек искал не то, и время уходит впустую. Для B2B, где один правильный лид может стоить десятки тысяч рублей, качество обращения важнее количества.
Мы решаем эту дилемму так: разделяем поля на обязательные для связи и полезные для квалификации. Первые — строго минимум (как правило, имя и один способ связи). Вторые — необязательные, с подсказкой, зачем они нужны: «Укажите объём, чтобы мы сразу подготовили расчёт». Удивительно, но многие заполняют необязательные поля, если понимают, что это ускорит ответ.
| Тип формы | Рекомендуемые обязательные поля | Полезные необязательные |
|---|---|---|
| Обратный звонок | Телефон | Имя, удобное время |
| Запрос цены на товар | Телефон или email | Количество, город доставки, компания |
| Заявка на услугу | Имя, телефон или email | Краткое описание задачи, сроки, бюджет |
| Запрос КП для оптовика | Email, компания | Перечень позиций, файл спецификации, регион |
| Регистрация дилера | Компания, контактное лицо, email, телефон | Регион работы, объём закупок, сайт |
Детали дизайна, которые влияют на результат
Подписи над полями, а не внутри
Текст-подсказка внутри поля, исчезающий при вводе, выглядит минималистично, но создаёт проблемы: пользователь забывает, что вводит, не может проверить заполненную форму, а светло-серая подсказка часто плохо читается. Подпись над полем надёжнее. Если места мало, используют «плавающую» подпись, которая при вводе уменьшается и уходит вверх, но остаётся видимой.
Одна колонка
Поля, расположенные в две колонки, сбивают порядок заполнения: взгляд прыгает зигзагом, какие-то поля пропускаются. Исключение — логически связанные короткие поля (город и индекс, дата и время), их допустимо ставить в одну строку.
Правильная клавиатура на телефоне
Для телефона — цифровая клавиатура, для email — клавиатура с символом «@», для количества — числовая. Это настраивается одним атрибутом поля, но на удивление часто упускается. Пользователь, которому пришлось переключать раскладку ради ввода номера, раздражается ещё до отправки.
Маска телефона без сюрпризов
Маска ввода помогает, если она не мешает: принимает номер, вставленный из буфера обмена в любом формате, понимает и «+7», и «8» в начале, не стирает введённое при ошибке. Жёсткая маска, которая ломает вставленный номер, — одна из самых частых причин брошенных форм, которые мы видим в записях сессий.
Понятная кнопка
«Отправить» ничего не говорит о результате. «Получить расчёт», «Заказать звонок», «Запросить прайс» — объясняют, что человек получит. Кнопка должна быть самым заметным элементом формы, во всю ширину на мобильных и с достаточной высотой — не меньше 44–48 пикселей для удобного нажатия пальцем.
Валидация: помогать, а не наказывать
Проверка данных нужна, но её реализация сильно влияет на ощущение от формы. Худший сценарий: пользователь заполнил всё, нажал кнопку, страница перезагрузилась, введённые данные пропали, а наверху появилось красное сообщение «Ошибка в форме». Такие формы бросают почти всегда.
Правильный подход:
- проверять поле после того, как пользователь закончил его заполнять и перешёл к следующему, а не на каждый введённый символ;
- показывать ошибку рядом с полем, конкретным текстом: не «Неверный формат», а «В номере не хватает цифр — должно быть 11»;
- отмечать правильно заполненные поля, чтобы человек видел прогресс;
- никогда не стирать введённые данные при ошибке;
- при отправке с ошибками — прокручивать страницу к первому проблемному полю и ставить в него фокус.
Совет студии: заполните форму на своём сайте с телефона, стоя, одной рукой, вставив номер из заметок. Если за время теста вы хотя бы раз мысленно выругались — ваши клиенты делают это каждый день.
Что происходит после нажатия кнопки
Момент после отправки недооценён. Пользователь хочет знать три вещи: дошла ли заявка, что будет дальше и когда. Сообщение «Спасибо, ваша заявка принята» закрывает только первый вопрос. Намного лучше работает конкретика: «Заявка получена. Менеджер свяжется с вами в течение 30 минут в рабочее время. Пока можно посмотреть примеры наших проектов». Для B2B полезно дублировать подтверждение письмом с копией заявки — это снижает количество повторных обращений и формирует ощущение надёжности.
Отдельная страница «спасибо» вместо всплывающего сообщения удобна для аналитики: её посещение легко учитывать как цель и связывать с источником трафика. Кроме того, на ней можно предложить следующий шаг — скачать каталог, подписаться на рассылку, посмотреть кейсы.
Доверие и страх спама
Люди не хотят оставлять телефон, если боятся, что их начнут бомбардировать звонками. Несколько элементов рядом с формой снимают эту тревогу: короткая фраза о том, как будут использованы данные («Позвоним один раз, чтобы уточнить задачу»), ссылка на политику обработки персональных данных, указание времени ответа. Для сложных услуг хорошо работает фотография или обезличенная иллюстрация менеджера и указание, что отвечает специалист, а не колл-центр.
Капча — отдельная тема. Классические капчи с распознаванием картинок снижают конверсию заметно. Современные невидимые методы защиты от спама (скрытые поля-ловушки, проверка поведения, фоновая проверка) справляются с большинством ботов, не заставляя человека выбирать светофоры.
Кейс: форма запроса цены у дистрибьютора
У дистрибьютора промышленного крепежа на карточке товара была форма запроса цены из девяти обязательных полей, включая ИНН, юридический адрес и должность. Конверсия из просмотра карточки в запрос составляла около 0,6%. Мы оставили два обязательных поля (email или телефон), добавили необязательные «Количество» и «Компания», заменили кнопку «Отправить» на «Узнать цену и сроки», убрали капчу с картинками и добавили страницу подтверждения с конкретным временем ответа. Реквизиты компании менеджер стал запрашивать на этапе выставления счёта. За два месяца после изменений конверсия в запрос выросла примерно в 2,3 раза, а доля нецелевых заявок почти не изменилась.
Подобные доработки мы проводим как в рамках редизайна, так и точечно, если остальной сайт работает хорошо.
Чек-лист формы заявки
- Обязательных полей не больше двух-трёх; остальные необязательные и объяснены.
- Подписи находятся над полями и не исчезают при вводе.
- Поля идут в одну колонку.
- На телефоне открывается подходящая клавиатура для каждого поля.
- Маска телефона принимает вставленный номер в любом формате.
- Текст кнопки описывает результат, а не действие «Отправить».
- Ошибки показываются рядом с полем, конкретно и без потери введённых данных.
- После отправки пользователь видит, что будет дальше и в какой срок.
- Рядом с формой есть пояснение об использовании данных и ссылка на политику.
- Защита от спама не требует от человека решать головоломки.
- Отправка формы отслеживается как цель в аналитике, а брошенные заполнения — как отдельное событие.
