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

«У нас должны быть поля: имя, фамилия, отчество, телефон, email, компания, должность, откуда узнали, комментарий». Итог — 12 полей, конверсия 0,3%. Разбираем, как правильно.

Форма — это узкое место сайта. Пользователь прочитал заголовок, прошёл через блоки, посмотрел кейсы, дошёл до формы — и ушёл. Причина в 90% случаев одна: форма отпугнула. Слишком много полей, непонятно зачем нужны, кнопка мелкая, ошибки валидации грубые. Каждая из этих проблем срезает 10–30% конверсии.

Мы делаем A/B-тесты форм на клиентских проектах и знаем: изменение формы часто даёт больший эффект, чем весь дизайн лендинга. Одно поле убрано — плюс 8% заявок. Кнопка стала крупнее и с чётким CTA — плюс 15%. Ниже — гид, как построить форму, которая работает.

Правило №1: минимум полей

Каждое лишнее поле снижает конверсию. Данные из наших замеров и открытых источников:

Правило: убирайте всё, что можно узнать в разговоре. Отчество, должность, «откуда узнали», «когда удобно позвонить» — всё это спросит менеджер за 30 секунд. В форме — только критичное.

Обязательные поля vs опциональные

Обязательные — со звёздочкой. Опциональные — с меткой «необязательно». Правило: если поле обязательное, вы должны быть готовы отсекать заявки без него. Например, если сделать email обязательным на лендинге, вы потеряете 15% посетителей, которые не хотят давать email. Стоит ли оно того?

Наш рекомендуемый минимум обязательных полей:

• Лендинг с обратным звонком: только телефон
• Лендинг с заявкой: имя + телефон
• Корпоративный сайт: имя + телефон/email (одно из)
• Интернет-магазин заказ: имя + телефон + адрес
• B2B консультация: имя + телефон + компания + суть задачи

Размер и текст кнопки

Кнопка — самый недооценённый элемент формы. Плохо: «Отправить», серая, 25 px высотой. Хорошо: «Получить расчёт бесплатно», цветная, 50 px высотой, во всю ширину формы на мобильном.

Правила кнопки:

• Высота 44–56 px (палец должен попасть без промаха)
• Контрастный цвет, отличный от фона
• Конкретный CTA: «Получить расчёт», «Заказать замер», «Записаться на консультацию»
• Никаких «Отправить», «Далее», «OK» — эти слова не мотивируют
• Иногда добавьте усилитель: «Бесплатно и без обязательств», «Ответим за 15 минут»

Валидация: как обрабатывать ошибки

Плохо: пользователь заполнил всё, нажал «Отправить», получил алерт «Ошибка в форме» — не понимает где. Хорошо: подсветка конкретного поля с проблемой, понятное сообщение «Введите телефон в формате +7XXX...», проверка на лету (пока печатает).

• Валидация в реальном времени, не после submit
• Сообщения об ошибке — конкретные («Email без @»), а не «Ошибка»
• Успешная валидация — зелёная галочка справа от поля
• Маска для телефона: +7 (___) ___-__-__ — вводится автоматически
• Не блокируйте кнопку «Отправить» — если она серая, пользователь не понимает, что нажать

Placeholder vs label: что использовать

Placeholder — текст внутри поля, который исчезает при вводе. Label — подпись над или слева от поля.

Плохо: только placeholder. Пользователь начал вводить — placeholder исчез — забыл, что за поле, стёр, начал заново.

Хорошо: label над полем + placeholder как пример. Например, label «Ваш телефон*», placeholder «+7 (999) 123-45-67». Пользователь видит и что вводить, и в каком формате.

Ещё лучше: плавающий label — при клике перемещается наверх поля. Экономит место, сохраняет ясность.

Автозаполнение и мобильные подсказки

Современные браузеры умеют подставлять данные (имя, телефон, адрес) автоматически, если у поля правильные атрибуты:

• autocomplete="name" — для имени
• autocomplete="tel" — для телефона + type="tel" (открывает цифровую клавиатуру)
• autocomplete="email" — для email + type="email"
• inputmode="numeric" — цифровая клавиатура для полей с цифрами

Экономия времени пользователю — 10–30 секунд. Рост конверсии на мобильных — +5–10%.

Согласие с обработкой персональных данных

По 152-ФЗ нужно согласие пользователя на обработку персональных данных. Варианты:

• Чек-бокс: «Согласен с обработкой персональных данных» — плохо, снижает конверсию на 3–5%
• Автосогласие: под кнопкой мелкая надпись «Нажимая кнопку, вы соглашаетесь...» — оптимум
• Только ссылка на политику: «Мы обрабатываем данные согласно политике» — минимальное решение

Второй вариант — юридически безопасен и не портит конверсию. Первый — только для сайтов, где заявок много и качество важнее количества.

Плохо vs хорошо: реальные примеры

Пример 1. Форма заказа звонка

Плохо:

• Заголовок: «Оставьте заявку»
• Поля: Имя*, Фамилия*, Email*, Телефон*, Тема, Комментарий
• Кнопка: «Отправить», серая, 30 px
• Чек-бокс согласия обязательный
• Конверсия: 0,4%

Хорошо:

• Заголовок: «Перезвоним за 15 минут»
• Поля: Имя, Телефон (только эти)
• Кнопка: «Заказать звонок», ярко-оранжевая, 52 px
• Согласие автоматическое через мелкую надпись
• Конверсия: 3,2% (рост в 8 раз)

Пример 2. Форма расчёта на лендинге ремонта

Плохо: 7 полей, из которых 4 обязательных, включая «планируемый бюджет» (люди не любят называть бюджет). Форма выглядит как анкета на 5 минут. Конверсия 0,8%.

Хорошо: 3 поля — телефон, площадь квартиры (число), тип ремонта (селект «косметический / капитальный / евро»). Форма выглядит как «получите расчёт за 30 секунд». Конверсия 4,1%.

Многошаговые формы: когда полезны

Иногда 5–7 полей нужны (сложный B2B, магазин с адресом). Тогда лучше разбить на 3 шага по 2 поля, чем 1 форма на 7 полей. Пользователь видит короткую первую страницу («Введите телефон»), заполняет, ощущает прогресс, идёт дальше. Многошаговые формы дают +30–70% к конверсии в сложных случаях.

Правила многошаговых форм:

• Прогресс-бар: «Шаг 1 из 3»
• На первом шаге — самое простое (телефон или один клик)
• На последнем шаге — только контакты
• Возможность вернуться на предыдущий шаг
• Сохранение состояния при перезагрузке страницы

Спасибо-страница и что делать после отправки

После отправки формы пользователь ждёт ответа. Плохо: alert «Заявка отправлена», страница остаётся с очищенной формой. Хорошо: переход на отдельную страницу /thanks/ с:

• Подтверждением «Заявка получена, перезвоним за 15 минут»
• Указанием, что делать дальше («сохраните наш телефон +7...»)
• Ссылками на полезное (примеры работ, статьи блога)
• Возможностью связаться в мессенджерах

Плюс отдельная страница нужна для настройки цели «конверсия» в Яндекс.Метрике и Директе.

Антиспам без ущерба конверсии

Каждый сайт получает спам-заявки (боты, конкуренты, скамеры). Плохой антиспам (сложная капча Google reCAPTCHA v2 с «выбери светофоры») отпугивает и людей: конверсия падает на 15–25%.

Оптимальный антиспам:

• Honeypot — скрытое поле, которое видят только боты. Заполнено → спам
• Проверка времени заполнения — меньше 3 секунд = бот
• reCAPTCHA v3 — невидимая, оценивает поведение фоном
• Проверка на «мусорные» номера телефонов (не начинается на +7)

Такой набор ловит 95% спама и не мешает людям. Явную капчу используйте только при высоком спам-трафике.

Формы на мобильных: специфика

• Поля во всю ширину (минус padding)
• Высота 44–50 px
• Правильный inputmode для клавиатуры
• Sticky-кнопка «Заказать» внизу экрана
• Автоматическая прокрутка к активному полю (не должно перекрываться клавиатурой)
• Возможность быстрого звонка кнопкой рядом (не только форма)

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

Хотите переделать свои формы?

Мы делаем аудит форм с рекомендациями и переделку в рамках поддержки сайта. Смотрите также A/B-тестирование лендинга — форма один из главных элементов для теста.