advanced forms
Tailwind CSS Form wizard
The Form Wizard simplifies multi-step forms by guiding users through each section step-by-step. It breaks down complex forms into manageable parts, making the process straightforward and user-friendly.
Basic vertical form Wizard.
We have used stepper for the the form wizard you can refer Stepper plugin for more details.
- 1 Account Details
- 2 Personal Info
- 3 Social Links
<!-- Stepper -->
<div data-stepper="" class="bg-base-100 w-full rounded-lg p-4 shadow" id="wizard-validation">
<!-- Stepper Nav -->
<ul class="relative flex flex-col gap-2 md:flex-row">
<li class="group flex flex-1 flex-col items-center gap-2 md:flex-row" data-stepper-nav-item='{ "index": 1 }'>
<span class="min-h-7.5 min-w-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm md:flex-row">
<span
class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium"
>
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">1</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Account Details</span>
</span>
<div
class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 h-px w-full group-last:hidden max-md:mt-2 max-md:h-8 max-md:w-px md:flex-1"
></div>
</li>
<li class="group flex flex-1 flex-col items-center gap-2 md:flex-row" data-stepper-nav-item='{ "index": 2 }'>
<span class="min-h-7.5 min-w-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm md:flex-row">
<span class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium" >
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">2</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Personal Info</span>
</span>
<div class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 h-px w-full group-last:hidden max-md:mt-2 max-md:h-8 max-md:w-px md:flex-1" ></div>
</li>
<li class="group flex flex-1 flex-col items-center gap-2 md:flex-row" data-stepper-nav-item='{ "index": 3 }'>
<span class="min-h-7.5 min-w-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm md:flex-row">
<span class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium" >
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">3</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Social Links</span>
</span>
<div class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 h-px w-full group-last:hidden max-md:mt-2 max-md:h-8 max-md:w-px md:flex-1" ></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<form id="wizard-validation-form" class="needs-validation mt-5 sm:mt-8" novalidate>
<!-- Account Details -->
<div id="account-details-validation" class="space-y-5" data-stepper-content-item='{ "index": 1 }'>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">First Name</span>
</div>
<input type="text" placeholder="John" class="input" required />
<span class="error-message">Please enter your name.</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Last Name</span>
</div>
<input type="text" placeholder="Doe" class="input" required />
<span class="error-message">Please enter your last name.</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<!-- Email and password -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">Email</span>
</div>
<input type="email" class="input" placeholder="john@gmail.com" aria-label="john@gmail.com" required="" />
<span class="error-message">Please enter a valid email</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Password</span>
</div>
<div class="input-group">
<input id="password" type="password" class="input" placeholder="Enter password" required />
<span class="input-group-text">
<button type="button" data-toggle-password='{ "target": "#password" }' class="block">
<span class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-4 flex-shrink-0" ></span>
<span class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-4 flex-shrink-0" ></span>
</button>
</span>
</div>
<span class="error-message">Please enter a valid password</span>
<span class="success-message">Looks good!</span>
</label>
</div>
</div>
<!-- End Account Details -->
<!-- Personal Info -->
<div id="personal-info-validation" class="space-y-5" data-stepper-content-item='{ "index": 2 }' style="display: none" >
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">Profile Pic</span>
</div>
<input type="file" class="input" required />
<span class="error-message">Please select the file</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">DOB</span>
</div>
<input type="text" class="input jsPickr" placeholder="YYYY-MM-DD" required />
<span class="error-message">Please select your DOB</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<div class="label">
<span class="label-text">Pick your Country</span>
</div>
<select class="select" id="country" required>
<option value="">Select Country</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="france">France</option>
<option value="australia">Australia</option>
<option value="spain">Spain</option>
</select>
<span class="error-message">Please select your country</span>
<span class="success-message">Looks good!</span>
</div>
<div>
<div class="label">
<span class="label-text">Gender</span>
</div>
<div class="flex gap-4">
<label class="form-control flex items-center gap-3">
<input type="radio" name="gender" class="radio radio-primary" required />
<span class="label cursor-pointer">
<span class="label-text text-base">Male</span>
</span>
</label>
<label class="form-control flex items-center gap-3">
<input type="radio" name="gender" class="radio radio-primary" required />
<span class="label cursor-pointer">
<span class="label-text text-base">Female</span>
</span>
</label>
</div>
<span class="error-message">Please select your Gender</span>
<span class="success-message">Looks good!</span>
</div>
</div>
</div>
<!-- End Personal Info -->
<!-- Social Links -->
<div id="social-links-validation" class="space-y-5" data-stepper-content-item='{ "index": 3}' style="display: none">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">TWITTER</span>
</div>
<input type="text" name="formValidationTwitter" id="formValidationTwitter" class="input" placeholder="https://twitter.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">FACEBOOK</span>
</div>
<input type="text" name="formValidationFacebook" id="formValidationFacebook" class="input" placeholder="https://facebook.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">GOOGLE+</span>
</div>
<input type="text" name="formValidationGoogle" id="formValidationGoogle" class="input" placeholder="https://plus.google.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">LINKEDIN</span>
</div>
<input type="text" name="formValidationLinkedIn" id="formValidationLinkedIn" class="input" placeholder="https://linkedin.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
</div>
</div>
<!-- End Social Links -->
<!-- Final Content -->
<div data-stepper-content-item='{ "isFinal": true }' style="display: none">
<div class="bg-base-200/50 flex h-48 items-center justify-center rounded-xl p-4">
<h3 class="text-base-content/50 text-3xl">Your Form has been Submitted</h3>
</div>
</div>
<!-- End Final Content -->
<!-- Button Group -->
<div class="mt-5 flex items-center justify-between gap-x-2">
<button type="button" class="btn btn-primary btn-prev max-sm:btn-square" data-stepper-back-btn="">
<span class="icon-[tabler--chevron-left] text-primary-content size-5 rtl:rotate-180"></span>
<span class="max-sm:hidden">Back</span>
</button>
<button type="button" class="btn btn-primary btn-next max-sm:btn-square" data-stepper-next-btn="">
<span class="max-sm:hidden">Next</span>
<span class="icon-[tabler--chevron-right] text-primary-content size-5 rtl:rotate-180"></span>
</button>
<button type="button" class="btn btn-primary" data-stepper-finish-btn="" style="display: none">Finish</button>
<button type="reset" class="btn btn-primary" data-stepper-reset-btn="" style="display: none">Reset</button>
</div>
<!-- End Button Group -->
</form>
<!-- End Stepper Content -->
</div>
<!-- End Stepper --><script>
window.addEventListener('load', function () {
// Initialize flatpickr
flatpickr('.jsPickr', {
allowInput: true,
monthSelectorType: 'static'
})
})
</script>Horizontal form wizard example.
- 1 Account Details
- 2 Personal Info
- 3 Social Links
<div data-stepper="" class="bg-base-100 flex w-full items-start gap-10 rounded-lg p-4 shadow max-sm:flex-wrap max-sm:justify-center" id="wizard-validation-horizontal" >
<!-- Stepper Nav -->
<ul class="relative flex flex-col gap-y-2">
<li class="group flex flex-1 flex-col items-center" data-stepper-nav-item='{ "index": 1 }'>
<span class="min-h-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm">
<span class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium" >
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">1</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Account Details</span>
</span>
<div class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 mt-2 h-8 w-px group-last:hidden" ></div>
</li>
<li class="group flex flex-1 flex-col items-center" data-stepper-nav-item='{ "index": 2 }'>
<span class="min-h-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm">
<span class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium" >
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">2</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Personal Info</span>
</span>
<div class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 mt-2 h-8 w-px group-last:hidden" ></div>
</li>
<li class="group flex flex-1 flex-col items-center" data-stepper-nav-item='{ "index": 3 }'>
<span class="min-h-7.5 group inline-flex flex-col items-center gap-2 align-middle text-sm">
<span class="stepper-active:bg-primary stepper-active:shadow stepper-active:text-primary-content stepper-success:bg-primary stepper-success:shadow stepper-success:text-primary-content stepper-error:bg-error stepper-error:text-error-content stepper-completed:bg-success stepper-completed:group-focus:bg-success bg-base-200/50 text-base-content/90 group-focus:bg-base-content/20 size-7.5 flex flex-shrink-0 items-center justify-center rounded-full font-medium" >
<span class="stepper-success:hidden stepper-error:hidden stepper-completed:hidden text-sm">3</span>
<span class="icon-[tabler--check] stepper-success:block hidden size-4 flex-shrink-0"></span>
<span class="icon-[tabler--x] stepper-error:block hidden size-4 flex-shrink-0"></span>
</span>
<span class="text-base-content/90 text-nowrap font-medium">Social Links</span>
</span>
<div class="stepper-success:bg-primary stepper-completed:bg-success bg-base-content/20 mt-2 h-8 w-px group-last:hidden" ></div>
</li>
<!-- End Item -->
</ul>
<!-- End Stepper Nav -->
<!-- Stepper Content -->
<form id="wizard-validation-form-horizontal" class="form-validate w-full p-3">
<!-- Account Details -->
<div id="account-details-validation" class="space-y-5" data-stepper-content-item='{ "index": 1 }'>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">First Name</span>
</div>
<input type="text" placeholder="John" class="input" required />
<span class="error-message">Please enter your name.</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Last Name</span>
</div>
<input type="text" placeholder="Doe" class="input" required />
<span class="error-message">Please enter your last name.</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<!-- Email and password -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">Email</span>
</div>
<input type="email" class="input" placeholder="john@gmail.com" aria-label="john@gmail.com" required="" />
<span class="error-message">Please enter a valid email</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">Password</span>
</div>
<div class="input-group">
<input id="passwordHorizontal" type="password" class="input" placeholder="Enter password" required />
<span class="input-group-text">
<button type="button" data-toggle-password='{ "target": "#password" }' class="block">
<span class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-4 flex-shrink-0" ></span>
<span class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-4 flex-shrink-0" ></span>
</button>
</span>
</div>
<span class="error-message">Please enter a valid password</span>
<span class="success-message">Looks good!</span>
</label>
</div>
</div>
<!-- End Account Details -->
<!-- Personal Info -->
<div id="personal-info-validation" class="space-y-5" data-stepper-content-item='{ "index": 2 }' style="display: none" >
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">Profile Pic</span>
</div>
<input type="file" class="input" required />
<span class="error-message">Please select the file</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">DOB</span>
</div>
<input type="text" class="input jsPickr" placeholder="YYYY-MM-DD" required />
<span class="error-message">Please select your DOB</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="form-control">
<div class="label">
<span class="label-text">Pick your Country</span>
</div>
<select class="select" id="country-horizontal" required>
<option value="">Select Country</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="france">France</option>
<option value="australia">Australia</option>
<option value="spain">Spain</option>
</select>
<span class="error-message">Please select your country</span>
<span class="success-message">Looks good!</span>
</div>
<div>
<div class="label">
<span class="label-text">Gender</span>
</div>
<div class="flex gap-4">
<label class="form-control flex items-center gap-3">
<input type="radio" name="gender" class="radio radio-primary" required />
<span class="label cursor-pointer">
<span class="label-text text-base">Male</span>
</span>
</label>
<label class="form-control flex items-center gap-3">
<input type="radio" name="gender" class="radio radio-primary" required />
<span class="label cursor-pointer">
<span class="label-text text-base">Female</span>
</span>
</label>
</div>
<span class="error-message">Please select your Gender</span>
<span class="success-message">Looks good!</span>
</div>
</div>
</div>
<!-- End Personal Info -->
<!-- Social Links -->
<div id="social-links-validation" class="space-y-5" data-stepper-content-item='{ "index": 3}' style="display: none">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">TWITTER</span>
</div>
<input type="text" name="formValidationTwitterHorizontal" id="formValidationTwitterHorizontal" class="input" placeholder="https://twitter.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">FACEBOOK</span>
</div>
<input type="text" name="formValidationFacebookHorizontal" id="formValidationFacebookHorizontal" class="input" placeholder="https://facebook.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
</div>
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<label class="form-control">
<div class="label">
<span class="label-text">GOOGLE+</span>
</div>
<input type="text" name="formValidationGoogleHorizontal" id="formValidationGoogleHorizontal" class="input" placeholder="https://plus.google.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
<label class="form-control">
<div class="label">
<span class="label-text">LINKEDIN</span>
</div>
<input type="text" name="formValidationLinkedInHorizontal" id="formValidationLinkedInHorizontal" class="input" placeholder="https://linkedin.com/abc" />
<span class="error-message">Please provide a valid URL</span>
<span class="success-message">Looks good!</span>
</label>
</div>
</div>
<!-- End Social Links -->
<!-- Final Content -->
<div data-stepper-content-item='{ "isFinal": true }' style="display: none">
<div class="border-base-content/40 bg-base-200/50 flex h-48 items-center justify-center rounded-xl border border-dashed p-4" >
<h3 class="text-base-content/50 text-3xl">Your Form has been Submitted</h3>
</div>
</div>
<!-- End Final Content -->
<!-- Button Group -->
<div class="mt-5 flex items-center justify-between gap-y-2">
<button type="button" class="btn btn-primary btn-prev max-sm:btn-square" data-stepper-back-btn="">
<span class="icon-[tabler--chevron-left] text-primary-content size-5 rtl:rotate-180"></span>
<span class="max-sm:hidden">Back</span>
</button>
<button type="button" class="btn btn-primary btn-next max-sm:btn-square" data-stepper-next-btn="">
<span class="max-sm:hidden">Next</span>
<span class="icon-[tabler--chevron-right] text-primary-content size-5 rtl:rotate-180"></span>
</button>
<button type="button" class="btn btn-primary" data-stepper-finish-btn="" style="display: none">Finish</button>
<button type="reset" class="btn btn-primary" data-stepper-reset-btn="" style="display: none">Reset</button>
</div>
<!-- End Button Group -->
</form>
<!-- End Stepper Content -->
</div>
<!-- End Stepper --><script>
window.addEventListener('load', function () {
// Initialize flatpickr
flatpickr('.jsPickr', {
allowInput: true,
monthSelectorType: 'static'
})
})
</script>
