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

4.5k

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

2 years ago

15.1k
Apply Coupon Code form

Author:
Lyra Ravensong

1 year ago

8.1k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

11 months ago

2k
Responsive Form2

Author:
ABDO-SY

3 months ago

480
Sign up form

Author:
Rajesh Maheshwari

3 months ago

403
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

1 year ago

1.9k
Register form

Author:
Maxim

5 months ago

840
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11.1k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

2 years ago

8.5k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

1 year ago

12.2k
Number counter input

Author:
Prem..

2 years ago

15.5k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

6.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components