EMPEROR MULTI STEP FORM

A modern, fully responsive multi-step form built with HTML, CSS, and JavaScript. This project demonstrates advanced form handling, state management, validation logic, and dynamic order summary generation.

PROJECT OVERVIEW

Emperor Multi Form allows users to: Complete each step in a guided sequence

Navigate back to update selections

View a dynamic order summary

Receive real-time validation feedback

Experience responsive design across devices

Interact with hover and focus states

This project was built to practice complex form handling and state management in vanilla JavaScript.

FEATURES

1️⃣ Multi-Step Navigation Sidebar step indicator Controlled navigation (Next / Back) Active step highlighting

2️⃣ Form Validation Required field validation Email format validation Plan selection validation Error messages for incomplete steps

3️⃣ Dynamic State Management Central formData object Real-time data updates Step-based validation logic

4️⃣ Order Summary Displays: User details Selected plan Add-ons Total cost Auto-calculates pricing

TECH STACK HTML5 CSS3 (Flexbox + Media Queries) Vanilla JavaScript (DOM Manipulation + State Management)

PROJECT STRUCTURE Emperor-Multi-Form/ │ ├── index.html ├── style.css ├── script.js └── README.md

WHAT I LEARNED Managing multi-step UI state Creating reusable validation functions Handling conditional rendering Building dynamic summary components Designing responsive layouts Structuring clean project folders

FUTURE IMPROVEMENTS Add localStorage persistence Add animation transitions between steps Connect to backend API Convert to React for scalable state management Add yearly/monthly billing toggle

👤 Author

Charles Gabriel Frontend Developer | Tech Content Creator

Support If you like this project: Star the repository ⭐ Fork it Share feedback Suggest improvements