Чтобы введённые данные не исчезали при переходе между этапами, храните их в едином состоянии формы и обновляйте его при каждом изменении. Выберите временное хранилище в браузере или на сервере с учётом чувствительности данных, срока восстановления и устройства пользователя. Перед отправкой проверяйте форму целиком, а после успешной отправки очищайте черновик.
Что предусмотреть до сборки многошаговой формы
- Определите, какие поля обязательны и на каком этапе они проверяются.
- Решите, нужно ли восстанавливать черновик после перезагрузки или на другом устройстве.
- Выберите способ хранения с учётом чувствительности данных и срока их сохранения.
- Продумайте возврат на предыдущий этап и поведение при ошибке отправки.
- Заранее предусмотрите очистку временных данных после отправки или окончания срока хранения.
Определите, где хранить данные между шагами
Хранение в состоянии приложения или в памяти страницы подходит, если пользователь проходит форму за один сеанс и восстановление после закрытия вкладки не требуется. Для черновика на одном устройстве можно рассмотреть sessionStorage или localStorage, предварительно оценив чувствительность полей. Если данные должны переживать смену устройства, браузера или длительный перерыв, обычно требуется серверное сохранение с привязкой к сессии или учётной записи.
Не сохраняйте на клиенте в открытом виде сведения, утечка которых может навредить пользователю: например, пароли, платёжные данные или документы. Не стоит усложнять короткую форму временным сохранением, если этапов мало, а потеря введённого при переходе исключена архитектурой страницы. При создании многошаговой формы на сайте сначала определите сценарий восстановления, а затем подбирайте инструмент.
Соберите единое состояние формы и задайте правила обновления
До реализации согласуйте схему полей: названия, типы значений, обязательность, правила проверки и этап, которому принадлежит каждое поле. Для разработки веб-формы с сохранением данных понадобятся доступ к коду или настройкам конструктора, место для хранения черновика, механизм валидации и понятный способ сообщать пользователю об ошибках.
Состояние формы должно быть общим для всех этапов: переход между экранами не должен создавать новую независимую копию данных. Установите единые правила обновления - сохраняйте изменения по мере ввода или при переходе дальше, а при возврате показывайте ранее введённые значения. Если используется сервер, предусмотрите идентификатор черновика и проверку доступа к нему.
Настройте переходы без потери введённых значений
Перед пошаговой настройкой проверьте подготовку:
- Составлен список этапов и полей.
- Выбран способ временного хранения.
- Определены правила проверки данных и обработки ошибок.
- Установлены условия восстановления и удаления черновика.
- Создайте общую модель данных. Задайте единое хранилище значений для всех этапов, например объект с отдельными полями для контактов, адреса и параметров заявки. Не связывайте данные только с видимыми элементами текущего шага.
- Обновляйте состояние при изменении полей. При вводе, выборе или снятии отметки обновляйте соответствующее значение в общей модели. Для текстовых полей можно сохранять изменения при вводе или после короткой паузы, чтобы не записывать лишние промежуточные состояния.
- Сохраняйте черновик в выбранное хранилище. Для краткого сценария можно оставить состояние в памяти приложения; для восстановления после перезагрузки применяйте подходящее браузерное или серверное хранилище. Записывайте только необходимые поля и не включайте в черновик секретные значения.
- Проверяйте текущий этап перед переходом. При нажатии "Далее" валидируйте поля этого этапа. Если есть ошибка, оставьте пользователя на текущем экране, покажите сообщение рядом с полем и сохраните уже введённые значения.
- Восстанавливайте этап и значения. При открытии формы загрузите доступный черновик, проверьте его актуальность и заполните поля. При возврате назад отобразите ранее сохранённые данные, не сбрасывая состояние следующих этапов.
- Отправляйте собранные данные и очищайте черновик. Перед отправкой выполните итоговую проверку всей формы. Удаляйте временную копию только после подтверждённого успеха; если запрос завершился ошибкой, оставьте данные доступными для повторной попытки.
Если используется конструктор многошаговых форм, проверьте, поддерживает ли он общий набор полей, автосохранение и восстановление после перезагрузки: наличие нескольких экранов само по себе этого не гарантирует.
Проверьте восстановление данных после перезагрузки и возврата назад
- Заполните часть полей и перейдите на следующий этап: введённые значения должны сохраниться.
- Вернитесь назад и убедитесь, что поля отображаются без изменений.
- Обновите страницу и проверьте восстановление, если оно предусмотрено сценарием.
- Откройте форму в новой вкладке или с другого устройства, если черновик должен синхронизироваться.
- Проверьте, что просроченный или повреждённый черновик не мешает начать новую заявку.
- Убедитесь, что ошибки валидации не очищают другие поля и не переводят пользователя на неверный этап.
- Отправьте форму успешно и проверьте, что черновик удалён, а повторная отправка не создаёт дубль без необходимости.
Защитите персональные данные при временном сохранении
При временном хранении чаще всего допускают такие ошибки:
- Сохраняют в браузере данные, которые должны обрабатываться только на сервере.
- Оставляют черновик без срока действия и не удаляют его после завершения сценария.
- Хранят данные на сервере без проверки, что пользователь имеет право получить именно этот черновик.
- Передают значения черновика через адресную строку или другие легко доступные каналы.
- Записывают в журналы запросов содержимое полей, токены или иные чувствительные сведения.
- Не сообщают пользователю, что данные сохраняются, и как начать форму заново.
- Считают шифрование или доступность сайта по HTTPS заменой ограничения доступа и минимизации данных.
Для создания формы заявки для сайта сохраняйте только сведения, необходимые для обработки обращения. Определите срок хранения, ограничьте доступ к черновикам и предусмотрите их удаление. При обработке персональных данных учитывайте применимые требования законодательства и внутренние правила проекта.
Протестируйте ошибки, пропуски шагов и отправку формы
- Автосохранение в браузере. Уместно для восстановления на том же устройстве, если поля не содержат чувствительных сведений и пользователь должен продолжить после обновления страницы.
- Сохранение черновика на сервере. Подходит, когда нужно восстановление после длительного перерыва или на другом устройстве; необходимы контроль доступа, срок хранения и защищённое взаимодействие с сервером.
- Сохранение только в памяти страницы. Подходит для короткой формы без восстановления после перезагрузки. Проверьте, что переходы между этапами не размонтируют общий компонент состояния.
Проверьте также повторную отправку после сетевой ошибки, попытку перейти дальше с незаполненным обязательным полем и переход по прямой ссылке на поздний этап. Автоматизация сбора заявок через формы должна учитывать не только успешный сценарий, но и безопасное восстановление после сбоев.
Нюансы сохранения данных в многошаговых формах
Как сохранить значения при переходе на следующий этап?
Храните поля всех этапов в общем состоянии и обновляйте его при изменении значений. Перед переходом проверяйте текущий этап, не удаляя введённые данные при ошибке.
Нужно ли сохранять каждое изменение в браузере?
Не всегда: для короткой формы может быть достаточно общего состояния в памяти страницы. Сохранение в браузерное хранилище оправдано, если требуется восстановление после перезагрузки, но тип данных и срок хранения нужно оценить заранее.
Когда требуется серверное сохранение черновика?
Оно уместно, если пользователь должен продолжить заполнение на другом устройстве или после длительного перерыва. Сервер должен проверять право доступа к черновику и удалять его по установленному сроку.
Когда удалять временно сохранённые данные?
Удаляйте черновик после успешной отправки, явного начала новой формы или истечения установленного срока. Не очищайте его после неудачного запроса, если пользователь должен иметь возможность повторить отправку.
Что делать, если браузерное хранилище недоступно?
Не блокируйте заполнение формы без необходимости: оставьте данные в памяти текущей страницы и сообщите, что восстановление после закрытия или обновления может быть недоступно. Для обязательного долговременного восстановления используйте серверное решение.
Как не отправить заявку дважды после ошибки?
Различайте подтверждённый отказ и неопределённый результат, например потерю соединения после отправки. На серверной стороне предусмотрите проверку повторной отправки, а в интерфейсе покажите статус запроса и сохраните черновик до подтверждения успеха.