Реализация мультишаговой регистрации (Wizard) на сайте

Многошаговая регистрация для веб-сайта

Multi-step wizard снижает когнитивную нагрузку: вместо длинной формы на одной странице — несколько коротких шагов. Применяется, когда при регистрации нужно собрать много данных: профиль + компания + роль + настройки уведомлений.

Когда оправдан wizard

Оправдан при 5+ полях, которые логически делятся на группы. Для 3–4 полей (имя, email, пароль) — wizard избыточен, проще одна форма.

Типичная структура для SaaS B2B:

1. Аккаунт (email, пароль)
2. Профиль (имя, должность, фото)
3. Компания (название, размер, сфера)
4. Тарифный план
5. Подтверждение email

React — управление шагами

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

const STEPS = [
  { id: 'account', title: 'Аккаунт', schema: accountSchema },
  { id: 'profile', title: 'Профиль', schema: profileSchema },
  { id: 'company', title: 'Компания', schema: companySchema },
];

export function RegistrationWizard() {
  const [currentStep, setCurrentStep] = useState(0);
  const [formData, setFormData] = useState({});

  const methods = useForm({
    resolver: zodResolver(STEPS[currentStep].schema),
    mode: 'onBlur',
  });

  const onNext = methods.handleSubmit((data) => {
    setFormData(prev => ({ ...prev, ...data }));

    if (currentStep < STEPS.length - 1) {
      setCurrentStep(s => s + 1);
      methods.reset(); // сброс для следующего шага
    } else {
      submitRegistration({ ...formData, ...data });
    }
  });

  return (
    <FormProvider {...methods}>
      {/* Прогресс-бар */}
      <StepProgress steps={STEPS} current={currentStep} />

      {/* Шаг */}
      <form onSubmit={onNext}>
        {currentStep === 0 && <AccountStep />}
        {currentStep === 1 && <ProfileStep />}
        {currentStep === 2 && <CompanyStep />}

        <div className="flex justify-between mt-6">
          {currentStep > 0 && (
            <button type="button" onClick={() => setCurrentStep(s => s - 1)}>
              Назад
            </button>
          )}
          <button type="submit">
            {currentStep < STEPS.length - 1 ? 'Далее' : 'Завершить регистрацию'}
          </button>
        </div>
      </form>
    </FormProvider>
  );
}

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

// Сохранять в localStorage — пользователь вернётся и не потеряет данные
useEffect(() => {
  const saved = localStorage.getItem('registration_progress');
  if (saved) {
    const { step, data } = JSON.parse(saved);
    setCurrentStep(step);
    setFormData(data);
  }
}, []);

// Сохранять при каждом шаге
const saveProgress = (step: number, data: object) => {
  localStorage.setItem('registration_progress', JSON.stringify({ step, data }));
};

// Очистить после успешной регистрации
const clearProgress = () => {
  localStorage.removeItem('registration_progress');
};

Backend: поэтапная регистрация

Два подхода:

Single request: все данные отправляются одним запросом в конце. Проще для backend.

Incremental: каждый шаг — отдельный endpoint. Позволяет создавать «черновик» и возобновлять регистрацию позже.

// Incremental approach
// POST /api/registration — создать pending user после шага 1
public function createAccount(AccountStepRequest $request)
{
    $user = User::create([
        'email'    => $request->email,
        'password' => Hash::make($request->password),
        'status'   => 'pending', // не активен до завершения
    ]);

    // Временный токен для продолжения регистрации
    $token = $user->createToken('registration', ['registration:continue'])->plainTextToken;

    return response()->json(['registration_token' => $token], 201);
}

// PUT /api/registration/profile — шаг 2
public function updateProfile(ProfileStepRequest $request)
{
    $user = $request->user(); // по registration_token
    $user->update(['name' => $request->name, 'avatar' => $request->avatar]);
    return response()->json(['success' => true]);
}

// PUT /api/registration/complete — финальный шаг
public function complete(CompleteRequest $request)
{
    $user = $request->user();
    $user->update(['status' => 'active']);
    $user->sendEmailVerificationNotification();

    // Выдаём полноценный токен взамен registration token
    $user->tokens()->where('name', 'registration')->delete();
    $token = $user->createToken('auth')->plainTextToken;

    return response()->json(['token' => $token]);
}

Прогресс-бар

function StepProgress({ steps, current }: { steps: Step[]; current: number }) {
  return (
    <div className="flex items-center mb-8">
      {steps.map((step, index) => (
        <React.Fragment key={step.id}>
          <div className={`flex items-center gap-2 ${index <= current ? 'text-blue-600' : 'text-gray-400'}`}>
            <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium
              ${index < current ? 'bg-blue-600 text-white' : ''}
              ${index === current ? 'border-2 border-blue-600 text-blue-600' : ''}
              ${index > current ? 'border-2 border-gray-300 text-gray-400' : ''}
            `}>
              {index < current ? '✓' : index + 1}
            </div>
            <span className="text-sm hidden sm:block">{step.title}</span>
          </div>
          {index < steps.length - 1 && (
            <div className={`flex-1 h-0.5 mx-3 ${index < current ? 'bg-blue-600' : 'bg-gray-200'}`} />
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

Сроки

Multi-step wizard с React Hook Form, localStorage сохранение прогресса, поэтапный backend API, прогресс-бар: 3–5 дней.