Форма заявки — это последний шаг перед тем, как посетитель станет клиентом. До этого момента он читал текст, смотрел фотографии, сравнивал цены — и наконец решил написать. Именно в этот момент многие сайты теряют человека: форма пугает количеством полей, кнопка не понятна, а после отправки ничего не происходит. Разберём, из чего складывается форма, которую действительно заполняют.
Почему форма — это не техническая деталь
Владельцы сайтов часто относятся к форме заявки как к формальности: «ну, поставим поля имя, телефон, email — и ладно». Но форма — это точка, где пользователь переходит от чтения к действию, а любое действие требует усилия. Чем больше усилий просит форма, тем больше людей передумают на середине пути. Это касается и лендингов, и корпоративных сайтов, и интернет-магазинов — везде, где есть хоть одна форма обратной связи.
Разница между хорошо спроектированной формой и плохой измеряется в конверсии в разы, а не в процентах. Мы видели ситуации, когда сокращение формы с восьми полей до трёх увеличивало число заявок почти вдвое — при том же трафике и том же предложении. Это не магия, а следствие простого правила: каждое лишнее поле — это ещё один повод отказаться от заполнения.
Сколько полей действительно нужно
Базовый вопрос при проектировании формы — что мы обязаны узнать прямо сейчас, а что можно уточнить потом, в разговоре по телефону или переписке. Разработчику и владельцу бизнеса кажется логичным собрать побольше данных сразу: имя, телефон, email, город, тип услуги, бюджет, комментарий. Посетителю это кажется допросом.
- Имя — нужно почти всегда, чтобы менеджер мог обратиться по имени.
- Телефон или email — один из двух контактов обязателен, оба сразу — уже избыточно для первого касания.
- Комментарий — делайте его необязательным полем, а не обязательным: часть людей просто не хочет ничего писать, но готова оставить контакт.
- Остальные поля (бюджет, город, способ связи) — выносите в дополнительный шаг после отправки или уточняйте при звонке.
Хорошее правило: если поле можно убрать без потери смысла заявки — уберите его. Каждое оставшееся поле должно отвечать на вопрос «зачем нам это нужно прямо сейчас», а не «может пригодиться».
Разные формы для разных задач
Форма «Заказать звонок» в шапке сайта и форма расчёта стоимости на странице услуги — это разные сценарии, и поля в них должны отличаться. В шапке уместны только имя и телефон: человек ещё ничего не решил, ему нужно быстро связаться. На странице с калькулятором или подробным брифом можно спросить больше — раз человек дошёл до этого блока, он уже вовлечён и готов рассказать о задаче подробнее.
Подписи, плейсхолдеры и подсказки
Форма без подписей полей, где вместо этого используется только серый текст-подсказка внутри поля (плейсхолдер), — распространённая, но не самая удачная практика. Как только пользователь начинает вводить текст, подсказка исчезает, и через пару полей он забывает, что где вводил, особенно на телефоне, где экран небольшой. Лучше держать подпись над полем постоянно видимой, а плейсхолдер использовать как дополнительный пример формата — например, показать образец записи номера телефона с кодом страны.
Отдельно стоит сказать про необязательные поля: их нужно явно помечать словом «необязательно», а не оставлять пользователя гадать, обязательно ли поле «Комментарий». Неопределённость тоже отталкивает — человек либо тратит время на заполнение того, что можно было пропустить, либо боится отправить форму с пустым полем.
Кнопка отправки: слово имеет значение
«Отправить» — самый нейтральный и самый слабый вариант текста на кнопке. Он не говорит, что произойдёт дальше, и не создаёт ощущения выгоды. Формулировки вроде «Оставить заявку», «Получить расчёт», «Узнать цену», «Заказать звонок» работают лучше, потому что описывают результат действия, а не техническое действие как таковое.
Важно и то, что происходит визуально: кнопка должна выделяться на форме заметным цветом, быть достаточно крупной для нажатия пальцем на телефоне и не теряться среди других элементов страницы. Если рядом с кнопкой отправки стоит другая кнопка похожего размера и цвета — например, «Отмена» или ссылка на другую страницу — риск случайного клика не туда возрастает.
Частая ошибка — кнопка формы окрашена в тот же оттенок, что и второстепенные элементы на странице, например, ссылка «Подробнее» в блоке услуг. Пользователь на автомате не воспринимает её как что-то важное. Кнопку отправки заявки стоит выделять уникальным акцентным цветом, который больше нигде на странице не используется в качестве кнопки.
Что происходит после нажатия «Отправить»
Момент сразу после отправки формы недооценён почти так же часто, как и сама форма. Если после клика ничего не меняется — кнопка просто «зависает», а страница выглядит так же, как секунду назад — пользователь начинает нервничать: сработало или нет, стоит ли нажимать ещё раз. Двойная отправка одной и той же заявки — не редкость именно из-за этой неопределённости.
Правильный сценарий выглядит так:
- Мгновенная реакция на клик. Кнопка меняет состояние — например, показывает индикатор загрузки, — чтобы пользователь видел: форма обрабатывается.
- Понятное сообщение об успехе. После отправки показывается текст или отдельный экран: «Заявка отправлена, мы свяжемся с вами в течение рабочего дня» — конкретно, без общих фраз.
- Явная обработка ошибок. Если поле заполнено неверно — например, в номере телефона не хватает цифр, — ошибка показывается рядом с конкретным полем, а не общей надписью наверху страницы.
- Сохранение введённых данных при ошибке. Если форма не отправилась из-за одного неверного поля, остальные заполненные поля не должны обнуляться — иначе пользователь начнёт заполнять всё заново и, скорее всего, просто закроет вкладку.
Форма на мобильном устройстве
Больше половины обращений на многих сайтах сейчас приходит с телефонов, и форма, удобная на широком экране, может быть неудобной в вертикальной ориентации на маленьком дисплее. Несколько вещей стоит проверить отдельно на мобильной версии.
| Параметр | Что проверить |
|---|---|
| Тип клавиатуры | Для поля телефона должна открываться цифровая клавиатура, для email — с символом «собаки», а не обычная буквенная |
| Размер полей и кнопки | Высота поля и кнопки не менее сорока четырёх пикселей — иначе легко промахнуться пальцем |
| Масштаб при фокусе | При нажатии на поле страница не должна произвольно увеличиваться — это сбивает и раздражает |
| Расположение кнопки | Кнопка отправки должна быть видна без лишней прокрутки после заполнения последнего поля |
Доверие рядом с формой
Рядом с формой полезно коротко напомнить, что будет с данными и когда ждать ответа: «Отвечаем в течение рабочего дня», «Не передаём данные третьим лицам». Это не юридическая формальность, а простой способ снять тревогу: люди неохотно оставляют телефон на незнакомом сайте, если не понимают, что дальше будет с этим номером. Подробно про обязанности владельца сайта в части персональных данных мы разбирали отдельно — это тоже стоит привести в порядок, прежде чем собирать заявки на новом сайте.
Хорошо работает и указание способа связи: если рядом с формой стоит номер телефона и мессенджеры, часть посетителей вообще не станет заполнять форму, а напишет напрямую — и это тоже конверсия, просто другим путём. Разным людям удобны разные каналы, и жёстко ограничивать посетителя только формой — значит терять часть обращений.
Форма на странице услуги и в квизе
Отдельный вариант формы — встроенная в квиз, то есть в короткий опрос из нескольких простых вопросов вместо одной длинной формы. Такой подход разбивает сбор информации на маленькие шаги, каждый из которых требует минимум усилия, и часто повышает вовлечённость именно за счёт ощущения прогресса. Мы отдельно писали о том, когда квизы на сайте оправданы, а когда усложняют путь клиента без пользы.
Если вы делаете форму на странице конкретной услуги — например, страницы про интернет-магазин или корпоративный сайт — имеет смысл слегка адаптировать текст формы под контекст: не общее «Оставить заявку», а «Рассчитать стоимость интернет-магазина». Это повышает релевантность и доверие: человек видит, что форма именно про его задачу, а не универсальная заглушка.
Что мы делаем на практике
Когда мы проектируем формы для сайтов клиентов, мы всегда начинаем с вопроса «что менеджер реально делает с этой заявкой дальше» — и от ответа выстраиваем набор полей. Если менеджер всё равно перезванивает и уточняет детали голосом, форме не нужно вытягивать эти детали заранее. Формы тестируются на телефоне в первую очередь, а уже потом проверяются на десктопе — потому что именно мобильный сценарий чаще всего оказывается узким местом.
Минимум полей
Оставляем только то, без чего заявку нельзя обработать: имя и один контакт. Остальное — по желанию клиента.
Понятная кнопка
Формулировка описывает результат: «Получить расчёт» вместо безликого «Отправить».
Видимая реакция
После отправки посетитель сразу видит подтверждение и понимает, когда ждать ответа.
Итог
Форма заявки заполняется тогда, когда она не требует лишних усилий, честно объясняет, что произойдёт дальше, и одинаково хорошо работает на телефоне и на компьютере. Это не разовая настройка, а часть общего дизайна сайта — наравне с первым экраном и структурой страниц. Если вы подозреваете, что форма на вашем сайте теряет часть обращений, мы можем провести её аудит вместе с остальным сайтом в рамках услуги аудита сайта или доработать конкретно форму в рамках доработки сайта. Обсудить задачу можно через страницу контактов.
