Форма заявки: как сократить отказы

Форма заявки — последний шаг между посетителем и клиентом, и именно здесь теряется неожиданно много людей. Показываем, какие мелочи в формах отпугивают, как мы их находим в проектах клиентов и что меняем, чтобы заявки доходили до менеджеров.

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

Разберём, почему люди бросают формы, как измерить эти потери и какие конкретные изменения помогают их сократить.

Почему форма — узкое место воронки

На форму приходится меньше всего внимания при разработке, но на неё ложится самая большая нагрузка. Именно здесь человек должен отдать свои данные, а значит — преодолеть сомнения. Любое трение в этот момент усиливает желание отложить решение «на потом». А «потом», как известно, обычно не наступает.

Типичные причины, по которым форму бросают:

• слишком много полей, и заполнение кажется долгой работой;
• непонятно, зачем компании нужны те или иные данные;
• поле телефона отвергает номер, введённый в привычном формате;
• ошибки показываются только после нажатия на кнопку, и часть уже введённых данных стирается;
• на телефоне клавиатура перекрывает кнопку или поля;
• неясно, что произойдёт после отправки: позвонят сразу, пришлют спам или ничего не будет;
• капча, которую с первого раза не может пройти даже живой человек.

Каждая из этих мелочей по отдельности кажется незначительной. Но в сумме они способны срезать заметную долю заявок, которые уже почти были у вас в руках.

Как понять, что форма теряет людей

Прежде чем что-то переделывать, стоит убедиться, что проблема действительно в форме. Для этого нужно измерить два показателя: сколько человек начали заполнять форму и сколько отправили её успешно.

Мы настраиваем в аналитике несколько событий:

1. Открытие формы или фокус на первом поле — человек проявил намерение.
2. Заполнение каждого поля — видно, на каком шаге люди останавливаются.
3. Попытка отправки с ошибкой валидации — сигнал, что поле работает неудобно.
4. Успешная отправка — итоговая конверсия формы.

Если между первым и последним шагом теряется больше половины людей, форму точно стоит пересматривать. Дополнительно полезно посмотреть записи сессий: там хорошо видно, как человек несколько раз стирает телефон, не понимая, чего от него хотят, или долго думает над полем «Комментарий».

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

Сколько полей действительно нужно

Главное правило: каждое поле должно оправдывать своё существование. Перед тем как добавить поле, спросите себя, что изменится, если его не будет. Если менеджер всё равно уточнит эту информацию при звонке — поле лишнее.

Для большинства сервисных компаний достаточно двух полей: имя и телефон. Иногда хватает одного телефона. Email нужен, только если вы действительно будете отправлять туда что-то полезное — например, расчёт или коммерческое предложение.

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

Когда полей нужно много — например, для расчёта стоимости сложной услуги, — помогает разбивка на шаги:

• на первом шаге задаём простые вопросы с вариантами ответов, которые не требуют ввода текста;
• показываем прогресс: «Шаг 2 из 4»;
• контактные данные просим в самом конце, когда человек уже вложил время и хочет получить результат;
• сохраняем введённое, если человек вернулся на шаг назад.

В одном из наших проектов — сайте компании, которая устанавливает системы вентиляции, — длинная форма из девяти полей превратилась в квиз из четырёх вопросов с кнопками-вариантами и финальным шагом с телефоном. Количество отправленных заявок выросло примерно в полтора раза, а менеджеры получили больше информации о задаче, чем раньше.

Подписи, подсказки и маски ввода

Сама форма должна быть понятной без размышлений. Вот правила, которые мы соблюдаем при проектировании:

1. Подпись над полем, а не внутри. Текст-заглушка внутри поля исчезает, как только человек начинает печатать, и он забывает, что именно нужно ввести. Подпись над полем остаётся видимой всегда.
2. Пример формата. Если нужен телефон, покажите, как его вводить. А лучше — принимайте любой формат и приводите его к нужному виду автоматически.
3. Правильный тип клавиатуры. Для телефона на мобильных должна открываться цифровая клавиатура, для email — клавиатура с символом «@».
4. Автозаполнение. Браузер умеет подставлять имя, телефон и почту, если поля размечены правильно. Это экономит человеку время и снижает число опечаток.
5. Необязательные поля помечены явно. Лучше писать «необязательно» рядом с такими полями, чем ставить звёздочки у обязательных — так форма выглядит менее требовательной.

Отдельно про маски ввода телефона. Маска удобна, когда она не мешает. Но мы часто видим маски, которые не дают вставить номер из буфера обмена, ломаются, если начать ввод с восьмёрки, или требуют стереть подставленный «+7». Такие маски вредят больше, чем помогают. Проверьте свою форму: вставьте номер из заметок, введите его с восьмёркой, со скобками и без — всё должно работать.

Ошибки и валидация

Ошибки в форме неизбежны: люди опечатываются, пропускают поля, ошибаются в цифрах. Важно, как форма на это реагирует.

Хорошая валидация:

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

Прочитайте все сообщения об ошибках в своих формах вслух. Если какое-то из них звучит как упрёк или непонятно без технического образования — перепишите его.

С капчей стоит быть осторожнее. Классическая капча с искажёнными буквами отсекает не только ботов, но и часть живых клиентов. Сейчас есть невидимые способы защиты от спама, которые не требуют от человека никаких действий. Мы используем их почти во всех проектах и прибегаем к явной проверке только если сайт атакуют особенно настойчиво.

Форма на мобильных устройствах

На многих сайтах наших клиентов больше половины трафика приходит со смартфонов, и именно там формы страдают сильнее всего. То, что удобно заполнять мышкой и клавиатурой, на маленьком экране превращается в испытание.

Проверьте мобильную форму по чек-листу:

• поля и кнопка достаточно крупные, чтобы попасть в них пальцем с первого раза;
• при открытии клавиатуры видно поле, в которое человек вводит текст;
• кнопка отправки не прячется под клавиатурой и не требует прокрутки;
• выпадающие списки заменены на кнопки-варианты, если вариантов немного;
• форма не открывается во всплывающем окне, которое нельзя прокрутить.

Для мобильных пользователей стоит также предусмотреть альтернативу форме: кнопку звонка и ссылку на мессенджер. Многим проще нажать одну кнопку, чем заполнять даже два поля.

Что происходит после нажатия «Отправить»

Момент после отправки часто упускают из виду, а зря. Если человек нажал кнопку и увидел лишь маленькую надпись «Спасибо», он не уверен, что всё сработало. Некоторые отправляют заявку повторно, некоторые на всякий случай звонят, а некоторые решают, что сайт сломан.

Хорошая страница или экран благодарности:

1. Чётко подтверждает, что заявка принята.
2. Сообщает, что будет дальше: «Менеджер перезвонит в течение 15 минут в рабочее время».
3. Предлагает полезное действие: посмотреть кейсы, подписаться на канал, скачать памятку.
4. Не заставляет ждать и не уводит человека на главную страницу автоматически.

И самое важное — обещание на экране должно выполняться. Если написано «перезвоним за 15 минут», а менеджер звонит на следующий день, никакая идеальная форма не спасёт сделку.

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

Что забрать в работу

Форма заявки кажется мелочью, но именно на ней заканчивается путь клиента по сайту. Чем меньше сомнений и трения в этот момент, тем больше заявок дойдёт до отдела продаж.

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

Если хотите, чтобы кто-то посмотрел на ваши формы свежим взглядом, команда MediaFrukt проведёт аудит и предложит конкретные изменения. Мы делаем это как отдельную услугу и в рамках поддержки сайтов на любом из тарифов.