Формы на сайте и пользовательский опыт: как сделать, чтобы их заполняли

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

Почему форма — главный участок пользовательского опыта

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

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

Сокращайте до необходимого

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

Типичные лишние поля в форме первого обращения:

• Отчество. Нужно в договоре, не нужно в заявке.
• Название компании и должность. Спрашивается в первом же ответном письме.
• Бюджет выпадающим списком. Человек не знает, что выбрать, и закрывает форму.
• Сроки и объём работ. Это предмет разговора, а не поля ввода.
• Одновременно и телефон, и почта как обязательные. Достаточно одного, второе — по желанию.
• Капча там, где её можно заменить скрытой защитой от роботов.

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

Что мешает чаще всего

Мобильные особенности

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

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

Согласие на обработку данных

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

Практические детали, которые обычно упускают:

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

Что происходит после отправки

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

• Сообщение на экране. Человек должен увидеть подтверждение, а не остаться на той же странице.
• Письмо ответственному. Проверьте, что оно приходит, содержит все поля и не попадает в спам.
• Письмо клиенту. Короткое подтверждение с указанием, когда ответят, снимает тревогу и уменьшает число повторных обращений.
• Запись в систему. Если заявки должны попадать в CRM, проверьте, что попадают все, а не через одну.
• Отметка в аналитике. Без цели на отправку формы невозможно понять, работает ли реклама.

Проверка раз в месяц

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

1. Отправьте тестовую заявку с телефона и с компьютера.
2. Проверьте, пришло ли письмо и не оказалось ли оно в спаме.
3. Убедитесь, что ответственный получил уведомление и знает, что с ним делать.
4. Проверьте, появилась ли запись в CRM, если она настроена.
5. Посмотрите в аналитике, растёт ли счётчик достижения цели.
6. Сравните число заявок за месяц с предыдущим: резкое падение почти всегда означает поломку, а не сезон.

Чего делать не стоит

• Всплывающая форма через три секунды после входа. Человек ещё не понял, куда попал.
• Обязательное поле «Как вы о нас узнали». Это ваш вопрос, а не его.
• Сложная капча. Она отсеивает роботов вместе с частью людей.
• Форма, которая при ошибке очищает все поля.
• Обещание «ответим в течение минуты», если по факту отвечают на следующий день.

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