Как сделать форму в несколько шагов — чтобы её дозаполняли до конца

Форма на двенадцать полей выглядит как работа. Человек видит стену, прикидывает, сколько это займёт, и закрывает вкладку — ещё до того, как понял, что половина полей заполнится за секунду.

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

Шаг 1. Режь по смыслу, а не пополам

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

Объединять поля можно, когда человек воспринимает их как одну вещь: адрес — это одна мысль, хоть и четыре поля. «Телефон и любимый цвет» — две.

Практическое следствие: заголовок экрана — это и есть вопрос. «Куда доставить заказ?» лучше, чем «Шаг 2. Данные».

Шаг 2. Собери ответы в одно место

Главная техническая ошибка новичка — хранить ответы в самих полях. Поля живут ровно до перерисовки экрана.

Держи один объект и клади ответы туда:

const answers = {};

function saveStep(form) {
  const data = new FormData(form);
  for (const [key, value] of data.entries()) {
    answers[key] = value;
  }
}

Если пишешь на React, это то же самое: один объект состояния на всю форму, а не отдельный стейт внутри каждого шага.

И сразу продублируй в localStorage — одна строчка спасёт человека, который случайно закрыл вкладку:

localStorage.setItem("draft", JSON.stringify(answers));

Шаг 3. Покажи, где человек находится

«Шаг 2 из 4» снимает главную тревогу длинной формы: сколько ещё осталось. Пиши текстом, рядом с заголовком.

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

Шаг 4. Сделай «Назад» настоящим

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

Что нужно сделать:

• Кнопка «Назад» вверху экрана — GOV.UK держит её именно там, потому что часть людей не доверяет кнопке браузера, когда вводит данные.
• Кнопку браузера при этом не ломать: она должна вести на предыдущий экран в том виде, в каком человек его оставил.
• Возвращаясь на шаг, подставляй сохранённые ответы в поля — они у тебя уже лежат в объекте из шага 2.

function fillStep(form) {
  for (const field of form.elements) {
    if (answers[field.name] !== undefined) field.value = answers[field.name];
  }
}

Шаг 5. Проверяй на переходе, а не на каждый символ

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

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

Шаг 6. Предпоследний экран — «Проверьте ответы»

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

И защити отправку от двойного клика — заблокируй кнопку сразу после нажатия:

submitButton.disabled = true;

Что получится

Форма, где на экране два-три поля и понятный вопрос; где «Назад» возвращает заполненное, а не пустое; где перед отправкой видно всё разом. Данные при этом уходят одним запросом в конце — сервер получает целый набор, а не четыре куска, которые надо склеивать.

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

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

Сколько шагов нормально?

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

Надо ли сохранять ответы на сервере между шагами?

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