Create a Multi-Step Form in React JS

Hey everybody, I hope you are all fine, today we are going to learn how to create a React multi-step form in React JS from scratch. In react JS, creating a multi-step type allows splitting a long form into various parts for a better user experience as it makes the process less daunting. Here is a short step-by-step guide to creating a multi-stepper kind in React JS from the bottom up.

Multi-step varieties are beneficial for lengthy shapes as they damage the shape into smaller, viable steps. This enhances the general user expertise by reducing the perceived complexity and lowering intimidation to fill in such a form. In this tutorial, we are going to build a simple multi-step form using React with a progress bar.

Setting up Your React Development Environment First Be sure you have Node. Now that you just acquired the node. js and npm put in, create a brand new React venture utilizing an instrument like – create-react-app Before anything, start the event server as soon as your venture is created. This lets you confirm that everything was set up correctly.

Create a React Multi-Step Form in React JS

before moving the codes, I have a video tutorial you can watch and learn step by step each step that is used to build a multi-step form with a progress bar. Inside the playlist are two videos, first of all, you need to learn how to make multi-steps with a progress bar and then you easily manage the text as a form.

I hope you’ve watched the complete tutorial, after watching the complete tutorial, you’ve learned something new from the tutorial. Let’s see the codes that are used to build a multi-step form in React JS from scratch.

You May Also Like:

• Create a Login And Signup Page in React Js
• How to Create Todo App in React JS
• How to Create a Modal Popup in React JS
• How to Make An Accordion in React JS

First of All, you need to make a project and replace the codes inside the App.jsx file which I’ve mentioned below.

import React from "react";
import MultiSteps from "./components/MultiSteps";

function App() {
  return <MultiSteps />;
}

export default App;

Once you have done that then the next thing you need to create a component namely MultiSteps that mentioned inside the App. jsx file. Inside the MultiStep component, you need to add codes that are mentioned below.

import React, { useState } from "react";
import Progress from "./Progress";
import { Personal, Signup, SocialLinks } from "./Forms";

// const message = ["Learn React", "Apply For Jobs", " Invest Your Income"];

function MultiSteps() {
  return <Multi />;
}

function Multi() {
  const [step, setSteps] = useState(1);
  const totalSteps = 3;

  function handlePrev() {
    if (step > 1) setSteps((step) => step - 1);
  }

  function handleNext() {
    if (step < 3) setSteps((step) => step + 1);
  }

  const renderSteps = () => {
    switch (step) {
      case 1:
        return <Signup />;
      case 2:
        return <Personal />;
      case 3:
        return <SocialLinks />;
      default:
        return null;
    }
  };

  return (
    <div className="container">
      <div className="progress_container">
        <Progress totalSteps={totalSteps} step={step} className="progress " />
        <div className={`${step >= 1 ? "circle active" : "circle"}`}>1</div>
        <div className={`${step >= 2 ? "circle active" : "circle"}`}>2</div>
        <div className={`${step >= 3 ? "circle active" : "circle"}`}>3</div>
      </div>
      {renderSteps()}
      <div className="content">{/* <Message step={step} /> */}</div>
      <div className="btns">
        <button
          className={`${step <= 1 ? "disabled" : "btn"}`}
          onClick={handlePrev}
        >
          Prev
        </button>
        <button
          className={`${step === totalSteps ? "disabled" : "btn"}`}
          onClick={handleNext}
        >
          Next
        </button>
      </div>
    </div>
  );
}

// function Message({ step }) {
//   return <h2>{message[step - 1]}</h2>;
// }

export default MultiSteps;

The Multi-Step component has many components, the first one is the progressbar, so, you need to get the codes on below and create a Progress Component and Paste.

import React from "react";

function Progress({ totalSteps, step }) {
  const progress = ((step - 1) / (totalSteps - 1)) * 100;

  return (
    <div
      className="progress"
      style={{
        height: "4px",
        background: "#ddd",
        width: "100%",
        transition: "all 0.4s ease-in",
      }}
    >
      <div
        style={{
          height: "4px",
          background: "#5913D3",
          width: `${progress}%`,
          transition: "all 0.4s ease-in",
        }}
      ></div>
    </div>
  );
}

export default Progress;

After that, you need to create another Component namely Form inside the form Component you need to make a multip components and include it inside the Multi-Step Form Components.

export function SocialLinks() {
  return (
    <div className="form-container">
      <h2>Social Links</h2>
      <form>
        <input type="email" placeholder="Facebook URL" />
        <input type="password" placeholder="Twitter URL" />
        <input type="password" placeholder="Instagram URL" />
      </form>
    </div>
  );
}

export function Signup() {
  return (
    <div className="form-container">
      <h2>Registration Form</h2>
      <form>
        <input type="email" placeholder="Enter your email" />
        <input type="password" placeholder="Enter your password" />
        <input type="password" placeholder="Enter your confirm password" />
      </form>
    </div>
  );
}

export function Personal() {
  return (
    <div className="form-container">
      <h2>Personal Information</h2>
      <form>
        <input type="text" placeholder="Enter your first name" />
        <input type="text" placeholder="Enter your last name" />
        <input type="text" placeholder="Enter your phone" />
      </form>
    </div>
  );
}

The final step is you need to design the project, you can any framework as you want, but I’m going to share with you the CSS codes that I used inside the project.

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --line-border-fill: #630cf1;
  --line-border-empty: #383838;
}

* {
  box-sizing: 0;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: rgb(160, 96, 255);
  background: linear-gradient(
    90deg,
    rgba(160, 96, 255, 1) 0%,
    rgba(203, 48, 227, 1) 33%,
    rgba(255, 168, 78, 1) 100%
  );
  font-family: "poppins", sans-serif;
}

.container {
  width: 450px;
  background-color: #fff;
  padding: 1rem 2rem;
  border-radius: 5px;
  overflow-x: hidden;
}

.container .content h2 {
  font-size: 2rem;
  color: var(--line-border-empty);
  text-align: center;
  padding: 2rem 0;
}

.progress_container {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
  position: relative;
}

.progress_container::before {
  content: "";
  position: absolute;
  background-color: #ddd;
  height: 4px;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
}

.progress {
  /* background-color: var(--line-border-fill); */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* height: 4px; */
  z-index: 1;
  /* transition: all 0.8s ease-in; */
}

.circle {
  background-color: #ddd;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: 1;
}

.circle.active {
  border-color: var(--line-border-empty);
  color: #fff;
  background-color: #5913d3;
}

.btns {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.btn {
  outline: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  border-radius: 4px;
  background-color: #5913d3;
  color: #fff;
  padding: 4px 40px;
}

.btn:active {
  outline: none;
  transform: scale(0.98);
}

.disabled {
  outline: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: 4px;
  color: #000;
  padding: 4px 40px;
  background-color: #ddd;
  cursor: not-allowed;
}

/* Forms */
.form-container h2 {
  text-align: center;
  font-size: 2rem;
  padding: 2rem 0;
}

.form-container form input {
  width: 96%;
  outline: none;
  font-family: inherit;
  padding: 0.6rem 0.5rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

New You can easily Generate the main textbox that may behave as a qualification for one multi-step design. This piece will manage which step is currently active, and render the corresponding Step component. Also, it should manage the overall type state and take care of step-wise navigation.

Add a new component to behave as the main container for the multi-step form. This component will manage which step is currently active and render the correct step part. It should also manage the overall form state and Facilitate navigation between steps as well.

Divide the shape into smaller elements, every representing a single step. Create a separate part for every step of the shape. Every step part ought to include the particular type fields for that step and handle its native state.

Implement features to deal with navigation between steps, similar to shifting to the following step or going again to the earlier step. Add navigation buttons in every step part to permit customers to proceed to the following step or return to the earlier one. Be certain that type of information is preserved as customers navigate between steps.

Outline an overall performance to address the closing submission of the shape. These plays must validate the shape information and post it to the server or perform any crucial movements. Show a summary or affirmation message upon profitable submission.

Use basic CSS on design and its elements to enhance the customer interface. Most use conditional assertions to specify and mask univariate expressions based on existing expressions. Improve the look of the form with additional styling as desired to make it visually appealing and easy to use.

Conclusion

You can make multistep changes in React JS by following these steps. This method breaks down a large command into smaller executables, increasing customer data and type completion values. Size it to your liking and detail it according to your specific needs. Doing multi-step sorting in React doesn’t just improve the buyer’s experience though and also makes form data more organized and easier to handle. This data provides a solid foundation for building complex multi-step transformations in React.