This is a solution to the Multi-step form challenge on Frontend Mentor. This project is a responsive multi-step form that allows users to enter their personal information, select a plan, choose add-ons, and see a summary of their selections before confirming their order.
- Multi-step sequence: Users can complete each step of the form in a sequential manner.
- Navigation: Users can go back to a previous step to update their selections.
- Summary and confirmation: Users can see a summary of their selections on the final step and confirm their order.
- Responsive design: The layout is optimized for both mobile and desktop devices.
- Form validation: Users receive form validation messages if a field is missed, the email address is not formatted correctly, or a step is submitted without a selection.
- Hover and focus states: All interactive elements on the page have hover and focus states.
To get a local copy of this project up and running, follow these simple steps.
- Clone the repo
git clone https://github.com/your_username_/your_repository_.git
- Install NPM packages
npm install
- Run the development server
npm run dev
/
├── public/
│ ├── design/
│ ├── fonts/
│ └── images/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Button.jsx
│ │ ├── SelectableBox.jsx
│ │ ├── SideBar.jsx
│ │ └── Step.jsx
│ ├── pages/
│ │ ├── AddOns.jsx
│ │ ├── PersonalInfo.jsx
│ │ ├── SelectPlan.jsx
│ │ ├── Summary.jsx
│ │ └── ThankYou.jsx
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── README.md
├── package.json
└── ...
- Website - Taophycc.com
- Frontend Mentor - @taophycc
- Twitter - @taophyc_
- Frontend Mentor - For providing the challenge.
- React Documentation - For the comprehensive documentation.
- Tailwind CSS Documentation - For the amazing utility-first CSS framework.