Кнопки и формы заявки: мелочи, которые влияют на конверсию

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

Почему «мелочи» стоят дорого

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

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

Кнопка: как сделать, чтобы её нажимали

Заметность

Кнопка целевого действия должна быть самым контрастным элементом в своём блоке. Если на сайте преобладают спокойные серо-синие тона, акцентная кнопка может быть оранжевой или зелёной. Главное — чтобы этот цвет не использовался повсюду, иначе он перестанет выделяться.

Форма и размер

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

Текст

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

• «Получить расчёт стоимости» вместо «Отправить»;
• «Записаться на бесплатный замер» вместо «Оставить заявку»;
• «Смотреть кухни в наличии» вместо «Подробнее»;
• «Скачать прайс-лист» вместо «Нажмите здесь».

Состояния

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

Форма: чем короче, тем лучше

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

Задача формы	Минимальный набор полей	Что обычно лишнее
Консультация	Имя, телефон или e-mail	Фамилия, город, название компании
Расчёт стоимости	Контакт и 1–3 ключевых параметра	Подробное техническое описание на старте
Запись на услугу	Имя, телефон, удобное время	Адрес, дата рождения
Оформление заказа	Контакт, адрес доставки, способ оплаты	Обязательная регистрация, повтор пароля

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

Поля ввода: детали, которые раздражают

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

• Подписи над полями, а не внутри. Подсказка-плейсхолдер исчезает при начале ввода, и человек забывает, что именно нужно написать. Подпись должна оставаться видимой.
• Правильная клавиатура на телефоне. Для поля телефона — цифровая, для e-mail — с символом «@». Это настраивается одним атрибутом, но про него часто забывают.
• Гибкий ввод телефона. Форма должна принимать номер с «+7», с «8», с пробелами, скобками и дефисами. Лучше приводить номер к нужному виду автоматически, чем требовать это от пользователя.
• Автозаполнение. Браузер умеет подставлять имя, телефон и адрес, если поля правильно размечены. Это экономит время, особенно на мобильных.
• Размер полей. Поле для комментария должно быть достаточно большим, чтобы было видно, что туда можно написать несколько строк.

Ошибки и подтверждение отправки

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

Как сделать правильно:

1. Проверяйте поле сразу после того, как человек закончил его заполнять, а не после нажатия кнопки.
2. Показывайте ошибку рядом с конкретным полем и объясняйте, что исправить: «Похоже, в номере не хватает цифры», а не «Неверный формат».
3. Никогда не стирайте уже введённые данные.
4. После успешной отправки показывайте понятное подтверждение: что заявка получена, когда с человеком свяжутся и каким способом.
5. Дублируйте подтверждение письмом, если в форме был e-mail, — это успокаивает и снижает число повторных заявок.

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

Окружение формы: доверие и мотивация

Форма не существует в вакууме. То, что находится рядом с ней, влияет на решение не меньше, чем количество полей.

• Короткое пояснение над формой: что человек получит после отправки. «Перезвоним в течение 15 минут в рабочее время и назовём точную стоимость».
• Снятие опасений: «Без спама», «Ни к чему не обязывает», «Расчёт бесплатный».
• Социальные доказательства: примеры работ, количество выполненных проектов, гарантии — но только реальные.
• Согласие на обработку данных — обязательно, но аккуратно: небольшой строкой под кнопкой, а не огромным блоком юридического текста.
• Альтернативный способ связи: e-mail или мессенджер рядом с формой для тех, кто не любит заполнять поля.

Как проверить свои формы за полчаса

Необязательно сразу заказывать большой аудит. Базовую проверку можно провести самостоятельно.

1. Заполните каждую форму на сайте с компьютера и со смартфона. Попробуйте ввести телефон разными способами.
2. Специально допустите ошибку и посмотрите, как сайт на неё реагирует.
3. Убедитесь, что заявка пришла, и засеките, сколько времени это заняло.
4. Настройте в Яндекс Метрике цели на отправку каждой формы и сравните конверсию по устройствам.
5. Посмотрите в Вебвизоре несколько сессий, где человек начал заполнять форму, но не отправил её.

Вывод

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

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