This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- The phone number is not formatted correctly
- No plan is selected
- A step will not submitted, until fields having validation check, pass the avialable validations.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
I started this challenge by following these steps:
- Analyzing the design for similarities such as input fields, labels, buttons, etc.
- Creating a layout component to achieve the desired layout.
- Creating reusable components such as input fields, labels, buttons, forms, cards, and checkboxes.
- Using the Context API for state management and React Hook Form for form control and validation.
- Semantic HTML5 markup
- CSS module and custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- react-hook-form - React library
- SCSS - For styles
I have learned a react-hook-form which is a react library, for form validation in React applications.
- [React] (react.dev)
- react-hook-form - React library
- Frontend Mentor - @lazy4gyan
- LinkedIn - @madansinha