Multi Steps form

Creating multi step form in html CSS and JavaScript. this multi step form is include five basic steps at the bottom of form form no represented by number which is clearly mention in details whenever a user click on next button the form will be move to one step forward.



Structure of Multi Step form 1 five step form which include personal data, address, contact password 2 next and previous button were added for moving the form 3 save button are added at the center between next and previous button to save the current data of the user 4. form number were showing at the bottom of page

Watch video for more details

HTML Structure of Multi steps form
<form id="regForm" action="/">
  <div class="boundary">
    <h1>Multi Steps Form</h1>
  <!-- One "tab" for each step in the form: -->
  <div class="tab"> <h2>Name</h2>
    <p><input placeholder="First name" name="fname" required="name is required"></p>
    <p><input placeholder="Middle name" oninput="this.className = ''" name="fname" required=""></p>
    <p><input placeholder="Last name" oninput="this.className = ''" name="lname" required=""></p>
  </div>
  <div class="tab"> <h2>Address</h2>
    <p><input placeholder="Country" oninput="this.className = 'input'" name="fname" required></p>
    <p><input placeholder="City" oninput="this.className = ''" name="lname" required></p>
    <p><input placeholder="Town" oninput="this.className = ''" name="lname" required></p>
  </div>
  <div class="tab"> <h2>Contact</h2>
    <p><input placeholder="hitecpro@gamil.com" oninput="this.className = ''" name="email" required></p>
    <p><input placeholder="+1212-456-7890" oninput="this.className = ''" name="phone" required></p>
  </div>
  <div class="tab"> <h2>Date Of Birth</h2>
    <p><input type="date" placeholder="dd" oninput="this.className = ''" name="dd"></p>
    <p><input placeholder="Birth place" oninput="this.className = ''" name="nn" required></p>
  </div>
  <div class="tab"> <h2>Create Password</h2>
    <p><input placeholder="Password" oninput="this.className = ''" name="password" type="password" required></p>
    <p><input placeholder="Confirm password" oninput="this.className = ''" name="pword" type="password" required></p>
  </div>
  <div class="btngroup">
    <div class="btn">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)"><i class="fa-solid fa-caret-left"></i></button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)"></button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)"><i class="fa-solid fa-caret-right"></i></button>
    </div>
  </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div class="fno">
    <span class="step">1</span>
    <span class="step">2</span>
    <span class="step">3</span>
    <span class="step">4</span>
    <span class="step">5</span>
  </div>
</form>

CSS Styling of Multi steps form
* {
   margin: 0;
   box-sizing: border-box;
   box-sizing: border-box;
  }
  body {
    background-color: #ffff;
    align-items: center;
    justify-content: center;
  }
  #regForm {
    background-color: rgb(5, 84, 129);
    margin: 60px auto;
    font-family: sans-serif;
    padding: 20px;
    width: 50%;
    min-width: 300px;
    box-shadow: 0px 10px 10px 0;
    border-radius: 20px;
  }
  #regForm:hover {
    transform: scale(1.02);
  }
  .boundary {
    border: 1px solid rgb(255, 255, 255);
    border-radius: 25px;
    box-shadow: 0 0 20px 0 #00c77b;
    padding: 10px;
    margin: 4px;
  }
  h1 {
    text-align: center;  
    color: white;
    font-size: 22px;
    font-family: sans-serif;
    font-weight: bold;
  }
  h2 {
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    margin: 2px 10px;
    font-size: 18px;
  }
  input {
    padding: 5px 10px;
    width: 100%;
    font-size: 17px;
    font-family: sans-serif;
    border-radius: 100px;
    border: none;
    margin: 5px auto;
  }
  input:hover {
    transition: all 300ms ease;
    border: 2px solid rgb(0, 128, 75);
  }
  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    border: 2px solid red;
    content: 'none';
  }
  /* Hide all steps by default: */
  .tab {
    display: none;
  }
  button {
    border: 1px solid rgb(0, 73, 49);
    padding: 2px 10px;
    font-size: 17px;
    font-family: sans-serif;
    cursor: pointer;
    border-radius: 100px;
  }
  button:hover {
    opacity: 0.8;
  }
  .btngroup {
    overflow: auto;
    margin: 7px 0 0 0;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  #prevBtn {
    background-color: #c2e0c7;
    position: relative;
    align-items: start;
  }
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 18px;
    width: 18px;
    margin: 0 3px;
    background-color: #dcf5ef;
    border: 1px solid red;
    border: none;  
    border-radius: 50%;
    display: inline-block;
    opacity: 0.3;
  }
  .fno {
    text-align: center;
    margin: 7px 0 0 0;
  }
  .step.active {
    opacity: 1;
    border: 1px solid green;
  }
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: white;
  }
  /*=========== media query ===========*/
  @media screen and (max-width:600px) {
    #regForm {
      margin: 10px auto;
      height: 100vh;
    }
  }

JavaScript Code of Multi steps form
// Current tab is set to be the first tab (0)
var currentTab = 0;

// Display the current tab
showTab(currentTab);
function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  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 = "Save";
  }
  //... 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("tab");
  // 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("regForm").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("tab");
  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("step")[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("step");
  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";
}

Comments

Post a Comment

Master Template

Login and Signup form/page

Image
Create an amazing over sliding login and signup page in html CSS for beginner and advance HTML CSS Login and Signup page / HTML CSS tutorial for beginner After completing watching this video you will be able to make a login and signup page in HTML CSS. To create Login and Signup page / form in HTML CSS just follow the following steps in this video I Demo to Login and sign up page II check the over sliding of login and sign up page III open VS code to build login and sign up page in HTML CSS IV Create index.html and style.css file in VS code V open index.html file to create login and signup page VI Open style.css file to design and style the Login and signup page VII check the output at the end of this video VIII So we have create our Login and Signup page in HTML CSS only Following are the link for source code Download Source Code Previous video links 1 Responsive web design template / html responsive web design https://youtube.com/shorts/rvq2lCy8Hrk 2 How to create re
Read more

Make Login and Signup form in bootstrap

Image
Create and make login and signup redirecting form in bootstrap. two button were place in the front of of form one button is login and one button is signup form with user profile. login and signup form were redirectable to each other by creating new account and login here when the user click on login here the form will call login form when the user click on create account the form will be signup form. Tutorials Of Login and signup form Download Source code
Read more