/multi-step-form

This form is designed to guide users through a series of steps to complete a task. It’s perfect for scenarios where you need to collect detailed information from users in an organized manner. Whether you're building a signup form or a survey, this setup makes it smooth and engaging! 📝✨

Primary LanguageHTML

Multi-Step Form 🚀📝

Solution for a challenge from Frontend Mentor.

Live Demo | Solution | Challenge

📋 Table of Contents

🌍 Overview

screenshot

Welcome to my Multi-Step Form project! 🎉 This form is designed to guide users through a series of steps to complete a task. It’s perfect for scenarios where you need to collect detailed information from users in an organized manner. Whether you're building a signup form or a survey, this setup makes it smooth and engaging! 📝✨

The Challenge

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
    • A step is submitted, but no selection has been made

🛠️ Built With

This application was built using the following technologies:

What I Learned

Building this multi-step form was a fantastic learning experience! 😄 I got to dive deep into TypeScript and Tailwind CSS while handling form validation and dynamic updates. Managing state and user interactions across multiple steps was a bit tricky, but it was rewarding to see it all come together! 💪

One of the highlights was learning how to effectively handle form navigation and validations. Also, it was exciting to see how Tailwind CSS helped in creating a clean and responsive design effortlessly. 🌟

My Wisdom 🌟

Here's a little piece of wisdom from my journey: "Keep experimenting and don’t be afraid to make mistakes. Every challenge is a chance to learn and grow." 💡

✨ Features

Here's what the app can do:

  • Step-by-Step Completion: Navigate through and complete each step of the form sequence seamlessly.
  • Back Navigation: Go back to any previous step to update or correct your selections as needed.
  • Dynamic Plan Selection: Choose and switch between different plans and see the changes in real-time.
  • Add-Ons Management: Select add-ons and see the updated summary with total costs.
  • Order Summary: View a summary of all selections on the final step and confirm your order before submission.
  • Responsive Layout: Enjoy an optimal layout and user experience tailored to fit different screen sizes, from mobile to desktop.
  • Interactive Elements: Experience clear hover and focus states for all interactive elements to enhance usability.
  • Real-Time Form Validation: Receive validation messages for:
    • Missing fields
    • Incorrectly formatted email addresses
    • Unsubmitted selections before proceeding

🚀 How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/naijadevgamer/multi-step-form

# Navigate into the directory
$ cd multi-step-form

# Install dependencies
$ npm install

# Run the app
$ npm start

Author

[Saleeman Abdullahi Alaba Aransiola]

Feel free to reach out if you have any questions or suggestions. I’d love to hear from you! 😊

🙏 Acknowledgments

I extend my gratitude to the Almighty ALLAH for guiding me through this project.

Hope you enjoy using this multi-step form as much as I enjoyed building it! 🌟😊