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

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

Что проверить в форме заявки в первую очередь

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

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

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

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

Какая форма нужна на какой странице

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

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

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

Сколько полей оставить и что делать, если не дают телефон

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

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

Поле остаётся в форме, только если без него менеджер не может начать разговор.

Когда хватит имени и телефона

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

Когда без уточнений не обойтись

Расчёт стоимости, подбор, запись на конкретное время. Без размеров или даты цену не назвать. Разбейте вопросы на шаги, коротко объясните, зачем они нужны, и проверьте на своих данных, доходят ли люди до конца.

Если человек не хочет оставлять номер

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

Что написать на кнопке и рядом с ней

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

Пары «было / стало»:

• «Отправить» → «Получить расчёт»: человек видит, что получит.
• «Оставить заявку» → «Записаться на осмотр»: название совпадает с тем, что просит форма.
• «Мы свяжемся с вами» → «Позвоним в рабочие часы в течение 30 минут»: подпись называет срок.

Срок в подписи обещайте только тот, который компания выдерживает. Если пообещать «в течение 30 минут» и не позвонить, клиент почувствует обман.

Кнопка должна быть заметной по размеру и контрасту, а при нажатии менять состояние, например показывать «Отправляем…». Тогда человек не нажмёт её дважды, а форма не создаст дубли. «Лучшего» текста кнопки не существует: два-три варианта проверяйте на своём сайте и сравнивайте по одинаковым периодам.

Как форма ведёт себя на телефоне

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

Пять проверок:

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

Факт. В HTML для телефона есть отдельный тип поля type="tel": на смартфоне браузер обычно показывает для него клавиатуру с цифрами. Описание типа и атрибута autocomplete — в документации MDN, ссылки в конце статьи.

Если на конструкторе эти атрибуты не настроить, попросите исполнителя проверить поле телефона. Долю мобильного трафика на вашем сайте смотрите в Метрике: общая цифра по стране про ваших посетителей ничего не скажет.

Согласие на данные и защита от спама

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

Согласие и политика

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

Защита от спама

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

Что видит человек после отправки и куда уходит заявка

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

Путь заявки выглядит так:

1. Человек нажимает кнопку, и форма проверяет поля.
2. Экран благодарности говорит, что заявка принята, и называет срок ответа.
3. Автоответ отправляет человеку копию данных.
4. Заявка попадает в CRM, почту или Telegram.
5. Менеджер получает уведомление и звонит.

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

Отправку удобно считать целью в Яндекс Метрике: её можно привязать к событию успешной отправки или к самой форме. Точный порядок настройки смотрите в справке Метрики.

Если отправка не удалась, человек должен увидеть понятное сообщение и телефон для связи, а не пустую страницу.

Мнение. Если заявки с сайта приходят на один адрес почты, добавьте второй канал, например Telegram. Тогда сбой одного канала не оставит заявку незамеченной.

Проверка формы за 15 минут

Для проверки нужны телефон, доступ к редактору страницы, к CRM или почте и к Метрике. Делайте шаги по порядку и после каждого записывайте, что пошло не так.

1. Откройте самую посещаемую страницу с формой на телефоне и найдите форму без подсказок. Если искали дольше нескольких секунд, проблема в структуре страницы.
2. Заполните форму как обычный человек, с телефона через мобильный интернет. Отметьте, где неудобно вводить.
3. Нажмите кнопку и посмотрите экран после отправки. Должно быть понятно, что заявка принята и когда ответят.
4. Проверьте, пришла ли заявка в CRM или на почту. Засеките, за сколько минут и в каком виде.
5. Посмотрите в Метрике, сработала ли цель.

Приоритеты правок такие: сначала то, что ломает отправку или доставку, потом то, что мешает заполнить, потом оформление.

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

Как понять, что правки помогли, и с чего начать

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

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

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

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

Частые вопросы

Сколько времени займут правки формы?

Текст кнопки, подпись и порядок полей обычно меняются прямо в редакторе страницы. Подключение к CRM, защита от спама и настройка целей в Метрике — работа для исполнителя, и срок зависит от вашего сайта. Попросите назвать его до начала работы.

Сколько работы добавится сотрудникам после правок?

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

Как проверить, что заявки не теряются по дороге?

Раз в неделю отправляйте тестовую заявку и смотрите, дошла ли она до менеджера. Раз в месяц сверяйте число отправок в Метрике с числом заявок в CRM или почте. Если цифры заметно расходятся, ищите сбой в доставке.

Стоит ли разрешать прикладывать файлы к заявке?

Только когда без файла нельзя посчитать или оценить работу, например без чертежа или фото. Укажите допустимый формат и размер и проверьте, что файл доходит вместе с заявкой.