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

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

Сколько полей нужно в форме заявки

Каждое поле — вопрос, на который нужно ответить, прежде чем получить то, за чем пришёл. На имя и телефон человек отвечает не задумываясь. А над «Бюджетом» или «Площадью помещения» задумывается, откладывает заявку на вечер — и вечером уже не возвращается.

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

Поле	Нужно ли	Почему
Телефон	Да, если вы перезваниваете или пишете	Главный способ связаться
Имя	Обычно да	Чтобы обратиться к человеку; можно сделать необязательным
Способ связи	Да, если отвечаете не только звонком	Переключатель вместо отдельного поля под каждый мессенджер
Почта	Только если отвечаете письмом	Требовать сразу и телефон, и почту — лишний шаг
Комментарий	Да, но необязательный	Кому есть что сказать, напишет, остальные пропустят
Удобное время звонка	Если перезваниваете не сразу	Чтобы звонок не застал человека за рулём
Бюджет, площадь, сроки	Обычно нет	Человек может не знать ответа и отложить заявку
«Откуда вы о нас узнали»	Обычно нет	Источник перехода видно в Метрике

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

Как помочь заполнить форму: подписи, маска, клавиатура

• Подписи над полями. Серый текст внутри поля исчезает с первой буквой — и через секунду уже не вспомнить, что спрашивали. Подпись над полем остаётся на месте.
• Подсказка-пример. Под полем комментария — образец ответа: «Например: ванная 4 м², нужна смета и сроки». Человек видит, чего от него ждут, и пишет конкретнее.
• Маска телефона. Маска сама ставит +7, скобки и дефисы и показывает, сколько цифр осталось. Но она не должна мешать: номер, вставленный из записной книжки или подставленный браузером, — с восьмёркой, с +7, с пробелами — должен ложиться правильно, а не превращаться в «+7 (8 91…». Если пишут из других стран, нужен выбор кода страны.
• Нужная клавиатура. На смартфоне поле телефона должно открывать цифровую клавиатуру, а поле почты — клавиатуру с @. Это задаётся типом поля в коде. А разметка для автозаполнения позволяет браузеру подставить имя, телефон и почту одним касанием.

На телефоне форма — в одну колонку, с полями и кнопкой под палец. Подробнее о мобильной вёрстке — в статье про адаптивный дизайн.

Ошибки ввода: как сказать о них по-человечески

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

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

Что написать на кнопке и что показать после отправки

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

Согласие. Имя и телефон — персональные данные. По 152-ФЗ на сайте должна быть опубликована политика их обработки, а у формы — согласие посетителя. Обычно это флажок рядом с кнопкой, который человек отмечает сам, и ссылки на оба документа. Тексты документов лучше составить или проверить с юристом — особенно если форма спрашивает о здоровье или о детях: для таких данных есть отдельные требования.

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

После отправки. Сообщение появляется на месте формы и не исчезает через секунду. В нём — что будет дальше: кто свяжется, когда и как. Например: «Заявка принята. Менеджер позвонит сегодня до 19:00. Если вопрос срочный, звоните…» — и номер. Если отправить не получилось, скажите об этом прямо, сохраните введённые данные и предложите другой способ связаться.

Куда приходят заявки и как их не потерять

Потерянная заявка обходится дороже, чем кажется: человек ждёт звонка, не дожидается и запоминает, что ему не ответили.

• Почта — просто и привычно, но письма с сайта попадают в спам, а ящик сотрудника в отпуске никто не открывает. Лучше общий адрес, чем личный.
• Мессенджер — уведомление приходит в рабочий чат сразу, и его видит вся команда.
• CRM — каждая заявка становится сделкой со статусом и историей: видно, кто взял, что ответили, чем закончилось.

Дублируйте. Отправляйте каждую заявку хотя бы в два канала — например, в CRM и на почту или в рабочий чат и на почту. Сломаться может любое звено: сменили пароль почты, обновили сайт, поменяли настройки CRM. Пока один канал чинят, второй подхватит заявки. Не лишней будет и копия всех заявок на самом сайте.

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

Как защитить форму от спама и не мучить людей

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

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

Если спам всё равно проходит, подключают невидимую капчу. Например, Yandex SmartCaptcha в невидимом режиме показывает задание только тем, кого сочтёт подозрительным, — остальные его не видят. После настройки любой защиты отправьте несколько заявок сами, с телефона и с компьютера: фильтр не должен отсекать живых людей.

Цель в Яндекс Метрике и регулярная проверка

Без цели Метрика покажет посещения, но не заявки и не то, откуда они пришли. Цель можно настроить по-разному:

• JavaScript-событие — сайт сообщает Метрике о заявке, когда сервер её принял. Самый точный вариант: попытки с ошибкой в отчёт не попадут.
• Страница «Спасибо» — после отправки человек попадает на отдельную страницу, и цель считает её посещения.
• Автоцель «Отправка формы» — Метрика сама находит формы на сайте; проверьте, что она видит именно вашу.

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

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

Частые ошибки

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

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