Building Multi-Step Form Wizards with SurveyJS Across Modern Frameworks

How to Add a Form Wizard to Your Website (React, Angular, Vue, plain JS)

SurveyJS enables developers to model complex multi-step forms as JSON schemas rather than hand-coding navigation and state management. This architectural approach separates form design from rendering, allowing a single definition to run across multiple JavaScript frameworks.

Why This Matters

Hand-coding the navigation, validation, and conditional branching for long forms creates brittle, framework-dependent code that is difficult to scale or audit. By moving these concerns into a declarative JSON schema, engineering teams ensure that logic remains consistent and portable regardless of the underlying frontend stack.

This separation of concerns reduces the maintenance burden by centralizing validation rules and branching logic. It allows non-developers to modify form structures via visual builders while maintaining a clean, framework-specific UI layer for the end-user experience.

Key Insights

• SurveyJS uses a framework-agnostic ‘survey-core’ to manage shared model and runtime logic.
• The ‘questionsOnPageMode’ property acts as a global switch to toggle between single-page and question-per-page wizard layouts.
• Survey Creator provides a visual drag-and-drop interface for generating portable JSON form schemas.
• Declarative validation logic, such as ‘age({dob}) >= 18’, is embedded directly in the JSON rather than written in JavaScript handlers.
• Framework-specific packages like ‘survey-react-ui’ and ‘survey-vue3-ui’ provide the necessary UI components to render the core logic.

Working Examples

A partial JSON schema defining a multi-step form with expression-based validation.

{
  "title": "Background check consent form",
  "pages": [
    {
      "name": "personal-details",
      "elements": [
        {
          "type": "text",
          "name": "dob",
          "title": "Date of Birth",
          "validators": [
            {
              "type": "expression",
              "text": "You must be at least 18 y.o. to submit the form.",
              "expression": "age({dob}) >= 18"
            }
          ],
          "inputType": "date"
        }
      ]
    }
  ],
  "questionsOnPageMode": "questionPerPage"
}

Implementation of a SurveyJS wizard in a React functional component.

import { useMemo } from "react";
import "survey-core/survey-core.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";

export default function SurveyWizard({ surveyJson }) {
  const survey = useMemo(() => new Model(surveyJson), []);
  return <Survey model={survey} />;
}

Practical Applications

• Complex Background Checks: Use ‘questionPerPage’ mode to guide users through sensitive data collection steps; Pitfall: Hard-coding navigation logic into React or Angular components makes the form non-portable.
• Cross-Framework Migration: Define form logic once in JSON to maintain consistency while migrating from legacy Angular to Vue; Pitfall: Duplicating validation logic across different framework event handlers leads to inconsistent user experiences.

References:

• https://dev.to/surveyjs/how-to-add-a-form-wizard-to-your-website-react-angular-vue-plain-js-198d