Multi-Step Form Wizard

A modern, responsive multi-step form wizard built with HTML, CSS, and JavaScript. This form guides users through multiple steps with validation and progress tracking.

Features

• Multi-step Navigation: Smooth transitions between form sections
• Progress Indicator: Visual feedback on form completion
• Responsive Design: Works on all devices
• Form Validation: Built-in validation for required fields
• Modern UI: Clean and professional interface
• Keyboard Accessible: Full keyboard navigation support
• Summary Page: Review all entered information before submission

Demo

View Live Demo

Installation

1. Clone the repository

   git clone https://github.com/rskworld/multistep-form.git

2. Navigate to the project directory

   cd multistep-form

3. Open index.html in your browser

   • Double-click the file or use a local server
   • For VS Code users: Use the Live Server extension

Usage

1. Fill in your personal information
2. Proceed to the next step using the "Next" button
3. Complete all required fields (marked with *)
4. Review your information on the summary page
5. Submit the form

Customization

Change Form Fields

Edit the index.html file to modify form fields. Each step is wrapped in a div with class step.

Styling

Modify styles.css to change colors, fonts, and layout:

:root {
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #198754;
}

Form Submission

By default, the form shows a success message. To connect to a backend:

1. Update the form's action attribute in index.html
2. Process the form data in your backend script

Responsive Design

The form is fully responsive and works on:

• Desktop
• Tablet
• Mobile devices

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

For any queries or support, please contact:

• Name: Molla Samser
• Email: help@rskworld.in
• Website: rskworld.in
• Phone: +91 9330539277

Support

If you find this project helpful, please consider giving it a ⭐️ on GitHub.

---

Developed with ❤️ by Molla Samser

Need a custom website or web application? Get in touch!