Skip to content

Create a multi-step form that allows users to complete each step, go back to a previous step, see a summary of their selections on the final step, and confirm their order

Notifications You must be signed in to change notification settings

Israa27/multistep-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Multi-Step Form with React.js

This project is a solution to the Multi-Step Form challenge from Frontend Mentor. It is built using React.js, Tailwind CSS, Redux Toolkit for state management, and React Router for navigation.

Table of Contents

Overview

Challenge

The challenge was to create a multi-step form that allows users to complete each step, go back to a previous step, see a summary of their selections on the final step, and confirm their order. Users should also be able to view the optimal layout for the interface depending on their device's screen size and see hover and focus states for all interactive elements on the page. Additionally, form validation messages should be displayed if any field has been missed or if the email address is not correctly formatted.

Screenshot

active-states-step-1 active-states-step-2 active-states-step-3 active-states-step-4 desktop-design-step-1 desktop-design-step-2-monthly desktop-design-step-2-yearly desktop-design-step-3-monthly desktop-design-step-3-yearly desktop-design-step-4-monthly desktop-design-step-4-yearly desktop-design-step-5

Links

Features

  • Multi-step form with navigation between steps.
  • Form validation with error messages.
  • Summary page to review selections.
  • Responsive design for various screen sizes.
  • Hover and focus states for interactive elements.

Technologies Used

  • React.js
  • Tailwind CSS
  • Redux Toolkit
  • React Router

Getting Started

To get started with this project, follow these steps:

  1. Clone the repository:

    git clone https://github.com/Israa27/multistep-form.git
    
  2. Install dependencies:

    npm install
    
  3. Start the development server:

    npm start
    

Author

About

Create a multi-step form that allows users to complete each step, go back to a previous step, see a summary of their selections on the final step, and confirm their order

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published