form wizard JavaScript

A Form Wizard (or multi-step form) breaks long, overwhelming forms into digestible sequential steps. The ideal implementation depends on whether you are using vanilla JavaScript or a framework ecosystem like React or Vue.

• Option 1: Vanilla JavaScript (Zero Dependencies) For lightweight sites, static pages, or custom UI control without external libraries, manage the active step using state and hide/show field groups.

HTML

<form id="wizard-form">

<!-- Step 1 -->

<div class="step" data-step="1">

• <h3>Step 1: Personal Info</h3>

<input type="text" id="name" placeholder="Full Name" required />

<button type="button" onclick="nextStep(1)">Next</button>

</div>

<!-- Step 2 -->

<div class="step hidden" data-step="2">

• <h3>Step 2: Contact Info</h3>

<input type="email" id="email" placeholder="Email" required />

<button type="button" onclick="prevStep(2)">Back</button>

<button type="button" onclick="nextStep(2)">Next</button>

</div>

<!-- Step 3 -->

<div class="step hidden" data-step="3">

• <h3>Step 3: Review</h3>

<button type="button" onclick="prevStep(3)">Back</button>

<button type="submit">Submit</button>

</div>

</form>

<style>

• .hidden { display: none; }

</style>

<script>

let currentStep = 1;

function showStep(stepNumber) {

document.querySelectorAll('.step').forEach(el => el.classList.add('hidden'));

document.querySelector([data-step="${stepNumber}"]).classList.remove('hidden');

currentStep = stepNumber;

}

function nextStep(step) {

// Validate current step inputs before moving forward

const currentContainer = document.querySelector([data-step="${step}"]);

const inputs = currentContainer.querySelectorAll('input');

let isValid = true;

inputs.forEach(input => {

if (!input.checkValidity()) {

input.reportValidity();

isValid = false;

}

});

if (isValid) showStep(step + 1);

}

function prevStep(step) {

• showStep(step — 1);

}

document.getElementById('wizard-form').addEventListener('submit', (e) => {

e.preventDefault();

alert('Form submitted!');

});

</script>

• Option 2: Dedicated Open-Source JS Wizard Libraries If you want built-in step counters, progress bars, and animations without writing custom step navigation mechanics from scratch:

Wizard-JS (Vanilla JS)

A lightweight, dependency-free vanilla JavaScript library that converts standard fieldsets into an animated wizard.

• Features: Built-in form validation hooks, custom action buttons per step, and CSS transition support.

• Best for: Projects without a heavy framework (e.g., MPA, PHP, WordPress, Laravel Blade).

Alpine.js (Vanilla / SSR / MPA)

Not strictly a wizard library, but the most popular micro-framework for multi-step forms in static or server-rendered applications.

• Features: Requires no build step. Controls steps using simple inline state (x-data="{ step: 1 }") and conditional visibility (x-show="step === 1").

• Best for: Lightweight multi-step widgets on Astro, Eleventy, Django, or Rails.

• Option 3: Modern Framework-Native Wizard Libraries If you are using modern component frameworks, leverage libraries designed to prevent form-wide re-renders and handle step-by-step state preservation:

• React — Formity A type-safe multi-step engine built specifically for multi-branching wizard flows, dynamic loops, and complex step jumps.

• React — React Hook Form The standard framework approach. Combine trigger(['fieldList']) validation with custom state tracking to navigate through steps manually.

• Vue 3 — vue3-form-wizard A Vue 3 composition-compatible wizard wrapper featuring step tab indicators, custom slots, and progress tracking.

• Universal — SurveyJS A schema-driven form engine capable of generating multi-page wizard forms directly from structured JSON objects.

Key Architectural Priorities for Form Wizards

• Per-Step Validation: Always validate only the current step's inputs before letting the user click "Next". Validating the whole form on Step 1 will fail silently on hidden fields.

• State Preservation: Keep step inputs in a centralized form state object or FormData structure so going "Back" does not purge already typed data.

• Keyboard Focus Management: Automatically move screen-reader and DOM focus to the primary heading or first input of the newly revealed step for accessibility compliance.