Разработка мультишаговой формы (Multi-Step Form) на сайте

Разработка мультишаговой формы (Multi-Step Form) на сайте

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

Архитектура компонента

import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';

// Схемы валидации для каждого шага
const step1Schema = z.object({
  firstName: z.string().min(2, 'Минимум 2 символа'),
  lastName:  z.string().min(2),
  email:     z.string().email('Некорректный email'),
});

const step2Schema = z.object({
  phone:   z.string().regex(/^\+7\d{10}$/, 'Формат: +7XXXXXXXXXX'),
  city:    z.string().min(2),
  address: z.string().optional(),
});

const step3Schema = z.object({
  serviceId:    z.number().positive(),
  preferredDate: z.string(),
  comment:       z.string().max(500).optional(),
});

const STEPS = [step1Schema, step2Schema, step3Schema];

export function MultiStepForm({ onSubmit }: { onSubmit: (data: FormData) => Promise<void> }) {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData]       = useState<Partial<FormData>>({});

  const form = useForm({
    resolver: zodResolver(STEPS[currentStep]),
    defaultValues: formData,
  });

  async function handleNext(stepData: Partial<FormData>) {
    const merged = { ...formData, ...stepData };
    setFormData(merged);

    if (currentStep < STEPS.length - 1) {
      setCurrentStep(s => s + 1);
      form.reset(merged);
    } else {
      await onSubmit(merged as FormData);
    }
  }

  const progress = ((currentStep + 1) / STEPS.length) * 100;

  return (
    <FormProvider {...form}>
      {/* Прогресс-бар */}
      <div className="mb-8">
        <div className="flex justify-between text-sm text-gray-500 mb-2">
          <span>Шаг {currentStep + 1} из {STEPS.length}</span>
          <span>{Math.round(progress)}%</span>
        </div>
        <div className="h-2 bg-gray-100 rounded-full">
          <div
            className="h-2 bg-blue-500 rounded-full transition-all duration-500"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      {/* Шаги */}
      <form onSubmit={form.handleSubmit(handleNext)}>
        {currentStep === 0 && <Step1ContactInfo />}
        {currentStep === 1 && <Step2DeliveryInfo />}
        {currentStep === 2 && <Step3ServiceSelection />}

        <div className="flex gap-3 mt-6">
          {currentStep > 0 && (
            <button
              type="button"
              onClick={() => setCurrentStep(s => s - 1)}
              className="btn-secondary"
            >
              Назад
            </button>
          )}
          <button type="submit" className="btn-primary flex-1">
            {currentStep < STEPS.length - 1 ? 'Далее' : 'Отправить'}
          </button>
        </div>
      </form>
    </FormProvider>
  );
}

Сохранение прогресса

Данные каждого шага сохраняются в localStorage — пользователь может закрыть вкладку и вернуться:

// Авто-сохранение в localStorage
useEffect(() => {
  const saved = localStorage.getItem('form_draft');
  if (saved) setFormData(JSON.parse(saved));
}, []);

function handleNext(stepData) {
  const merged = { ...formData, ...stepData };
  setFormData(merged);
  localStorage.setItem('form_draft', JSON.stringify(merged));
  // ...
}

// Очистка после успешной отправки
function handleSuccess() {
  localStorage.removeItem('form_draft');
}

Анимация переходов

import { AnimatePresence, motion } from 'framer-motion';

<AnimatePresence mode="wait">
  <motion.div
    key={currentStep}
    initial={{ opacity: 0, x: 50 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -50 }}
    transition={{ duration: 0.2 }}
  >
    {/* Содержимое текущего шага */}
  </motion.div>
</AnimatePresence>

Сроки

Мультишаговая форма на 3–5 шагов с валидацией и сохранением прогресса: 3–5 рабочих дней.