Форма заявки — последний шаг между интересом и клиентом. Человек прочитал страницу, согласился с ценой, решил написать. И именно здесь его можно потерять: лишним полем, непонятной ошибкой, кнопкой, которая ничего не показала после нажатия.
Ниже разбираем, как мы проектируем формы на сайтах услуг: какие поля оставить, как писать подписи и ошибки и что должно происходить после отправки.
Сколько полей нужно
Правило простое: оставьте только то, без чего менеджер не сможет связаться. Всё остальное он узнает в разговоре. Для большинства сайтов услуг это:
- Имя — чтобы обратиться к человеку.
- Телефон или мессенджер — чтобы связаться.
- Комментарий — необязательный, для тех, кто хочет описать задачу.
Поля «Компания», «Должность», «Бюджет», «Откуда узнали» почти всегда можно убрать. Если данные действительно нужны, их лучше спросить в разговоре или сделать необязательными. Когда параметров много и без них не посчитать цену, вместо длинной формы работает квиз или калькулятор.
Подписи и подсказки
Подпись над полем, а не внутри
Текст внутри поля, который исчезает при вводе, — частая ошибка. Человек начал печатать и уже не видит, что от него просили. Подпись должна стоять над полем постоянно, а внутри можно показать пример формата.
Объясните, зачем поле
«Телефон — перезвоним в течение рабочего дня» снимает тревогу «зачем им мой номер». Короткое пояснение под полем работает лучше, чем доверие по умолчанию.
Отметьте необязательное
Если обязательных полей большинство, помечайте необязательные словом «необязательно». Звёздочки люди часто не замечают или не понимают.
Ошибки, которые помогают
Сообщение «Ошибка» или «Неверный формат» ничего не объясняет. Хорошая ошибка говорит, что не так и как исправить.
- Плохо: «Некорректный телефон». Хорошо: «Введите телефон в формате +7 900 000-00-00».
- Плохо: «Поле обязательно». Хорошо: «Напишите, как к вам обращаться».
- Проверять поле после того, как человек закончил ввод, а не на каждой букве.
- Не стирать введённые данные при ошибке — повторно заполнять форму никто не станет.
- Показывать ошибку рядом с полем, а не одним списком над формой.
Маска телефона помогает, если она не мешает вставить номер из буфера и не ломается на восьмёрке в начале. Это мелочь, на которой спотыкается заметная часть форм, и мы всегда проверяем её на реальном телефоне.
Кнопка и то, что после неё
Текст кнопки должен говорить, что произойдёт: «Получить расчёт», «Записаться», «Отправить заявку». Слово «Отправить» без контекста работает хуже.
После нажатия у кнопки три состояния. Покой, отправка с понятной индикацией («Отправляем…») и результат. Если человек нажал и ничего не изменилось, он нажмёт ещё раз, и вы получите дубль. Или решит, что форма сломана, и уйдёт.
Сообщение об успехе должно сказать, что будет дальше: «Заявка принята. Перезвоним сегодня до 19:00» или «Ответ придёт в Telegram в течение часа». Обещайте только то, что реально выполняете. Если отправка не удалась, сообщите об этом и дайте запасной канал: телефон или ссылку на мессенджер.
Согласие и персональные данные
Форма с именем и телефоном собирает персональные данные, поэтому по закону о персональных данных нужно получить согласие на обработку и опубликовать политику. Согласие оформляется отдельно и не прячется в мелком тексте под кнопкой. Точные формулировки документов стоит согласовать с юристом.
Для пользователя это одна строка с флажком и ссылкой на текст согласия. Она не должна пугать, но и не должна быть заранее отмеченной. Когда мы делаем форму, мы закладываем её в дизайн сразу, чтобы потом не втискивать в готовую вёрстку. Что по закону обязательно в такой форме, разобрано в материале 152-ФЗ для сайта.
Где разместить форму
Форма не обязана быть одна и только внизу страницы. На длинном лендинге человек может решиться на середине, после блока с ценами или отзывами, и ему не должно быть нужно листать до конца. Рабочая схема: кнопка в первом экране, короткая форма после цен и полная в конце страницы.
На телефоне форма должна помещаться в экран вместе с кнопкой, а поле телефона — открывать цифровую клавиатуру. Кнопка мессенджера рядом с формой не конкурирует с ней, а подхватывает тех, кто не любит заполнять поля. Такой человек всё равно станет заявкой, просто через другую дверь.
Куда уходят заявки
Самая дорогая ошибка формы невидима: заявка отправилась, а до менеджера не дошла. Письмо попало в спам, бот уведомлений отключился, почта переполнена. Поэтому мы делаем так:
- Каждая заявка сохраняется в базе сайта и видна в админке.
- Уведомление уходит в Telegram и дублируется на почту или в CRM.
- Отправка формы считается целью в Метрике — видно, сколько заявок было на самом деле.
- Защита от спама работает на сервере и не мешает людям.
Если заявки должны попадать сразу в воронку, подробности — в статье об интеграции сайта с CRM. А как проверить, что цель считается правильно, — в разборе целей в Яндекс Метрике.
Проверьте свою форму: чек-лист
- Обязательных полей не больше трёх.
- Подписи стоят над полями и не исчезают при вводе.
- Ошибки говорят, как исправить, и не стирают данные.
- Номер вставляется из буфера и принимается с восьмёркой.
- Кнопка называет действие и показывает отправку.
- После отправки понятно, что будет дальше и когда.
- Заявка сохраняется в базе и приходит минимум в два канала.
- Согласие на обработку данных оформлено и не отмечено заранее.
Отправьте тестовую заявку со своего телефона и засеките, когда она дойдёт до менеджера. Если что-то из списка не выполняется, это можно исправить без переделки всего сайта. Опишите, как устроена ваша форма сейчас, через форму на главной, и мы подскажем, что поправить в первую очередь.