Setup a customisable multi-step (wizard) form in React

In this tutorial we’ll be setting up a multi-step form (also called a wizard form) component in React. Breaking up large forms into multiple steps makes them less daunting for the user to complete. As React is component based this can be achieved by including each step in an individual component.

First let’s setup a new project using Create React App:

npx create-react-app multi-step-form

Next create a components folder in the src directory with the following files:

MultiStep1.js
MultiStep2.js
MultiStep3.js
MultiStepForm.js
MultiStepSubmit.jsCode language: plaintext (plaintext)

We’ll code each of the steps before pulling it all together in MultiStepForm.js.

MultiStep1.js

The first step of the form will capture the name & email:

import React from "react";
const Step1 = (props) => {
  const { data, handleChange, next } = props;
  return (
    <form>
      <p>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          name="email"
          value={data.email}
          onChange={handleChange}
        />
      </p>
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step1;Code language: JavaScript (javascript)

We store the values entered into the fields in the data prop, the handleChange updates the values stored and next loads the next step of the form. The functionality for each of these will come later in MultiStepForm.js.

MultiStep2.js

The second step captures some location data:

import React from "react";
const Step2 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          name="street"
          value={data.street}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="city">City:</label>
        <input
          type="text"
          name="city"
          value={data.city}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="postcode">Postcode:</label>
        <input
          type="number"
          name="postcode"
          value={data.postcode}
          onChange={handleChange}
        />
      </p>
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step2;Code language: JavaScript (javascript)

This is the same as the first step except for the inclusion of a back button.

MultiStep3.js

The third step captures a comment:

import React from "react";
const Step3 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="comments">Comments:</label>
        <textarea
          name="comments"
          value={data.comments}
          onChange={handleChange}
        ></textarea>
      </p>      
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step3;Code language: JavaScript (javascript)

MultiStepSubmit.js

After each of the steps has been completed we’ll display the data captured:

import React from "react";
const Submit = (props) => {
  const { data } = props;
  const listItems = Object.entries(data).map(([key, value]) => (
    <li>
      <strong>{key}:</strong> {value}
    </li>
  ));
  return (
    <div>
      <ul>{listItems}</ul>
      <button type="submit">Submit</button>
    </div>
  );
};
export default Submit;Code language: JavaScript (javascript)

This is simply looping through the data and outputting the key and value into an unordered list. We wont be creating the submit functionality in this tutorial there are many ways to go about this. If you would like to see an example of how this data could be sent via email using Node.js check out this tutorial.

MultiStepForm.js

We can now pull it all together in the MultiStepForm component:

import React, { useState } from "react";
import Step1 from "./MultiStep1";
import Step2 from "./MultiStep2";
import Step3 from "./MultiStep3";
import Submit from "./MultiStepSubmit";

const MultiStepForm = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    street: "",
    city: "",
    postcode: "",
    comments: "",    
  });
  const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };
  const next = () => {
    setCurrentStep(currentStep + 1);
  };
  const back = () => {
    setCurrentStep(currentStep - 1);
  };
  switch (currentStep) {
    case 1:
      return (
        <Step1 
          data={formData} 
          handleChange={handleChange} 
          next={next} 
        />
      );
    case 2:
      return (
        <Step2
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    case 3:
      return (
        <Step3
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    default:
      return <Submit data={formData} back={back} />;
  }
};
export default MultiStepForm;Code language: JavaScript (javascript)

As you can see the multi-step functionality is handled by a switch statement that checks what the currentStep is and then renders the component for that step.

If you want to modify or add additional fields you’ll need to update the keys in the formData inline with your new fields. Additional steps can be created by importing a new component and adding it to the switch statement.

All that’s left todo is load the component into the app by modifying App.js as follows:

import MultiStepForm from "./components/MultiStepForm";
import "./App.css";
const App = () => {
  return <MultiStepForm />;
};
export default App;Code language: JavaScript (javascript)

There you have it, a multi-step form that you can modify to suit your needs. If you enjoyed this tutorial why not check out some of our other tutorials about building custom React components.