Multi-Step Registration Wizard for Website

Multi-Step Registration Wizard for Website

Multi-step wizard reduces cognitive load: instead of one long form — several short steps. Applied when registration needs to collect much data: profile + company + role + notification settings.

When Wizard is Justified

Justified for 5+ fields logically divided into groups. For 3–4 fields (name, email, password) — wizard is excessive, simpler with one form.

Typical structure for SaaS B2B:

1. Account (email, password)
2. Profile (name, position, photo)
3. Company (name, size, industry)
4. Pricing plan
5. Email confirmation

React — Step Management

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

const STEPS = [
  { id: 'account', title: 'Account', schema: accountSchema },
  { id: 'profile', title: 'Profile', schema: profileSchema },
  { id: 'company', title: 'Company', 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(); // reset for next step
    } else {
      submitRegistration({ ...formData, ...data });
    }
  });

  return (
    <FormProvider {...methods}>
      {/* Progress bar */}
      <StepProgress steps={STEPS} current={currentStep} />

      {/* Step */}
      <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)}>
              Back
            </button>
          )}
          <button type="submit">
            {currentStep < STEPS.length - 1 ? 'Next' : 'Complete Registration'}
          </button>
        </div>
      </form>
    </FormProvider>
  );
}

Save Progress

// Save to localStorage — user returns without losing data
useEffect(() => {
  const saved = localStorage.getItem('registration_progress');
  if (saved) {
    const { step, data } = JSON.parse(saved);
    setCurrentStep(step);
    setFormData(data);
  }
}, []);

// Save on each step
const saveProgress = (step: number, data: object) => {
  localStorage.setItem('registration_progress', JSON.stringify({ step, data }));
};

// Clear after successful registration
const clearProgress = () => {
  localStorage.removeItem('registration_progress');
};

Backend: Incremental Registration

Two approaches:

Single request: all data sent in one request at end. Simpler for backend.

Incremental: each step — separate endpoint. Allows creating "draft" and resuming registration later.

// Incremental approach
// POST /api/registration — create pending user after step 1
public function createAccount(AccountStepRequest $request)
{
    $user = User::create([
        'email'    => $request->email,
        'password' => Hash::make($request->password),
        'status'   => 'pending', // inactive until completion
    ]);

    // Temporary token for registration continuation
    $token = $user->createToken('registration', ['registration:continue'])->plainTextToken;

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

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

// PUT /api/registration/complete — final step
public function complete(CompleteRequest $request)
{
    $user = $request->user();
    $user->update(['status' => 'active']);
    $user->sendEmailVerificationNotification();

    // Issue full token instead of registration token
    $user->tokens()->where('name', 'registration')->delete();
    $token = $user->createToken('auth')->plainTextToken;

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

Progress Bar

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>
  );
}

Timeline

Multi-step wizard with React Hook Form, localStorage progress saving, incremental backend API, progress bar: 3–5 days.