Многошаговая форма

Что такое многошаговая форма

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

Другие названия этого подхода: пошаговая форма, многостраничная форма и multi-step form. Отдельный шаг не обязательно открывает новый адрес сайта. Конструктор может менять содержимое внутри одного блока, сохраняя ту же страницу браузера. Для читателя важнее порядок вопросов и возможность исправить ответ, чем технический способ переключения экранов.

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

Пример: заявка на корпоративное обучение

Представим вымышленную заявку для компании, которая проводит обучение сотрудников. Чтобы обсудить программу, ей нужны тема, размер группы, формат занятий и контакт заказчика. В нашем примере девять полей объединены в три смысловые группы. Это учебная схема, не история реального клиента и не готовый шаблон stepFORM.

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

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

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

Как устроены переходы и возврат

Для последовательной формы маршрут заранее известен: задача, организация, контакты. Кнопка «Назад» нужна, если человек заметил ошибку или передумал. Без возврата ему остаётся искать обходной путь: закрыть форму, начать заново или написать пояснение в неподходящем поле, хотя исправить требовалось всего одну дату на втором шаге.

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

Для учебной заявки попробуйте пройти до контактов, вернуться к организации и заменить дату. После перехода вперёд проверьте остальные поля, а если сделали сводку, и новое значение в ней. Завершите тест отправкой и посмотрите полученный ответ. Красивый экран с исправленной датой ещё не доказывает, что компания получила именно её.

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

Что показывает индикатор прогресса

Надпись «Шаг 2 из 3: организация» сообщает, где человек находится и какой этап впереди. Названия «Задача», «Организация», «Контакты» описывают содержание лучше, чем одни номера. Для длинного сценария такую структуру стоит показать до начала заполнения.

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

В форме с ветвлением разные ответы могут вести к разному числу этапов. Тогда проверьте, не скачет ли индикатор и не показывает ли уже завершённым то, что ещё предстоит. Само наличие полосы прогресса не решает эту задачу. Её подпись должна соответствовать тому маршруту, который проходит человек.

Переход, черновик и отправленная заявка

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

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

Если форма позволяет продолжить позже, объясните человеку, как вернуться: по отдельной ссылке, после входа или только в том же браузере. При отсутствии такой функции не используйте подпись «Всё сохранено». После закрытия вкладки человек может обнаружить, что ответов больше нет.

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

Когда несколько шагов оправданы

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

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

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

Чем отличается от квиза и ветвления

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

Многошаговые формы в stepFORM

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

Запись ответа описана отдельно в документации получения ответов и связана с отправкой формы. Из описания страниц нельзя вывести обещание восстановления незавершённой заявки после закрытия браузера. Для конкретной формы проверьте возврат, ошибки и тестовый ответ.

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

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

Сколько шагов должно быть в форме?

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

Один вопрос на экран и многошаговая форма означают одно и то же?

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

Можно ли обойтись без полосы прогресса?

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

Обязателен ли отдельный экран проверки перед отправкой?

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

Нужно ли спрашивать контакты только в конце?

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

Материалы по теме

• Страницы и переключение шагов в stepFORM: устройство многостраничного ввода.
• Форма, квиз или калькулятор: выбор сценария под задачу сайта.