HTML
CSS
JS
Run
<h1 class="text-lg font-bold text-gray-700 leading-tight text-center mt-12 mb-5">Form Wizard - Multi Step Form</h1> <form id="signUpForm" class="p-12 shadow-md rounded-2xl bg-white mx-auto border-solid border-2 border-gray-100 mb-8" action="#!"> <!-- start step indicators --> <div class="form-header flex gap-3 mb-4 text-xs text-center"> <span class="stepIndicator flex-1 pb-8 relative">Account Setup</span> <span class="stepIndicator flex-1 pb-8 relative">Social Profiles</span> <span class="stepIndicator flex-1 pb-8 relative">Personal Details</span> </div> <!-- end step indicators --> <!-- step one --> <div class="step"> <p class="text-md text-gray-700 leading-tight text-center mt-8 mb-5">Create your account</p> <div class="mb-6"> <input type="email" placeholder="Email Address" name="email" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="password" placeholder="Password" name="password" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="password" placeholder="Confirm Password" name="password" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> </div> <!-- step two --> <div class="step"> <p class="text-md text-gray-700 leading-tight text-center mt-8 mb-5">Your presence on the social network</p> <div class="mb-6"> <input type="text" placeholder="Linked In" name="linkedin" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="text" placeholder="Twitter" name="twitter" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="text" placeholder="Facebook" name="facebook" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> </div> <!-- step three --> <div class="step"> <p class="text-md text-gray-700 leading-tight text-center mt-8 mb-5">We will never sell it</p> <div class="mb-6"> <input type="text" placeholder="Full name" name="fullname" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="text" placeholder="Mobile" name="mobile" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> <div class="mb-6"> <input type="text" placeholder="Address" name="address" class="w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200" oninput="this.className = 'w-full px-4 py-3 rounded-md text-gray-700 font-medium border-solid border-2 border-gray-200'" /> </div> </div> <!-- start previous / next buttons --> <div class="form-footer flex gap-3"> <button type="button" id="prevBtn" class="flex-1 focus:outline-none border border-gray-300 py-2 px-5 rounded-lg shadow-sm text-center text-gray-700 bg-white hover:bg-gray-100 text-lg" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" class="flex-1 border border-transparent focus:outline-none p-3 rounded-md text-center text-white bg-indigo-600 hover:bg-indigo-700 text-lg" onclick="nextPrev(1)">Next</button> </div> <!-- end previous / next buttons --> </form> <!-- tailwind css --> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" /> <!-- google font --> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
body{ font-family: 'Open Sans', sans-serif; } #signUpForm { max-width: 500px; } #signUpForm .form-header .stepIndicator.active { font-weight: 600; } #signUpForm .form-header .stepIndicator.finish { font-weight: 600; color: #5a67d8; } #signUpForm .form-header .stepIndicator::before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 9; width: 20px; height: 20px; background-color: #c3dafe; border-radius: 50%; border: 3px solid #ebf4ff; } #signUpForm .form-header .stepIndicator.active::before { background-color: #a3bffa; border: 3px solid #c3dafe; } #signUpForm .form-header .stepIndicator.finish::before { background-color: #5a67d8; border: 3px solid #c3dafe; } #signUpForm .form-header .stepIndicator::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 100%; height: 3px; background-color: #f3f3f3; } #signUpForm .form-header .stepIndicator.active::after { background-color: #a3bffa; } #signUpForm .form-header .stepIndicator.finish::after { background-color: #5a67d8; } #signUpForm .form-header .stepIndicator:last-child:after { display: none; } #signUpForm input.invalid { border: 2px solid #ffaba5; } #signUpForm .step { display: none; }
<script>var currentTab = 0; // Current tab is set to be the first tab (0) showTab(currentTab); // Display the current tab function showTab(n) { // This function will display the specified tab of the form... var x = document.getElementsByClassName("step"); x[n].style.display = "block"; //... and fix the Previous/Next buttons: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; } if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; } //... and run a function that will display the correct step indicator: fixStepIndicator(n) } function nextPrev(n) { // This function will figure out which tab to display var x = document.getElementsByClassName("step"); // Exit the function if any field in the current tab is invalid: if (n == 1 && !validateForm()) return false; // Hide the current tab: x[currentTab].style.display = "none"; // Increase or decrease the current tab by 1: currentTab = currentTab + n; // if you have reached the end of the form... if (currentTab >= x.length) { // ... the form gets submitted: document.getElementById("signUpForm").submit(); return false; } // Otherwise, display the correct tab: showTab(currentTab); } function validateForm() { // This function deals with validation of the form fields var x, y, i, valid = true; x = document.getElementsByClassName("step"); y = x[currentTab].getElementsByTagName("input"); // A loop that checks every input field in the current tab: for (i = 0; i < y.length; i++) { // If a field is empty... if (y[i].value == "") { // add an "invalid" class to the field: y[i].className += " invalid"; // and set the current valid status to false valid = false; } } // If the valid status is true, mark the step as finished and valid: if (valid) { document.getElementsByClassName("stepIndicator")[currentTab].className += " finish"; } return valid; // return the valid status } function fixStepIndicator(n) { // This function removes the "active" class of all steps... var i, x = document.getElementsByClassName("stepIndicator"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); } //... and adds the "active" class on the current step: x[n].className += " active"; }</script>
Press Ctrl+Space Key for Auto complete and Intelli Sense
