Разработка форм: лучшие практики для повышения конверсии

Обновлено 19 октября 2026 г.

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

Суммируя: разработка формы, обеспечивающая конверсию, основана на пяти лучших практиках: одна колонка с видимыми метками над полями, мобильная клавиатура, адаптированная для каждого типа данных, короткие шаги с видимым прогрессом, достаточный контраст (4,5:1 для текста, 3:1 для границ полей) и кнопка, четко указывающая на результат пользователя. Эти настройки недороги в реализации и устраняют препятствия, приводящие к отказу от заполнения на мобильных устройствах.

Прежде чем мы перейдем к деталям, одно уточнение: эта статья посвящена не длине ваших форм, а их формату. А в конце вы найдете контрольный список из 12 пунктов, который поможет вам проверить свою форму всего за десять минут.

Макет: одна колонка, подписи над полями

Наиболее эффективная компоновка формы для генерации лидов — это один столбец, где каждая метка располагается над соответствующим полем. Взгляд следует по прямой линии, без необходимости зигзагообразно перемещаться между столбцами или искать, какая метка соответствует какому полю.

Цифры это подтверждают контролируемое исследование, проведенное Институтом CXL (ныне Speero) с участием 702 человек, одноколоночная версия теста заполнялась в среднем за 102,3 секунды, по сравнению со 117,8 секундами для многоколоночной версии. Это означает экономию времени примерно на 13%, при этом вопросы были абсолютно идентичны.

Важное уточнение: в этом исследовании измерялось только время, затраченное теми, кто заполнил анкету. Оно ничего не говорит о тех, кто отказался от участия. Но анкета, которую легче прочитать, редко отбивает желание у людей.

Заполнитель, плавающая метка или фиксированная метка?

Наиболее безопасным вариантом остается фиксированная метка, всегда видимая над полем ввода. Пример текста, помещенный в поле (заполнитель), исчезает сразу после первого нажатия клавиши: пользователь, проверяющий свой ввод, больше не понимает, что от него требовалось.

Плавающие метки, популяризированные Material Design, решают лишь часть проблемы. Метка уменьшается, чтобы поместиться в поле, длинный заголовок оказывается обрезанным, а контрастность уменьшенного текста часто оказывается слишком низкой. Используйте заполнитель только для примера форматирования ("06 12 34 56 78"), никогда не в качестве единственной метки.

Допускаются два исключения

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

Мобильная версия: Отображайте соответствующую раскладку клавиатуры для каждого поля

Каждое поле должно активировать соответствующую клавиатуру для ввода данных: цифровую клавиатуру для почтового индекса, телефонную клавиатуру для номера телефона и клавиатуру с символом «@» для адреса электронной почты. Эта деталь HTML-кода избавляет пользователя от необходимости вручную переключаться между клавиатурами для каждого поля.

Эта деталь часто плохо реализована, даже на крупных объектах. Аудит сенсорных клавиатур, проведенный Институтом Baymard, показал, что На 54% крупных американских сайтов электронной коммерции не отображалась оптимизированная клавиатура что касается полей номера телефона, почтового индекса или номера кредитной карты, 79% пользователей оставили автокоррекцию включенной, что приводит к искажению введенных данных. Адрес электронной почты, «исправленный» по номеру телефона, — это потерянный потенциальный клиент.

Вот настройки, которые следует применить к наиболее часто используемым полям во французской форме для сбора контактных данных потенциальных клиентов:

Избегать type='number' для почтового индекса или номера SIRET: это добавляет ненужные стрелки приращения в компьютер и может удалить начальный ноль из почтового индекса, например, 01000.

Ловушка для увеличения изображения на iPhone

На iOS Safari автоматически увеличивает масштаб полей с текстом размером менее 16 пикселей. Страница сдвигается, кнопка выходит за пределы экрана, и пользователю приходится уменьшать масштаб вручную. Установите размер шрифта для полей не менее 16 пикселей: проблема исчезнет.

Также учитывайте области касания. Кнопку-переключатель размером 16 пикселей сложно прикоснуться большим пальцем; стремитесь к тому, чтобы области, по которым можно нажать, были размером не менее 44 × 44 пикселей, чтобы кликабельной была вся строка с вариантом выбора, а не только точка.

Автофокус и автозаполнение: помощь без принуждения

Автозаполнение в браузере экономит драгоценные секунды; автофокус, с другой стороны, чаще мешает, чем помогает. Это две похожие настройки с противоположными эффектами.

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

Функция автофокусировки, которая автоматически устанавливает курсор в первое поле при загрузке, создает ряд проблем. Британский дизайнер Адам Сильвер выделяет пять из них: неожиданные разрывы страниц, заблокированная прокрутка с клавиатуры, недоступные сочетания клавиш браузера, программа чтения с экрана, озвучивающая метку поля вместо заголовка страницы, и, на Android, поле, активируемое без открытия клавиатуры.

Наша рекомендация проста. Не устанавливайте автоматическую фокусировку на страницу, содержащую что-либо, кроме формы (вводный текст, аргументы, отзывы клиентов). Однако на многошаговой форме полезно переместить фокус на заголовок следующего шага: человек, использующий клавиатуру или программу чтения с экрана, сразу поймет, где он находится.

Разбейте на этапы, не теряя при этом читателя

Многоэтапная форма обеспечивает более высокую конверсию, если на каждом экране задается всего один или два вопроса, отслеживается прогресс, а первый вопрос требует минимальных усилий. Разбиение формы на этапы — не панацея: плохо спроектированная форма увеличивает количество кликов, не снижая при этом трудозатраты.

Три правила проектирования имеют решающее значение:

• Начните с простого и интересного вопроса : тип проекта или потребности представлен в виде больших интерактивных карточек. Контактные данные добавляются в последнюю очередь, после того, как пользователь уже потратил некоторое время.
• Покажите честный прогресс «Шаг 2 из 4» лучше, чем полоса прогресса, которая быстро движется в начале, а затем застаивается.
• Автоматически перейти к следующему экрану после выбора одного варианта (переключатель), но никогда после ввода текста, где пользователь должен сохранять контроль.

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

Такое разделение можно выполнить без участия разработчика возможностей Blastform : шаги, визуальные карты, индикатор выполнения и условия отображения настраиваются в редакторе.

Цвета, контраст и доступность

Доступная форма — это также форма, которая лучше конвертируется: согласно критериям WCAG 1.4.3 и 1.4.11, контраст текста с фоном должен составлять не менее 4,5:1, а границы полей — не менее 3:1. Этот второй критерий чаще всего игнорируется.

Современные тенденции в графическом дизайне отдают предпочтение очень светлым серым полям на белом фоне без видимой рамки. В результате на экране телефона при ярком солнечном свете пользователю становится трудно определить, куда нужно нажать. Серая рамка, как на изображении #767676 на белом фоне, проходит проверку; а вот очень распространенное изображение #E0E0E0 значительно не дотягивает.

Ещё три рефлекса, которые стоит выработать:

• Никогда не указывайте на ошибку только цветом. Красной рамки недостаточно для примерно 8% мужчин, страдающих нарушениями цветового зрения: добавьте значок и текстовое сообщение.
• Свяжите каждую метку с соответствующим полем (ярлык label с атрибутом for): Нажатие на метку активирует поле, и программа чтения с экрана зачитывает правильный вопрос.
• Индикатор фокусировки должен оставаться видимым. Удаление стандартной синей обводки без ее замены делает форму непригодной для использования с клавиатурой.

Речь идёт уже не просто об удобстве. С 28 июня 2025 года Европейский закон о доступности установил требования доступности для многих общедоступных онлайн-сервисов в Европейском Союзе, включая электронную коммерцию и банковские услуги. Соответствующая требованиям форма избавит вас от необходимости переделывать её позже.

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

Микрокопирование и сообщения об ошибках

Микротекст — это небольшой текст, окружающий поля ввода: метки, справочный текст, сообщения об ошибках. Хорошо написанный текст устраняет возражение до того, как оно заблокирует пользователя. Плохо написанный текст превращает простую опечатку в отказ от использования сайта.

Отмечайте необязательные поля, а не обязательные

Красная звездочка — это укоренившийся рефлекс, но многие пользователи её не замечают или не понимают её значения. Рекомендация нескольких UX-специалистов прямо противоположна: исходите из того, что всё является обязательным, и добавляйте "(необязательно)" только к тем полям, которые таковыми не являются. Если у вас много необязательных полей, подумайте об их полезности.

Проведите проверку в нужное время

Согласно данным Института Бэймард, 31% протестированных сайтов не имеют онлайн-проверки заполненных полей, а у некоторых пользователей ошибка срабатывает слишком рано. Отображение сообщения «неверный адрес электронной почты», когда пользователь ввел всего три буквы, вызывает разочарование. Правильный момент: когда пользователь покидает поле ввода. И как только он исправит ошибку, сообщение об ошибке должно исчезнуть по мере ввода, не дожидаясь перехода к другому полю.

Записывайте ошибки, которые помогают

Сравните сообщения «Неверный формат» и «Число должно содержать 10 цифр, например, 06 12 34 56 78». Второе сообщение указывает, что нужно делать. Разместите сообщение непосредственно под соответствующим полем, никогда не только вверху формы, и сохраните все данные, введенные после ошибки.

Успокаивает в случае возникновения проблемы

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

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

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

Unbounce сообщает о нескольких случаях, когда всего одно слово изменило результат. На портале по аренде офисных помещений для бизнеса замена слова «Заказать» на «Получить» в кнопке увеличила конверсию на 38% : в конечном итоге глагол говорил о том, что человек получает, а не о том, что он должен делать.

С точки зрения дизайна, важны четыре параметра:

• Полная ширина на мобильных устройствах, чтобы большой палец мог дотянуться до него, не целясь.
• Цвет, контрастирующий с остальной частью страницы. «Лучшего цвета» не существует: важен контраст с окружающей средой, а не красный или зеленый как таковой.
• Никогда не отключался и не был выделен серым цветом пока форма не заполнена полностью, пользователь не понимает, чего в ней не хватает. Пусть он сам нажимает на нужные поля и указывает, что именно нужно заполнить.
• Состояние загрузки после нажатия кнопки («Отправка в процессе…»), чтобы избежать двойной отправки и дублирования лидов в вашей CRM-системе.

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

Лучшие практики проектирования форм: сетка аудита за 10 минут

Вот обещанная в начале статьи таблица. Возьмите свой телефон, откройте форму в режиме приватного просмотра и отметьте каждый пункт. Каждое «нет» обозначает препятствие, которое вы можете устранить на этой неделе.

1. На мобильных устройствах форма помещается в одну колонку.
2. Над каждым полем отображается подпись, которая остается видимой во время ввода данных.
3. В поле электронной почты открывается клавиатура с символом "@", при этом заглавные буквы не используются.
4. Поля для ввода номера телефона и почтового индекса открывают клавиатуру.
5. При касании поля страница не масштабируется (минимальный размер шрифта 16 пикселей).
6. Браузер предлагает автоматически заполнить поля «имя», «адрес электронной почты» и «номер телефона».
7. При загрузке страницы ни одно поле не получает автоматический фокус.
8. В многоэтапной форме отображается ход выполнения («Шаг X из Y»).
9. Края полей остаются хорошо видны при максимальном освещении на открытом воздухе.
10. В случае преднамеренной ошибки (например, в электронном письме без символа @) под полем отображается четкое сообщение, а не просто красная рамка.
11. Кнопка описывает предоставляемую выгоду («Получить…», «Получить…») и занимает всю ширину экрана.
12. После нажатия отображается статус загрузки, а затем подтверждение очистки.

Оценка 10 из 12 или выше означает, что дизайн, вероятно, не является вашей главной проблемой. При оценке ниже 8 начните с пунктов 3, 4 и 5: их проще всего исправить, и все они влияют на пользователей мобильных устройств.

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

Часто задаваемые вопросы

Можно ли заменить подписи в полях примером текста?

Нет. Пример текста (заполнитель) исчезает сразу после первого нажатия клавиши, не позволяя пользователю проверить введенные данные, а его светло-серый цвет часто обеспечивает недостаточный контраст. Разместите видимую подпись над полем, а заполнитель используйте только в качестве примера форматирования.

Действительно ли двухколоночная форма менее эффективна?

В большинстве случаев — да. Исследование CXL с участием 702 человек показало, что скорость заполнения одноколоночных полей увеличилась на 13%. Единственными разумными исключениями являются связанные пары полей, такие как почтовый индекс и город, и только на компьютерах.

Следует ли активировать автофокус на первом поле?

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

Какой цвет лучше всего подходит для кнопки формы?

Универсального правила нет. Важно контраст кнопки с остальной частью страницы и читаемость текста (минимум 4,5:1). Оранжевая кнопка на оранжевом сайте менее заметна, чем синяя кнопка на том же сайте.

Всегда ли многоэтапная форма обеспечивает более высокую конверсию?

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

Вы хотите применить эти лучшие практики, не касаясь кода? Попробуйте Blastform бесплатно или заказать демонстрацию чтобы обсудить вашу текущую форму с нашей командой.