Зачем упрощать формы заявки
Форма заявки — последний шаг перед конверсией. Пользователь прошёл весь путь: нашёл сайт в поиске, прочитал информацию, решил оставить заявку — и бросает заполнение на третьем поле. По данным Formstack, формы с 3 полями имеют среднюю конверсию 25%, а формы с 6+ полями — менее 15%. Каждое лишнее поле — потерянные заявки.
Для поисковых систем конверсия формы — косвенный фактор ранжирования. Если пользователи приходят на сайт из поиска и совершают целевое действие (заполняют форму) — это позитивный поведенческий сигнал. Если приходят и уходят без действия — негативный. Упрощение формы увеличивает количество совершённых действий и улучшает поведенческие метрики.
По моему опыту, большинство форм на коммерческих сайтах перегружены. Имя, фамилия, email, телефон, компания, должность, город, «как вы о нас узнали», «опишите ваш проект подробно». 9 полей. Пользователь видит такую форму — и закрывает вкладку. А ведь для первого контакта достаточно имени и телефона.
Пошаговая инструкция
Шаг 1. Определите минимально необходимый набор полей
Задайте себе вопрос: какая информация нужна мне, чтобы связаться с клиентом и начать диалог? Не «какую информацию хотелось бы получить», а именно «без чего я не смогу перезвонить»:
- Имя. Одно поле. Не разделяйте на «Имя» и «Фамилия» — это два поля вместо одного. Для первого контакта достаточно знать, как обращаться к человеку. Фамилию узнаете при звонке.
- Телефон. Основной канал связи для российского бизнеса. Большинство клиентов предпочитают, чтобы им перезвонили, а не писали на email. Одно поле — и вы можете начать диалог.
- Сообщение (опционально). Текстовое поле для комментария. Сделайте его необязательным. Если клиент хочет просто получить обратный звонок — не заставляйте его формулировать запрос в письменном виде.
Итого: 2 обязательных поля (имя + телефон) и 1 опциональное (сообщение). Всё остальное — название компании, email, город, бюджет, тип услуги — можно выяснить при первом звонке. Не перекладывайте сбор информации на пользователя.
Шаг 2. Реализуйте заказ в 1 клик
Для интернет-магазинов «Купить в 1 клик» — стандарт, который увеличивает конверсию на 20-30%:
- Одно поле — телефон. Пользователь нажимает «Купить в 1 клик», вводит номер телефона, нажимает «Отправить». Менеджер перезванивает и оформляет заказ устно. Минимум действий для пользователя.
- Popup-форма. «Купить в 1 клик» открывает компактную всплывающую форму с одним полем, а не перенаправляет на отдельную страницу. Пользователь остаётся на карточке товара.
- Для услуг. Аналог — «Заказать звонок». Одно поле (телефон), возможно имя. Нажал — специалист перезвонит и обсудит детали. Барьер входа минимальный.
Шаг 3. Настройте автозаполнение
Браузеры умеют подставлять данные в формы автоматически. Используйте это:
- Атрибут autocomplete. Добавьте к каждому полю атрибут autocomplete с правильным значением: autocomplete=»name» для имени, autocomplete=»tel» для телефона, autocomplete=»email» для email. Браузер подставит сохранённые данные — пользователю не придётся набирать вручную.
- Правильные типы полей. Используйте type=»tel» для телефона (на мобильных откроется цифровая клавиатура), type=»email» для email (клавиатура с @), type=»text» для имени.
- Атрибут inputmode. Для мобильных устройств inputmode=»numeric» для телефона открывает цифровую клавиатуру, inputmode=»email» — клавиатуру с @ и .com.
<form action="/submit" method="post">
<input type="text" name="name" autocomplete="name" placeholder="Ваше имя" required>
<input type="tel" name="phone" autocomplete="tel" inputmode="tel" placeholder="+7 (___) ___-__-__" required>
<textarea name="message" placeholder="Комментарий (необязательно)"></textarea>
<button type="submit">Получить расчёт</button>
</form>Шаг 4. Настройте защиту от спама без видимой CAPTCHA
Формы с 2-3 полями привлекают спам-ботов. Защита нужна, но она должна быть невидимой для пользователя:
- Honeypot-поле. Добавьте скрытое поле, которое не видит человек (display: none или visibility: hidden), но заполняет бот. Если поле заполнено при отправке — запрос отклоняется. Простая и эффективная защита без какого-либо неудобства для пользователя.
- reCAPTCHA v3. Работает полностью в фоне, без интерфейсных элементов. Пользователь не видит галочку «я не робот» и не выбирает пожарные гидранты. Google оценивает поведение на странице и присваивает балл. Минус: добавляет внешний скрипт и зависимость от Google (ограничен в РФ с 2022 года).
- Проверка по времени. Скрытый timestamp фиксирует момент загрузки формы. При отправке проверяется разница: если прошло менее 3 секунд — это бот (человек не заполнит форму за 3 секунды). Реализуется через скрытое поле с timestamp и серверную проверку.
- Антиспам-токен. Генерируйте уникальный токен при загрузке страницы и проверяйте его при отправке формы. Бот, который отправляет POST-запрос напрямую (без загрузки страницы), не получит токен.
Комбинация honeypot + проверка по времени блокирует 95% спама без использования внешних сервисов. Если этого недостаточно — добавьте серверную проверку по IP и rate limiting.
Шаг 5. Адаптируйте форму для мобильных устройств
Более 60% трафика в рунете — мобильный. Форма, которая удобна на десктопе, может быть неюзабельной на телефоне:
- Полная ширина. Поля формы и кнопка отправки — на всю ширину экрана (width: 100%). Узкие поля на мобильном экране сложно заполнять.
- Крупные поля ввода. Минимальная высота поля — 44-48 пикселей. Мелкие поля сложно нажать пальцем, пользователь промахивается и раздражается.
- Крупная кнопка. CTA-кнопка — высота минимум 48 пикселей, на всю ширину экрана. Контрастный цвет, крупный шрифт.
- Расстояние между полями. Минимум 16 пикселей между полями. Если поля расположены вплотную — пользователь может случайно нажать на соседнее.
- Фиксированная форма или sticky-кнопка. На мобильных можно сделать фиксированную кнопку «Оставить заявку» внизу экрана. По нажатию — открывается компактная popup-форма. Так форма доступна с любого места страницы без прокрутки наверх.
- Правильная клавиатура. type=»tel» показывает цифровую клавиатуру, type=»email» — клавиатуру с @. Пользователь не переключает раскладку вручную.
Шаг 6. Настройте подтверждение отправки
После отправки формы пользователь должен понимать, что произошло:
- Сообщение об успешной отправке. Текст на месте формы или popup: «Спасибо! Я получил вашу заявку и свяжусь с вами в течение 30 минут». Конкретный срок ответа снижает тревожность.
- Не перенаправляйте на отдельную страницу. Редирект на /thank-you/ после отправки формы — потеря контекста. Пользователь был на странице услуги, изучал информацию — и попал на пустую страницу «Спасибо». Показывайте подтверждение на той же странице.
- Цель в Яндекс.Метрике. Настройте цель на отправку формы. Это позволяет считать конверсию и оценивать эффективность каждой страницы: какие страницы генерируют больше заявок.
- Предложите дополнительное действие. После подтверждения: «Пока ждёте звонка — посмотрите наши кейсы» или «Подпишитесь на Telegram-канал, чтобы получать полезные материалы». Не оставляйте пользователя с пустой страницей.
Шаг 7. Проверьте работоспособность формы
Форма, которая не отправляет заявки — хуже, чем отсутствие формы:
- Тестовая отправка. Отправьте форму сами с разных устройств: десктоп, iPhone, Android-телефон. Проверьте, приходит ли уведомление на вашу почту или в CRM.
- Проверка валидации. Попробуйте отправить пустую форму, форму с некорректным телефоном, форму с некорректным email. Ошибки должны быть понятными и подсвечивать конкретное поле.
- Проверка на разных браузерах. Chrome, Firefox, Safari, Яндекс.Браузер — убедитесь, что форма работает во всех. Особенно на Safari (iOS), где могут быть проблемы с автозаполнением и валидацией.
- Мониторинг. Настройте уведомления о неработающих формах. Если сервер перестал отправлять email (проблемы с SMTP) — вы узнаете не через неделю, а сразу.
Типичные ошибки
- Слишком много полей. 6-10 обязательных полей: имя, фамилия, email, телефон, компания, должность, город, «опишите проект». Пользователь видит эту анкету — и уходит. 2-3 поля максимум для первого контакта.
- Видимая CAPTCHA. Классическая CAPTCHA с искажённым текстом или reCAPTCHA v2 с картинками. «Выберите все изображения с автобусами» — это 30-60 секунд раздражения. Снижает конверсию формы на 10-30%. Используйте honeypot или reCAPTCHA v3 (невидимая).
- Форма не адаптирована для мобильных. Маленькие поля, крошечная кнопка, неправильный тип клавиатуры. На мобильном устройстве форма занимает полэкрана, но нажать на поле и ввести данные физически неудобно.
- Нет автозаполнения. Атрибуты autocomplete не указаны, браузер не может подставить сохранённые данные. Пользователь вынужден набирать номер телефона вручную — а на мобильном это 12 цифр, каждая из которых может быть набрана неправильно.
- Кнопка «Отправить» без пояснения. Пользователь заполнил форму, видит кнопку «Отправить» — и не понимает, что произойдёт дальше. Ему позвонят? Напишут? Когда? Текст кнопки и текст под ней должны объяснять следующий шаг.
- Нет подтверждения отправки. Пользователь нажал кнопку — и ничего не произошло. Форма обнулилась, но не ясно: заявка отправлена или произошла ошибка? Всегда показывайте чёткое подтверждение: «Заявка отправлена. Перезвоним в течение 30 минут».
- Обязательное поле «Сообщение». Пользователь хочет, чтобы ему просто перезвонили. А форма требует описать проект. Он не знает, что написать — и закрывает страницу. Поле сообщения — всегда опциональное.
- Отсутствие мониторинга. Форма «сломалась» три дня назад: email-сервер не работает, заявки не приходят. Вы узнали только потому, что клиент написал в мессенджер. Настройте мониторинг работоспособности.
Что проверить в итоге
- Формы на сайте содержат не более 2-3 обязательных полей
- Основные поля: имя + телефон. Email и сообщение — опциональные
- На карточках товаров есть кнопка «Купить в 1 клик» с формой из одного поля
- Атрибуты autocomplete указаны для всех полей
- Типы полей корректные: type=»tel» для телефона, type=»email» для email
- Защита от спама невидима для пользователя: honeypot, reCAPTCHA v3, проверка по времени
- Нет видимой CAPTCHA с картинками или искажённым текстом
- Форма адаптирована для мобильных: крупные поля, кнопка на всю ширину, минимум 44px высота
- На мобильных открывается правильная клавиатура для каждого типа поля
- После отправки показывается чёткое подтверждение с указанием срока ответа
- Форма протестирована на разных устройствах и браузерах
- В Яндекс.Метрике настроена цель на отправку формы
- Настроен мониторинг: уведомления о неработающей форме
