Формы заявок, которые заполняют: практические приёмы

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

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

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

Каждое поле должно оправдать своё существование

Первое, с чего мы начинаем аудит формы, — вопрос к заказчику по каждому полю: «Что вы делаете с этой информацией?» Нередко выясняется, что менеджер всё равно перезванивает и уточняет детали, а половина полей заполняется для галочки.

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

Минимальный набор для большинства форм обратной связи:

• Имя — чтобы обратиться к человеку при звонке.
• Телефон или email — в зависимости от того, как вы связываетесь с клиентами.
• Комментарий — необязательное поле для тех, кто хочет что-то уточнить.

Всё остальное — город, компания, бюджет, сроки, способ связи — либо делается необязательным, либо переносится на следующий этап общения.

Подписи, подсказки и плейсхолдеры

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

Правила, которых мы придерживаемся:

• Подпись поля всегда видна — над полем или слева от него.
• Плейсхолдер используется только для примера формата: «+7 900 000-00-00» или «[email protected]».
• Если требуется особый формат, подсказка выводится под полем мелким текстом заранее, а не после ошибки.
• Обязательные поля отмечаются явно. Если почти все поля обязательные, лучше отметить необязательные словом «необязательно».
• Формулировки подписей — понятные клиенту: «Как к вам обращаться», а не «ФИО контактного лица».

Проверка данных без раздражения

Проверка введённых данных необходима: бессмысленно получать заявки с телефоном из пяти цифр. Но реализация проверки часто превращает заполнение формы в испытание.

Когда показывать ошибку

Худший вариант — показать все ошибки разом после нажатия кнопки «Отправить», да ещё и стереть при этом всё, что человек ввёл. Чуть лучше — показывать ошибку, как только пользователь начал печатать: он ещё не закончил ввод, а поле уже горит красным. Оптимально — проверять поле, когда пользователь его покинул, и снимать ошибку сразу, как только значение стало корректным.

Как формулировать ошибку

Сообщение должно объяснять, что не так и как исправить. Сравните:

Будьте снисходительны к формату

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

Удобство на мобильных

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

• Правильный тип клавиатуры. Для телефона — цифровая, для email — с символом @, для числовых полей — цифры. Это задаётся одним атрибутом в коде, но о нём часто забывают.
• Автозаполнение. Браузеры умеют подставлять имя, телефон, адрес и email из сохранённых данных. Для этого поля должны быть корректно размечены. Пользователь заполняет форму в два касания.
• Поля на всю ширину и одна колонка. Две колонки на мобильном — почти всегда ошибка.
• Крупные элементы. Высота поля и кнопки — от 44–48 пикселей, размер текста в полях — не меньше 16 пикселей, иначе iPhone автоматически увеличит масштаб страницы при фокусе.
• Минимум выпадающих списков. Если вариантов два-четыре, лучше показать их кнопками-переключателями, чем прятать в выпадающее меню.
• Никакой капчи с распознаванием картинок, если без неё можно обойтись. На телефоне это особенно мучительно.

Кнопка отправки и то, что вокруг неё

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

Рядом с кнопкой уместно снять последние сомнения коротким текстом:

• Когда с человеком свяжутся: «Перезвоним в течение 15 минут в рабочее время».
• Что будет после заявки: «Пришлём расчёт на почту, без звонков».
• Что данные не будут использованы для спама.
• Согласие на обработку персональных данных — обязательное требование закона. Делайте его аккуратным и коротким, со ссылкой на политику.

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

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

Многие формы после отправки показывают крошечное «Спасибо!» где-то сбоку, которое легко пропустить. Пользователь не уверен, ушла ли заявка, и либо отправляет её ещё раз, либо звонит уточнить.

Хорошее подтверждение:

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

Отдельная страница благодарности удобна ещё и тем, что на неё легко настроить цель в Яндекс Метрике и точно считать заявки по источникам трафика.

Важнее всего — скорость реакции. Если заявка пришла в рабочее время, перезвонить стоит в течение 10–15 минут. За это время человек ещё помнит, куда обращался, и, скорее всего, ещё не связался с конкурентами. Мы рекомендуем дублировать заявки в мессенджер ответственного менеджера, чтобы они не терялись в почте.

Многошаговые формы и квизы

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

Правила для многошаговых форм:

• Показывайте прогресс: «Шаг 2 из 4» или полоску заполнения.
• Начинайте с простых и интересных вопросов, контакты — в самом конце, когда человек уже вложил время.
• Дайте возможность вернуться на предыдущий шаг без потери данных.
• Не делайте больше 5–7 шагов.
• Каждый шаг — один вопрос или небольшая группа связанных полей.

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

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

Как найти проблемные места в существующей форме

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

1. Аналитика форм в Яндекс Метрике. Показывает, сколько человек начали заполнять форму, на каком поле останавливались и сколько отправили.
2. Записи Вебвизора. Посмотрите 15–20 сессий, где человек начал заполнение, но не отправил. Обычно проблема становится очевидна уже после пятой записи.
3. Самостоятельное заполнение. Заполните форму на своём телефоне, специально допуская ошибки: неверный формат телефона, пропущенное поле. Как реагирует сайт?
4. Проверка доставки. Убедитесь, что заявки действительно доходят. Мы встречали формы, которые месяцами отправляли письма в никуда, а владелец считал, что сайт просто не приносит клиентов.
5. Опрос менеджеров. Какие вопросы они задают клиенту при первом звонке? Возможно, часть из них лучше задать в форме, а другие поля, наоборот, не нужны.

Коротко о главном

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

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

Доработка форм обычно не требует больших вложений: это несколько часов работы дизайнера и разработчика. А эффект в виде дополнительных заявок становится заметен уже в первый месяц.