Многошаговая форма заявки: разбивка по шагам, индикатор прогресса и рост конверсии
1. Логика конверсии многошаговой формы: почему после разбивки заполняют чаще
Большинство думает: чем короче форма, тем выше конверсия. Для одностраничной формы это верно — при росте с 3 до 10 полей конверсия действительно падает. Но после 8 полей закон меняется: 10 полей в 3 шага дают в 2–3 раза больше заполнений, чем на одной странице. Причина не в том, что полей стало меньше, а в том, что изменилась психологическая нагрузка.
Когда пользователь видит одностраничную длинную форму, перед ним сразу целый экран полей — давление максимальное, многие закрывают страницу, даже не начав. Многошаговая форма показывает всего два-три поля, и давление намного меньше. Нажать «Далее» психологически легче, чем «Отправить»: «Далее» — это движение вперёд, «Отправить» — это обязательство. Сделав первый шаг, человек с большей вероятностью дойдёт до конца.
| Тип формы | Всего полей | Доля заполнения | Отказы | Когда подходит |
|---|---|---|---|---|
| Короткая одностраничная | 3–5 | 55–70% | 30–45% | Быстрый запрос цены, скачивание материалов |
| Длинная одностраничная | 8–12 | 15–25% | 75–85% | Не рекомендуется, тратит трафик |
| Многошаговая, 3 шага | 8–10 | 40–55% | 45–60% | Оптимальный вариант для стандартной заявки |
| Многошаговая, 4 шага | 10–14 | 35–50% | 50–65% | Сложные запросы, заявки крупных клиентов |
| Многошаговая, 5+ шагов | Больше 15 | 25–35% | 65–75% | Только для сценариев с очень высокой заинтересованностью |
Таблица основана на практических данных B2B-сайтов. Ключевой перелом — 8 полей: до 8 хватает одной страницы, после 8 выгода от разбивки превышает затраты. Общую логику работы с полями формы смотрите в Проектирование полей формы заявки и конверсия, сначала определите, какие поля собирать, а потом решайте, как разбить на шаги.
2. Разбивка по шагам: как группировать и в каком порядке
Группируйте поля не по типу, а по психологической сложности. Самое простое — на первый шаг, самое трудное — в середину, то, что требует уточнения, — в конец. Как только человек начал заполнять, он уже вложился и идёт дальше: первый шаг даётся легко, на середине уже половина позади, а в конце жаль потраченного времени.
Стандартную B2B-форму запроса можно разбить так: шаг 1 — основная информация (имя, email, компания, 3 поля), шаг 2 — детали запроса (модель продукта, количество, назначение, 3–4 поля), шаг 3 — дополнительная информация (телефон, часовой пояс, бюджет, 2–3 поля), шаг 4 — проверка и отправка. Всего около 10 полей, но каждый шаг выглядит лёгким.
| Шаг | Содержание | Число полей | Психологическая сложность | Что важно |
|---|---|---|---|---|
| Шаг 1 | Основное: имя, email, компания | 2–3 | Минимальная | Быстро ввести в процесс |
| Шаг 2 | Детали запроса: продукт, количество, назначение | 3–4 | Максимальная | Ключевая информация, самый сложный шаг |
| Шаг 3 | Дополнительно: телефон, часовой пояс, бюджет | 2–3 | Средняя | Сюда же необязательные поля |
| Шаг 4 | Проверка и отправка: сводка и кнопка | 0 новых полей | Низкая | Дать проверить перед отправкой |
Держите 2–4 поля на шаг. Меньше — шагов слишком много, больше — снова длинная форма на одной странице. 3 поля на шаг — золотая середина. Как тестировать форму A/B, читайте A/B-тест формы, а количество шагов — сам по себе переменная, которую стоит тестировать.
III. Индикатор прогресса: покажите, сколько осталось
Многошаговой форме нужен индикатор прогресса, иначе человек не понимает, сколько уже прошёл. Без него доля отказов выше на 30% и больше — кажется, что заполнять придётся бесконечно. В индикаторе важны две вещи: показывать конкретные шаги, а не только полосу, и давать полосе визуальную динамику.
Лучше всего работает связка «текст + полоса»: сверху «Шаг 2 из 4», ниже полоса, заполненная наполовину. Одна полоса слабее текста с полосой, потому что человеку нужны цифры, чтобы понять, сколько осталось. И «Шаг 2» без «из 4» тоже не годится: непонятно, где финиш.
| Тип индикатора | Доля заполнения | Как воспринимает пользователь | Рекомендация |
|---|---|---|---|
| Без индикатора | База, 100% | Непонятно, сколько ещё шагов | Не рекомендуется |
| Только полоса | 110–115% | Что-то видно, но цифр нет | Запасной вариант |
| Только текст «Шаг X» | 115–120% | Понятен текущий шаг, неясно общее число | Слабо |
| Текст + полоса «Шаг X из Y» | 125–140% | Ясно видно и прогресс, и финиш | Основной вариант |
| Заголовок шага + полоса | 130–150% | Понятно, что делается на каждом шаге | Продвинутый вариант |
В индикаторе прогресса есть ещё одна деталь — кнопка «Назад». На каждом шаге должна быть кнопка «Назад», чтобы пользователь мог вернуться и исправить. Если кнопки «Назад» нет, при ошибке остаётся только бросить форму и начать заново — конверсия в заполнение резко падает. Кнопка «Назад» не должна сбрасывать уже введённые данные. Об интеграции форм с CRM читайте Лиды с сайта в CRM.
4. Оптимизация конверсии: сокращаем отвал на каждом шаге
В многошаговой форме отвал накапливается шаг за шагом. Оптимизировать конверсию — значит не улучшать какой-то один шаг, а найти шаг с самым высоким отвалом и целенаправленно его исправить. Как правило, самый высокий отвал — на втором шаге (детали запроса), потому что там больше всего полей и их сложнее заполнять.
Несколько приёмов с быстрым результатом: на первом шаге оставьте только обязательные поля, необязательные перенесите дальше; после каждого шага сохраняйте данные автоматически, чтобы при закрытии страницы можно было продолжить с того же места; поле бюджета сделайте необязательным и добавьте слайдер; на последнем шаге выведите на странице подтверждения все введённые данные. О надёжности форм читайте Надёжность форм заявок и антиспам-доставка.
| Приём | Ожидаемый рост конверсии | Сложность внедрения | Применим к шагам |
|---|---|---|---|
| На первом шаге только обязательные поля | Рост на 10–15% | Низкая | Шаг 1 |
| Автосохранение черновика с возможностью восстановления | Рост на 8–12% | Средний | Все шаги |
| Поле бюджета — слайдер, необязательное | Рост на 5–8% | Низкая | Шаг 3 |
| Сводка на странице подтверждения | Рост на 5–10% | Низкая | Шаг 4 |
| Оценка оставшегося времени на каждом шаге | Рост на 3–6% | Средний | Все шаги |
5. Частые ошибки и красные линии
| Заблуждение | Что делают | Что получают | Правильный подход |
|---|---|---|---|
| Дробить на шаги, даже когда полей мало | 5 полей разбиты на 3 шага | Затраты на переходы выше выгоды от дробления | До 7 полей — одна страница |
| Самый сложный вопрос — на первом шаге | Детали запроса вынесены на первый шаг | Отвал на первом шаге сразу зашкаливает | Сначала простое, сложное — в середине |
| Нет кнопки «Назад» | Только вперёд, назад нельзя | При ошибке остаётся только начать заново | На каждом шаге есть кнопка «Назад» |
| В индикаторе прогресса только «В процессе» | Нет номера шага и прогресса | Пользователь не знает, сколько ещё осталось | «Шаг X из Y» + полоса прогресса |
| Слишком много полей на каждом шаге | На каждом шаге 5 и больше полей | Дробление ради дробления, толку ноль | 2–4 поля на каждом шаге |
| На последнем шаге всё заполняют заново | На странице подтверждения просят ввести данные ещё раз | Пользователь считает это пустой тратой времени и закрывает | Страница подтверждения — только для чтения плюс кнопка отправки |
Из этих шести ошибок чаще всего встречается первая: многие узнают, что «многошаговые формы работают лучше», и дробят на шаги независимо от числа полей. В итоге 5 полей разбиты на 3 шага, и заполнять хуже, чем на одной странице. Дробить имеет смысл, только если полей действительно много (8 и больше), иначе конверсия одностраничной формы будет выше.
FAQ: частые вопросы
При каком числе полей форму нужно разбивать на шаги?
Как лучше разбить многошаговую форму на группы?
Как лучше показать прогресс в многошаговой форме?
Что делать, если пользователь закрыл страницу на середине?
Нужна ли в многошаговой форме кнопка «Назад»?
Что лучше: многошаговая форма или одностраничная?
В заключение
Многошаговые формы кажутся вопросом фронтенд-взаимодействия, но на самом деле это рычаг психологии для повышения конверсии формы. Суть не в том, чтобы удлинить форму, а в том, чтобы разбить длинную форму на короткие задачи в восприятии пользователя. На каждом шаге всего два-три поля, каждое нажатие «Далее» даёт ощущение прогресса — и пользователь с большей вероятностью дойдёт до конца. Контринтуитивный вывод: многошаговая форма с большим общим числом полей даёт более высокую конверсию, чем одностраничная форма с меньшим числом полей.
Три шага внедрения: сначала посчитайте, сколько полей в форме — меньше 7 не трогайте, больше 8 стоит разбить; при разбивке сортируйте от простого к сложному, самое сложное ставьте в середину; затем добавьте индикатор прогресса «Шаг X из Y» и кнопку «Назад» на каждом шаге. После этого проведите A/B-тест на две недели и сравните конверсию одностраничной и многошаговой версий.
Фраза, которую стоит запомнить: многошаговая форма — это не просто «разбить длинную форму на части», а «разбить одну большую гору на несколько ступеней» — каждая ступень настолько низкая, что не требует усилий, и только тогда пользователь готов идти шаг за шагом до конца, а не развернуться и уйти, стоя у подножия.