Multi-Step Subscription Form

This repository contains a fully functional, responsive multi-step subscription form. The project is designed to replicate a real-world checkout or registration wizard where users can fill in their details, select a pricing plan, toggle billing cycles, choose optional add-ons, and review a final dynamic summary before confirming their order.

Live Demo

You can view and test the live project at the following link: [https://salmaabdelrhmanmostafamahmoud.github.io/MultiForm/]

---

Features

• Step-by-Step Navigation: A smooth and structured wizard that guides users through four distinct stages: User Info, Plan Selection, Add-ons, and Final Summary.
• Dynamic Billing Toggle: Users can seamlessly switch between monthly and yearly billing options. The interface automatically updates all displayed prices instantly.
• Interactive Add-ons: Secure checkbox tracking ensures that premium services can be added or removed with accurate state management.
• Real-time Price Calculation: JavaScript logic runs in the background to handle data parsing and calculate the total cost dynamically based on the active plan and selected add-ons.
• Adaptive Button States: The primary navigation button changes its behavior and text from "Next Step" to "Confirm" only when the user reaches the final summary page, and reverts back automatically if they decide to modify their choices.
• Responsive Layout: Built with a mobile-first approach, ensuring the entire interface is fully usable and visually consistent across smartphones, tablets, and desktops.

---

Tech Stack

• Structure: HTML5 using semantic elements for better accessibility and document structure.
• Styling: CSS3 utilizing custom properties (variables), Flexbox, and Grid for a clean layout.
• Logic: Vanilla JavaScript for DOM manipulation, event handling, and form state tracking.

---

How to Run the Project Locally

If you want to run this project on your local machine, follow these steps:

1. Clone the repository:

git clone https://github.com/SalmaAbdelrhmanMostafaMahmoud/MultiForm.git

2. Navigate to the project directory:

   cd MultiForm
   
   3. **Open the application:**
   * Simply open the `index.html` file in any modern web browser.
   * Alternatively, if you use VS Code, right-click `index.html` and select "Open with Live Server".
   
   ## Author

• Salma Abdelrhman - GitHub Profile