Multi-Step Ajax Survey Form is a fully responsive, animated multi-step satisfaction survey form built with HTML5, CSS3, Bootstrap 5, and jQuery. It features AJAX form submission with no page reloads, interactive emoji satisfaction ratings, smooth slide transitions between steps, an animated gradient background, jQuery Validation v1.22, and a W3C-valid pure HTML codebase — no PHP required to open or preview. The form is divided into 4 clear steps:

Step 1 — Personal Info Collects first name, last name, email, mobile number, country, and service selection. All fields are validated using jQuery Validate v1.22 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 applies a springy animation and shows a live colour-coded feedback bar. A rating must be selected to advance. Step 3 — Message / Feedback An optional free-text textarea for comments. A live character counter updates as the user types (maximum 500 characters; turns red after 450). Clicking Submit triggers the AJAX call with a loading spinner on the button. Step 4 appears on completion — no page reload. Step 4 — Success Screen An animated green checkmark bounces in via CSS keyframe animation. A confetti particle effect plays twice. A thank-you message confirms the submission. Key Features:

Pure HTML5 entry point — open index.html directly in any browser, no server needed Bootstrap 5 responsive grid and utilities 4-step survey flow with smooth slide transitions Interactive emoji satisfaction rating cards Live colour-coded progress bar with feedback message Animated step progress indicator with pulsing active state jQuery Validation v1.22 (latest) on all required fields FontAwesome icon-prefixed input fields Live character counter on feedback textarea (max 500) AJAX form submission — no page reloads required Loading spinner on Submit button during AJAX request Confetti success animation on Step 4 Animated gradient background with CSS keyframes Separated JS concerns: validate-config.js (rules) and index.js (transitions) Zero inline styles — all presentation in style.css 100% responsive and mobile-friendly W3C valid HTML codebase Fully documented with a professional sidebar documentation page Well-commented and easy to customise

Files Included: index.html, style.css, validate-config.js, index.js, confetti.js, validate.js (v1.22), validate.method.js, jquery.min.js, bootstrap.min.css, bootstrap.bundle.min.js, all.min.css (Font Awesome), full Documentation HTML