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.
Users should be able to:
- Complete each step of the sequence
- 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
Also I added:
- Simple Validation on the username,email and phone number fields
- The chosen plan, billing type and addons are stored on localstorage
- The form will be sent using ajax
Some screenshots of my Solution
- The first step
- The first step with validation on required fields
- The Second step (where the user can choose the plan and the billing type)
- The Third step (where the user can choose the addons)
- The Fourth step (where the user can find a summary of what he chose and the total)
- Finaly if the form submitted successfully this message of thanks will appear
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Javascript (procedural programming)
It's My first time that I work with the Mobile first approach, First I started the project by designing the desktop version, then I faced some scenarios so I decided to change to Mobile first approach to solve them and the result was impressive. I liked the process and I will use It again in the next projects
- I will work on the accessibility (One of my inconvenients)
- I will implement this form with php to send the data through it
- Facebook - @yourusername
- Linkedin - @yourusername