Multi-step form development for website

Multi-Step Form Development

Multi-step form breaks long process into sequential steps. Psychologically easier to fill 4 screens with 3 fields each than one screen with 12 fields. Applied in onboarding, checkout, service requests, surveys.

Component Architecture

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

// Validation schemas for each step
const step1Schema = z.object({
  firstName: z.string().min(2, 'Minimum 2 characters'),
  lastName:  z.string().min(2),
  email:     z.string().email('Invalid email'),
});

const step2Schema = z.object({
  phone:   z.string().regex(/^\+\d{1,3}\d{6,14}$/, 'Format: +1234567890'),
  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}>
      {/* Progress bar */}
      <div className="mb-8">
        <div className="flex justify-between text-sm text-gray-500 mb-2">
          <span>Step {currentStep + 1} of {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>

      {/* Steps */}
      <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"
            >
              Back
            </button>
          )}
          <button type="submit" className="btn-primary flex-1">
            {currentStep < STEPS.length - 1 ? 'Next' : 'Submit'}
          </button>
        </div>
      </form>
    </FormProvider>
  );
}

Saving Progress

Each step data saved to localStorage — user can close tab and return:

// Auto-save to 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));
  // ...
}

// Cleanup after successful submission
function handleSuccess() {
  localStorage.removeItem('form_draft');
}

Transition Animation

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 }}
  >
    {/* Current step content */}
  </motion.div>
</AnimatePresence>

Timeframe

Multi-step form with 3–5 steps, validation, and progress saving: 3–5 working days.