Home
Quentin Rivers
Multi-Step Form Wizard

Multi-Step Form Wizard

Working Multi-Step Form more complex forms.
made with tailwind CSS v3 and javascript

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Form Widget

Author Quentin Rivers

Fork Fullscreen

<div class="bg-gray-100 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow-lg p-6 md:p-10 max-w-3xl mx-auto">
      <h1 class="text-3xl font-bold text-center mb-8">Account Setup Wizard</h1>

<div class="mb-8">
        <div class="flex justify-between mb-2">
          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200" id="step1">
                        Personal Info
                    </span>
          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200 opacity-50" id="step2">
                        Account Details
                    </span>
          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200 opacity-50" id="step3">
                        Preferences
                    </span>
        </div>
        <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
          <div id="progress-bar"
            class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500 w-1/3 transition-all duration-500 ease-in-out">
          </div>
        </div>
      </div>

<form id="multi-step-form">
        
        <div id="step-1" class="step">
          <div class="mb-6">
            <label for="fullName" class="block mb-2 text-sm font-medium text-gray-900">Full Name</label>
            <input type="text" id="fullName" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
          <div class="mb-6">
            <label for="email" class="block mb-2 text-sm font-medium text-gray-900">Email Address</label>
            <input type="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
          <div class="mb-6">
            <label for="phone" class="block mb-2 text-sm font-medium text-gray-900">Phone Number</label>
            <input type="tel" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
        </div>

<div id="step-2" class="step hidden">
          <div class="mb-6">
            <label for="username" class="block mb-2 text-sm font-medium text-gray-900">Username</label>
            <input type="text" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
          <div class="mb-6">
            <label for="password" class="block mb-2 text-sm font-medium text-gray-900">Password</label>
            <input type="password" id="password" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
          <div class="mb-6">
            <label for="confirmPassword" class="block mb-2 text-sm font-medium text-gray-900">Confirm Password</label>
            <input type="password" id="confirmPassword" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5" required>
          </div>
        </div>

<div id="step-3" class="step hidden">
          <div class="mb-6">
            <label class="block mb-2 text-sm font-medium text-gray-900">Preferred Contact Method</label>
            <div class="flex items-center mb-4">
              <input id="contact-email" type="radio" name="contact" value="email" class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 focus:ring-2">
              <label for="contact-email" class="ml-2 text-sm font-medium text-gray-900">Email</label>
            </div>
            <div class="flex items-center">
              <input id="contact-phone" type="radio" name="contact" value="phone" class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 focus:ring-green-500 focus:ring-2">
              <label for="contact-phone" class="ml-2 text-sm font-medium text-gray-900">Phone</label>
            </div>
          </div>
          <div class="mb-6">
            <label for="interests" class="block mb-2 text-sm font-medium text-gray-900">Interests (select all that apply)</label>
            <select id="interests" multiple class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5">
                            <option value="technology">Technology</option>
                            <option value="finance">Finance</option>
                            <option value="health">Health & Wellness</option>
                            <option value="travel">Travel</option>
                            <option value="food">Food & Cooking</option>
                        </select>
          </div>
          <div class="flex items-center mb-6">
            <input id="newsletter" type="checkbox" class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500">
            <label for="newsletter" class="ml-2 text-sm font-medium text-gray-900">Subscribe to newsletter</label>
          </div>
        </div>

<div class="flex justify-between mt-8">
          <button type="button" id="prevBtn" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 focus:outline-none focus:shadow-outline hidden">Previous</button>
          <button type="button" id="nextBtn" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 focus:outline-none focus:shadow-outline">Next</button>
          <button type="submit" id="submitBtn" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 focus:outline-none focus:shadow-outline hidden">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

prevBtn.classList.toggle('hidden', step === 1);
            nextBtn.classList.toggle('hidden', step === 3);
            submitBtn.classList.toggle('hidden', step !== 3);
        }

function validateStep(step) {
            const currentStepElement = document.getElementById(`step-${step}`);
            const inputs = currentStepElement.querySelectorAll('input[required], select[required]');
            let isValid = true;

inputs.forEach(input => {
                if (!input.value) {
                    isValid = false;
                    input.classList.add('border-red-500');
                } else {
                    input.classList.remove('border-red-500');
                }
            });

if (step === 2) {
                const password = document.getElementById('password');
                const confirmPassword = document.getElementById('confirmPassword');
                if (password.value !== confirmPassword.value) {
                    isValid = false;
                    confirmPassword.classList.add('border-red-500');
                    alert("Passwords do not match");
                }
            }

return isValid;
        }

nextBtn.addEventListener('click', () => {
            if (validateStep(currentStep)) {
                currentStep++;
                showStep(currentStep);
            }
        });

prevBtn.addEventListener('click', () => {
            currentStep--;
            showStep(currentStep);
        });

form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (validateStep(currentStep)) {
                alert('Form submitted successfully!');
                // Here you would typically send the form data to a server
            }
        });

showStep(currentStep);
</script>

Related Examples

WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

3 years ago

15.9k
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Joost Hietbrink

11 months ago

1k
Form for editing items

Author:
Sophia Baker

3 years ago

17.9k
Forgot password form
Useful form for sending password reset link

Author:
Anonymous

1 year ago

1.9k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

Author:
wavy kits

5 months ago

293
Credit card form 2

Author:
Oliver Hansen

3 years ago

14.8k
Simple Form

Author:
Mr Robot

3 years ago

10.2k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

3 years ago

45k
Appointment booking form

Author:
Leif99

3 years ago

18.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.6k
3D Login form
Made a responsive and the 3d animative

Author:
Sufyan jutt

1 month ago

51

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components