Человек прочитал страницу услуги, убедился, что вы ему подходите, нажал «Оставить заявку» — и закрыл форму, не дозаполнив. Это самая обидная потеря на сайте: клиент был в шаге от обращения. По нашим наблюдениям на аудитах, до половины начатых заполнений не доходят до отправки, и почти всегда причина в самой форме, а не в посетителе. Разберём, что именно мешает и как это исправить без переделки всего сайта.
Почему люди бросают формы
Если смотреть записи сессий, причины отказов повторяются от сайта к сайту. Форма выглядит длинной, и человек решает, что заполнит её потом. Непонятно, зачем нужно конкретное поле, и появляется подозрение, что данные будут использованы для спама. Поле телефона не принимает номер в привычном формате, а сообщение об ошибке не объясняет, что не так. На телефоне открывается не та клавиатура, кнопка отправки уезжает под клавиатуру, а после нажатия ничего не происходит.
Каждая из этих мелочей — небольшое трение. Одно трение посетитель преодолеет, если очень мотивирован. Три-четыре подряд — и даже заинтересованный клиент предпочтёт позвонить конкуренту, у которого заявка оставляется в два касания. Поэтому работа над формами — это последовательное устранение трений, и каждое исправление даёт свой процент.
Хорошая новость: формы — одна из самых дешёвых точек роста конверсии. Переделка формы — это часы работы, а не недели, а эффект виден сразу в количестве заявок. О других способах повысить отдачу от сайта мы писали в статье о повышении конверсии.
Сколько полей нужно на самом деле
Каждое лишнее поле снижает вероятность отправки. Правило простое: спрашивайте только то, без чего вы не сможете обработать заявку. Всё остальное менеджер уточнит при первом контакте. Для заявки на обратный звонок достаточно имени и телефона, а часто — только телефона. Для расчёта стоимости — параметров, без которых расчёт невозможен, и способа связи.
Заказчики часто сопротивляются: «Нам нужно знать город, компанию, бюджет и откуда о нас узнали». Нужно — но не обязательно в момент первой заявки. Город можно определить по номеру или уточнить в разговоре, источник — посмотреть в аналитике, бюджет — обсудить, когда клиент уже вовлечён. Сравним два подхода на типичной форме заявки.
| Поле | Длинная форма | Короткая форма | Комментарий |
|---|---|---|---|
| Имя | Обязательно | Обязательно | Нужно для обращения в разговоре |
| Телефон | Обязательно | Обязательно | Основной канал связи |
| Обязательно | Нет | Уточняется при необходимости отправить КП | |
| Компания | Обязательно | Нет | Узнаётся в разговоре |
| Город | Обязательно | Нет | Часто понятен по номеру |
| Комментарий | Необязательно | Необязательно | Полезно для тех, кто хочет описать задачу |
| Откуда узнали | Обязательно | Нет | Видно в аналитике |
В одном из проектов — сайте производителя складского оборудования — мы сократили форму запроса цены с восьми полей до трёх. Количество заявок выросло примерно на 40%, а их качество не упало: менеджеры так же квалифицировали клиентов, только в разговоре, а не по анкете.
Когда длинная форма оправдана
Бывают случаи, когда данных действительно нужно много: заявка на кредит, бронирование, оформление заказа с доставкой. Тогда помогает разбивка на шаги. Форма из трёх шагов по три поля психологически воспринимается легче, чем одна из девяти. Первым шагом лучше ставить самое простое — например, выбор параметров, — а контакты просить в конце, когда человек уже вложил усилия и не хочет их терять.
Подписи, подсказки и порядок полей
Подпись поля должна быть видна всегда. Популярный приём — писать название поля серым текстом внутри и убирать его при вводе — экономит место, но создаёт проблему: начав печатать, человек забывает, что это было за поле, а проверить перед отправкой, всё ли заполнено правильно, уже не может. Подпись над полем — надёжнее. Компромиссный вариант — «плавающая» подпись, которая при вводе уменьшается и перемещается наверх, но остаётся видимой.
Текст внутри поля лучше использовать для примера формата: маска номера с кодом страны и скобками или «[email protected]». Если поле необязательное, так и подпишите — «необязательно». Звёздочки у обязательных полей многие не замечают или не понимают, а явная пометка у пары необязательных полей читается однозначно.
Порядок полей должен быть логичным: от простого к сложному, от общего к частному, как в разговоре. Сначала имя, потом телефон, потом подробности. Поля располагают в одну колонку: при двух колонках взгляд прыгает зигзагом, и люди пропускают поля. Исключение — короткие связанные поля, например «Дата» и «Время».
Ввод данных без ошибок
Значительная часть отказов связана с моментом, когда человек нажимает «Отправить» и получает красные сообщения об ошибках. Хорошая форма старается не допустить ошибок, а не наказывать за них.
- Поле телефона принимает номер в любом привычном формате — с восьмёркой, с кодом страны, со скобками и без — и само приводит его к единому виду
- Маска ввода подсказывает формат, но не блокирует вставку номера из буфера обмена
- Для каждого поля указан правильный тип: телефон открывает цифровую клавиатуру, e-mail — клавиатуру с «@»
- Работает автозаполнение браузера: имя, телефон и почта подставляются в одно касание
- Проверка выполняется при выходе из поля, а не только при отправке, и не ругается, пока человек ещё печатает
- Сообщение об ошибке стоит рядом с полем и объясняет, как исправить: «Укажите номер из 10 цифр после кода страны», а не «Неверный формат»
- После ошибки введённые данные сохраняются, форма не очищается
Последний пункт кажется очевидным, но мы до сих пор встречаем формы, которые после неудачной отправки сбрасывают все поля. Заполнить форму второй раз готов далеко не каждый.
Мобильные формы
На телефоне любая форма ощущается длиннее: экран маленький, клавиатура закрывает половину, попасть пальцем в нужное поле сложнее. Поэтому на мобильных правила ужесточаются. Поля и кнопки делают высотой не меньше 44–48 пикселей, текст в полях — не меньше 16 пикселей, иначе браузер увеличит страницу при фокусе. Кнопка отправки — на всю ширину экрана, чтобы в неё было невозможно промахнуться.
Нужно проверить, что при открытой клавиатуре видно активное поле и что после последнего поля легко добраться до кнопки. Модальные окна с формой на телефоне лучше разворачивать на весь экран, с крестиком в верхнем углу в пределах досягаемости. И подумайте об альтернативе: на мобильных многие клиенты предпочитают не заполнять форму, а позвонить или написать в мессенджер. Кнопки этих каналов рядом с формой не конкурируют с ней, а забирают тех, кто иначе бы ушёл.
Согласие на обработку данных и защита от спама
Любая форма, которая собирает имя, телефон или почту, собирает персональные данные. По 152-ФЗ «О персональных данных» нужно получить согласие посетителя и дать ссылку на политику обработки. Обычно это чекбокс с текстом «Я согласен на обработку персональных данных» и ссылками на документы. Важно, чтобы чекбокс не был отмечен заранее, а ссылки вели на реальные страницы — у нас это согласие на обработку данных и политика конфиденциальности.
Защита от спама — отдельная боль. Капча, в которой нужно разгадывать искажённые буквы или выбирать все светофоры, надёжно отсекает ботов, но и часть живых клиентов. Есть способы мягче: скрытые поля-ловушки, которые видят только боты, проверка времени заполнения, невидимые проверки поведения, которые просят что-то сделать только при подозрении. В большинстве случаев их сочетание убирает 95% спама, не мешая людям.
Проверяйте формы после каждого обновления сайта. Самая дорогая поломка — та, которую не видно: посетитель видит «Спасибо, заявка отправлена», а письмо не доходит из-за смены почтового сервера или обновления плагина. Раз в неделю отправляйте тестовую заявку и убеждайтесь, что она дошла до менеджера.
Что происходит после нажатия «Отправить»
Момент отправки — тоже часть формы. Кнопка должна сразу реагировать: менять текст на «Отправляем…» и блокироваться от повторного нажатия, иначе нетерпеливый посетитель отправит три одинаковые заявки. Затем — понятное подтверждение: не просто «Успешно», а «Спасибо, Анна! Перезвоним в течение 15 минут в рабочее время». Если заявка пришла ночью или в выходной, честно скажите, когда с человеком свяжутся.
Страница или сообщение благодарности — хорошее место для следующего шага: ссылки на портфолио, полезную статью, подписку на рассылку. Человек уже доверился вам, и он с большей вероятностью продолжит знакомство с сайтом. Отдельная страница благодарности также удобна для учёта конверсий в аналитике.
И наконец, путь заявки не заканчивается на сайте. Если обращения уходят в общий почтовый ящик, где их разбирают раз в день, никакая идеальная форма не спасёт. Заявки лучше сразу передавать в CRM с источником и страницей, на которой оставлена заявка, и уведомлять ответственного менеджера. Как это устроить, мы рассказываем в материале про связку сайта и CRM.
Как найти проблемные места в своих формах
Чтобы понять, где теряются клиенты, нужны данные. Настройте в аналитике отдельные цели на начало заполнения формы и на успешную отправку: соотношение покажет долю брошенных форм. Записи сессий покажут, на каком поле люди останавливаются, что пытаются ввести и где получают ошибки. Если на поле «E-mail» массово уходят — возможно, его стоит сделать необязательным. Если много ошибок в телефоне — проблема в маске ввода.
Бывает полезен и самый простой тест: попросите трёх коллег, не знакомых с сайтом, оставить заявку с телефона. Наблюдайте молча, не подсказывая. Обычно уже на втором человеке становится понятно, что нужно исправить.
Итоги
Форма — последний шаг перед обращением, и каждое лишнее поле, непонятная подпись или невнятная ошибка стоят вам заявок. Оставляйте только необходимые поля, подписывайте их явно, принимайте данные в любом привычном формате и сообщайте об ошибках рядом с полем и по-человечески. На мобильных делайте поля и кнопки крупными, а рядом давайте альтернативу — звонок или мессенджер. Не забывайте о согласии на обработку данных, мягкой защите от спама и понятном подтверждении отправки. И регулярно проверяйте, что заявки действительно доходят до менеджеров: это простая привычка, которая спасает от самых дорогих потерь.
Нужен сайт или интернет-магазин?
Обсудим задачу, подскажем подходящую платформу и оценим сроки и бюджет — бесплатно и без обязательств.
Обсудить проект
