Comprehensive Form Module

End-to-end form design and optimization system covering form UX, validation, multi-step flows, conditional logic, accessibility, and conversion optimization for web applications.

When to Use

Deploy this module when:

• Building complex forms (registration, checkout, applications)
• Optimizing form conversion rates
• Need accessible, multi-step form flows
• Integrating forms with backend validation and submission handling

Use simple forms when:

• Basic contact or feedback forms
• Single-field inputs (search, email capture)
• Internal tools where UX isn't critical

Quick Start

Multi-Step Form Component

Copy
import { useState } from 'react';

interface FormData {
  name: string;
  email: string;
  plan: string;
  payment: string;
}

function MultiStepForm() {
  const [step, setStep] = useState(1);
  const [data, setData] = useState<FormData>({
    name: '', email: '', plan: '', payment: ''
  });
  const [errors, setErrors] = useState<Partial<FormData>>({});

  const validateStep = (stepNumber: number): boolean => {
    const newErrors: Partial<FormData> = {};

    if (stepNumber === 1) {
      if (!data.name.trim()) newErrors.name = 'Name is required';
      if (!data.email.includes('@')) newErrors.email = 'Valid email required';
    }
    if (stepNumber === 2) {
      if (!data.plan) newErrors.plan = 'Select a plan';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const nextStep = () => {
    if (validateStep(step)) setStep(step + 1);
  };

  return (
    <form>
      <ProgressBar current={step} total={3} />
      {step === 1 && <PersonalInfo data={data} errors={errors} onChange={setData} />}
      {step === 2 && <PlanSelection data={data} errors={errors} onChange={setData} />}
      {step === 3 && <Review data={data} onSubmit={handleSubmit} />}
      <div className="flex justify-between">
        {step > 1 && <button onClick={() => setStep(step - 1)}>Back</button>}
        {step < 3 ? (
          <button onClick={nextStep}>Continue</button>
        ) : (
          <button type="submit">Submit</button>
        )}
      </div>
    </form>
  );
}

Form Validation

Copy
const validationRules = {
  email: {
    required: true,
    pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: 'Please enter a valid email address',
  },
  password: {
    required: true,
    minLength: 8,
    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
    message: 'Password must be 8+ chars with uppercase, lowercase, and number',
  },
  phone: {
    required: false,
    pattern: /^\+?[\d\s-()]{10,15}$/,
    message: 'Please enter a valid phone number',
  },
};

Core Concepts

Form UX Best Practices

Principle	Implementation	Impact
Reduce fields	Only ask what you need	+25% completion
Inline validation	Validate on blur, not submit	+22% completion
Progress indicator	Show step X of Y	+15% completion
Smart defaults	Pre-fill when possible	+10% completion
Mobile-first	Large touch targets, single column	+30% mobile completion

Form Conversion Optimization

Optimization	Before	After	Lift
Remove optional fields	8 fields	5 fields	+20%
Add progress bar	No indicator	3-step progress	+15%
Inline validation	Submit-only	On blur	+22%
Social login	Email + password	+ Google/Apple	+35%
Autofill support	No autocomplete	autocomplete attrs	+10%

Configuration

Parameter	Description
validation_mode	When to validate (blur, change, submit)
steps	Number of form steps
progress_indicator	Bar, steps, or percentage
error_display	Inline, toast, or summary
autosave	Save progress to localStorage
accessibility	ARIA labels, error announcements

Best Practices

1. Ask for less — every field you remove increases completion rate
2. Validate inline on blur — immediate feedback prevents form-submit frustration
3. Use multi-step for 5+ fields — break long forms into 2-3 logical steps
4. Support autofill — add proper autocomplete attributes to every input
5. Show progress — users need to know how much is left
6. Save progress — for long forms, persist data so users can return

Common Issues

High form abandonment: Reduce the number of fields. Add a progress indicator. Move low-priority fields to a later step or make them optional.

Validation frustrates users: Validate on blur (not keystroke). Show helpful error messages, not generic "invalid input". Allow paste into phone/card fields.

Form not accessible: Add aria-label to every input. Associate error messages with aria-describedby. Ensure keyboard navigation works. Test with screen readers.