Форма заявки — последний шаг между интересом посетителя и обращением в компанию. Можно вложить большой бюджет в рекламу и сделать красивый лендинг, но потерять клиентов на неудобном поле с телефоном или непонятной кнопке. Хорошая новость в том, что формы поддаются оптимизации лучше многих других элементов сайта: изменения вносятся быстро, а эффект легко измерить. Разберем, что влияет на конверсию и как улучшать формы системно.
Почему посетители бросают форму
Прежде чем что-то менять, полезно понять причины отказов. Человек, который начал заполнять форму, уже проявил намерение, и если он не дошел до отправки, значит, что-то его остановило. Обычно это не одна большая проблема, а сочетание мелких раздражителей.
Самые частые причины, по которым заявки теряются:
Читайте также: Метрики SMM: охват, вовлеченность, конверсии
- слишком много полей, особенно необязательных или непонятных;
- требование данных, которые человек не готов отдать на первом шаге, — например, адрес или название компании;
- непонятно, что произойдет после отправки: позвонят ли, когда, будут ли навязывать услуги;
- ошибки валидации, которые появляются только после нажатия кнопки и стирают введенное;
- неудобная мобильная версия: мелкие поля, неправильная клавиатура, кнопка уезжает за край экрана;
- отсутствие доверия: нет упоминания о конфиденциальности, сайт выглядит заброшенным.
Каждая из этих причин по отдельности может снижать конверсию на несколько процентов, а вместе они способны вдвое урезать поток обращений. При этом владельцы часто видят только итоговую цифру и делают вывод, что «реклама плохо работает».
Количество и порядок полей
Главное правило: просите только то, без чего невозможно обработать заявку. Для обратного звонка достаточно имени и телефона, а иногда — только телефона. Каждое дополнительное поле увеличивает усилие и снижает долю завершенных форм. Если менеджеру для расчета нужна площадь помещения или модель автомобиля, подумайте, нельзя ли уточнить это в разговоре.
Проведите ревизию: выпишите все поля и для каждого ответьте на вопрос, что случится, если его убрать. Часто выясняется, что поле «Комментарий» почти никто не заполняет, а «Email» дублирует телефон и нужен лишь для рассылки, которую давно никто не делает. Такие поля можно удалить или сделать необязательными и визуально второстепенными.
Порядок тоже важен. Начинайте с простого: имя заполняется почти автоматически и вовлекает человека в процесс. Сложные или чувствительные вопросы ставьте ближе к концу, когда пользователь уже вложил усилие и с большей вероятностью доведет дело до конца.
Многошаговые формы
Когда данных действительно нужно много — например, для расчета стоимости ремонта или подбора кредита, — разбейте форму на шаги. Первый шаг должен быть максимально легким: выбор варианта кнопкой, а не ввод текста. Индикатор прогресса показывает, сколько осталось, и снижает тревогу. Контакты лучше запрашивать на последнем шаге: человек, ответивший на пять вопросов о своем проекте, охотнее оставит телефон, чтобы получить результат.
- Шаг первый — выбор типа услуги или задачи кнопками.
- Шаг второй — параметры: площадь, сроки, бюджет в виде диапазонов.
- Шаг третий — дополнительные пожелания, необязательные.
- Шаг четвертый — имя и телефон с обещанием конкретного результата.
Тексты: заголовок, подписи и кнопка
Слова вокруг формы влияют на решение не меньше, чем количество полей. Заголовок должен объяснять выгоду, а не просто называть действие. «Оставьте заявку» говорит о том, что нужно компании. «Получите расчет стоимости за 15 минут» — о том, что получит клиент. Разница в восприятии существенная.
Кнопка — отдельная точка внимания. Безликие «Отправить» и «Submit» проигрывают конкретным формулировкам, описывающим результат: «Получить смету», «Записаться на замер», «Узнать цену». Текст кнопки должен продолжать фразу «Я хочу...». Цвет кнопки должен контрастировать с фоном, а сама она — быть достаточно крупной, чтобы по ней было легко попасть пальцем.
Подписи к полям размещайте над полем, а не внутри него в виде исчезающей подсказки. Плейсхолдер пропадает при вводе, и человек забывает, что именно от него требовалось. Пример формата можно дать серым текстом внутри, но название поля должно оставаться видимым.
Под кнопкой уместна короткая строка, снимающая опасения: «Перезвоним в течение 10 минут в рабочее время», «Не передаем номер третьим лицам», «Без спама и навязчивых звонков». Это микрообещание отвечает на невысказанные вопросы и заметно повышает готовность нажать кнопку.
Проверьте форму глазами клиента: прочитайте только заголовок, кнопку и строку под ней. Если из этих трех элементов непонятно, что произойдет после отправки, тексты нужно переписать.
Валидация и обработка ошибок
Плохая валидация — тихий убийца конверсии. Классический пример: человек вводит телефон с пробелами или через восьмерку, нажимает кнопку и получает красное сообщение «Неверный формат», а иногда еще и сброс всех полей. Часть пользователей на этом уходит.
Правила удобной валидации:
- принимайте телефон в любом разумном формате и нормализуйте его сами;
- используйте маску ввода, которая подставляет скобки и дефисы автоматически, но не мешает вставке номера из буфера;
- проверяйте поле сразу после выхода из него, а не только при отправке;
- формулируйте ошибку по-человечески: не «Invalid input», а «Похоже, в номере не хватает цифры»;
- никогда не стирайте введенные данные при ошибке;
- выделяйте проблемное поле и прокручивайте страницу к нему.
Отдельно проверьте, как форма ведет себя при сбое отправки. Если сервер не ответил, пользователь должен увидеть понятное сообщение и возможность повторить попытку, а не бесконечно крутящийся индикатор. Хорошая практика — дублировать заявки на почту и в CRM, чтобы технический сбой одной системы не приводил к потере обращения.
Размещение формы и сценарии на странице
Где расположена форма, так же важно, как то, из чего она состоит. На посадочной странице для горячего трафика из контекстной рекламы форма уместна на первом экране: человек уже ищет услугу и готов действовать. На информационной странице или в блоге навязчивая форма в самом начале скорее отпугнет, лучше поставить ее после полезного контента.
Для длинных страниц используйте несколько точек контакта: форму на первом экране, кнопку после блока с ценами, форму в конце. Повторять одну и ту же форму не обязательно — можно предлагать разные действия в зависимости от контекста. После блока с портфолио — «Хочу так же», после калькулятора — «Зафиксировать цену», после отзывов — «Получить консультацию».
Всплывающие окна работают, но требуют аккуратности. Окно, которое появляется через три секунды после входа, раздражает и мешает знакомству с сайтом. Окно при попытке уйти или после прокрутки большей части страницы воспринимается спокойнее. Обязательно дайте легко закрыть его и не показывайте повторно в рамках сессии.
Альтернативные каналы связи
Не все готовы заполнять форму. Часть аудитории предпочитает написать в мессенджер, часть — позвонить. Кнопки быстрой связи в Telegram или другом мессенджере рядом с формой не конкурируют с ней, а забирают тех, кто иначе ушел бы. Важно только учитывать эти обращения в аналитике, чтобы видеть полную картину.
Мобильная версия формы
На смартфонах формы теряют больше заявок, чем на компьютерах, и причина обычно в технических мелочах. Откройте свою форму на телефоне и заполните ее от начала до конца — это самый быстрый аудит.
На что обратить внимание:
- Поля и кнопка должны быть крупными, высотой не меньше 44–48 пикселей.
- Для телефона должна открываться цифровая клавиатура, для email — клавиатура с символом @.
- Включите автозаполнение: браузер подставит имя и телефон из профиля одним касанием.
- Кнопка отправки не должна прятаться под всплывающими элементами, чатами или панелью cookies.
- После отправки страница не должна скакать, а сообщение об успехе — быть видимым без прокрутки.
- Шрифт в полях не меньше 16 пикселей, иначе некоторые браузеры автоматически масштабируют страницу.
Отдельно проверьте формы в окнах и всплывающих слоях: на маленьком экране они часто не помещаются целиком, и кнопку закрытия или отправки просто невозможно найти.
Аналитика и тестирование
Без измерений оптимизация превращается в гадание. Настройте в Яндекс Метрике цели на успешную отправку каждой формы — не на нажатие кнопки, а именно на успешную отправку, иначе в статистику попадут попытки с ошибками. Используйте аналитику форм, чтобы видеть, на каком поле пользователи чаще всего останавливаются и уходят. Вебвизор помогает понять поведение на конкретных примерах.
Посчитайте базовую воронку: сколько человек увидели форму, сколько начали заполнять, сколько отправили. Допустим, форму видят две тысячи человек в месяц, начинают заполнять 300, а отправляют 120. Значит, конверсия из начала в отправку — 40%, и потери происходят внутри формы. Если же начинают заполнять лишь 60 человек, проблема в том, что форма не мотивирует, — работать нужно с заголовком, предложением и размещением.
Изменения лучше вносить по одному и сравнивать результаты на достаточном объеме. При небольшом трафике A/B-тест может длиться неделями, поэтому начинайте с изменений, у которых потенциально большой эффект: сокращение полей, новый текст кнопки, перенос формы выше. Мелкие правки цвета или скругления углов оставьте на потом.
Типичные ошибки и что происходит после отправки
Конверсия формы не заканчивается на кнопке. Страница или сообщение после отправки — важная часть сценария. Голое «Спасибо, ваша заявка принята» упускает возможность. Лучше сообщить, что будет дальше, когда ждать звонка, и предложить полезное действие: посмотреть кейсы, подписаться на канал, скачать памятку. Это снижает тревогу и количество повторных заявок.
Частые ошибки, которые встречаются на коммерческих сайтах:
- обязательное согласие с длинным юридическим текстом без возможности быстро его прочитать;
- галочка согласия, которую нужно ставить вручную, хотя достаточно пояснения под кнопкой (уточните требования к согласию на обработку данных для вашего случая);
- капча со сложными картинками на форме обратного звонка;
- форма, отправляющая данные на почту, которую никто не читает;
- долгий ответ менеджера: идеальная форма бесполезна, если перезванивают через сутки.
Последний пункт стоит подчеркнуть. Скорость обработки заявки напрямую влияет на итоговую конверсию в продажу. Человек, оставивший заявку на нескольких сайтах, обычно выбирает того, кто позвонил первым. Настройте уведомления о новых заявках в мессенджер ответственного сотрудника и отслеживайте время реакции.
Итоги
Конверсия формы складывается из множества деталей: минимального набора полей, понятного заголовка с выгодой, конкретной кнопки, дружелюбной валидации, продуманного размещения и удобной мобильной версии. Начните с аудита — заполните свои формы на телефоне и компьютере, посмотрите аналитику и найдите места, где люди останавливаются. Затем вносите изменения по одному, измеряйте результат и не забывайте о том, что происходит после отправки: быстрый и вежливый ответ превращает заявку в клиента.