Multi-Step HTML5 Ajax Survey Form

Description:

Multi-Step HTML5 Ajax Survey Form is a fully responsive, animated multi-step form built with HTML5, CSS3, Bootstrap 5, and jQuery. It features AJAX form submission (no page reloads), interactive emoji satisfaction ratings, smooth slide transitions between steps, an animated gradient background, jQuery field validation, and a W3C-valid codebase — no PHP required.

The form is divided into 4 clear steps:

Step 1 — Personal Info
Collects first name, last name, email, mobile number, country, and service selection.
Each field has a FontAwesome icon prefix. All fields are required and validated before
the user can advance. The phone field accepts numbers only; the country field accepts
letters only; the email field is checked for correct format.

Step 2 — Emoji Satisfaction Rating
Four large interactive emoji cards replace standard radio buttons:
    Not Satisfied
    Quite Satisfied
    Satisfied
    Completely Satisfied
Selecting a card bounces the emoji and displays a live colour-coded progress bar with a
feedback message. A rating must be selected to advance — an error is shown if skipped.

Step 3 — Message / Feedback
An optional free-text textarea for additional comments or feedback. A live character
counter updates as the user types (maximum 500 characters; counter turns red after 450).
Clicking Submit fires the AJAX call — the button switches to a spinning loader during
the request. On completion, Step 4 appears with no page reload.

Step 4 — Success Screen
Displays after successful AJAX submission. An animated green checkmark bounces in via
CSS keyframe animation. A confetti particle effect plays twice. Badge pills confirm the
form is W3C Valid, AJAX Sent, and Responsive.

The animated progress bar at the top tracks the active step with a pulsing gradient circle, and connector lines fill with a gradient colour as the user advances.

Key Features:

- Latest Bootstrap 5 and HTML5
- 4-Step Survey Form with smooth slide transitions
- Interactive Emoji Satisfaction Rating (Step 2)
- Live colour-coded progress bar with feedback message
- Animated step progress indicator with pulsing active state
- jQuery Validation on all required fields before step advance
- Icon-prefixed input fields using FontAwesome (user, envelope, phone, globe, briefcase)
- Live character counter on the feedback textarea (max 500)
- AJAX form submission — no page reloads, no PHP required
- AJAX loading spinner on the Submit button during request
- Confetti success animation on Step 4
- Animated gradient background
- 100% Responsive and Mobile-Friendly layout
- W3C Valid HTML codebase
- Fully Customisable and well-structured code
- Properly Documented

File Structure:

survey-form/
├── index.php                          ← Main form (open in browser)
├── assets/
│   ├── css/
│   │   └── style.css                 ← All visual styling (~350 lines, fully commented)
│   └── js/
│       ├── index.js                  ← Step logic, validation, AJAX, slide transitions
│       └── validate.js               ← jQuery Validate plugin
└── Multistep Responsive Form - Html5 CSS3 Bootstrap5.html   ← Documentation file

Note:

This form uses AJAX submission — no PHP backend script is included. The form was built entirely with HTML5, CSS3, Bootstrap 5, and jQuery. To handle actual form data on a live server, connect the AJAX call in index.js to your own backend endpoint.