Simple HTML JS Wizard Form (Free Download)

Welcome to a tutorial on how to create a wizard form with pure HTML and Javascript. Need to create a simple wizard form? Only to find crazy complex and bloated ones on the Internet? Here is a simple one that I made – Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

HTML JS WIZARD FORM

All right, let us now get into the example of building a simple wizard form with pure HTML and Javascript.

 

PART 1) THE HTML

wizard.html
<div id="wiz">
  <form class="step">
    <h3>STEP 1 - CHOOSE A MEME ANIMAL</h1>
    <label>
      <input type="radio" name="meme" value="Doge" required> Doge
    </label>
    <label>
      <input type="radio" name="meme" value="Cate" required> Cate
    </label>
    <input type="submit" value="Next">
  </form>
 
  <form class="step">
    <h3>STEP 2 - YOUR NAME & EMAIL</h1>
    <label>Name</label>
    <input type="text" name="name" required>
    <label>Email</label>
    <input type="email" name="email" required>
    <input type="button" class="back" value="Back">
    <input type="submit" value="Go!">
  </form>
</div>

Let us start by building the wizard form. No need to panic, keep calm and look carefully:

  • We are just putting multiple steps <form class="step"> into a <div id="wiz"> wrapper.
  • Just build the forms “as usual” – There must be a <input type="submit"> button for every step.
  • It is optional to add a back button – <input type="button" class="back">.

That’s all.

 

 

PART 2) THE CSS

wizard.css
/* (A) ENTIRE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
 
/* (B) WIZARD FORM */
#wiz {
  max-width: 600px;
  padding: 15px;
  border: 1px solid #eee;
  background: #f7f7f7;
}
#wiz .step { display: none; }
#wiz .now { display: block !important; }
 
/* (C) WIZARD FORM FIELDS */
#wiz label, #wiz input[type=text], #wiz input[type=email] {
  display: block;
  width: 100%;
}
#wiz label { margin: 10px 0; }
#wiz input[type=text], #wiz input[type=email] {
  border: 1px solid #f2f2f2;
  padding: 10px;
}
#wiz input[type=button], #wiz input[type=submit] {
  padding: 10px;
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #2d32d5;
  cursor: pointer;
}

The only functional part here is:

  • #wiz .step { display: none; }
  • #wiz .now { display: block !important; }

The rest are cosmetics – Feel free to change them however you wish.

 

 

PART 3) THE JAVASCRIPT

wizard.js
function wiz () {
  // (A) FLAGS & PROPERITES
  let hSteps = document.querySelectorAll("#wiz form.step"), // wizard steps
      steps = hSteps.length - 1, // total number of steps
      now = 0; // current step
 
  // (B) LAST STEP / NEXT STEP / SUBMIT
  let proceed = next => {
    // (B1) UPDATE CURRENT STEP
    if (next) { now++; } else { now--; }
 
    // (B2) THIS IS THE LAST STEP
    // @TODO - COMPLETE THIS ON YOUR OWN!
    if (now>steps) {
      /* (B2-1) AJAX SUBMIT?
      let form = new FormData();
      for (let s of hSteps) {
        for (let [k,v] of new FormData(s)) { form.append(k,v); }
      }
      fetch("SERVER-SCRIPT", { method:"post", body:form })
      .then(res => res.text())
      .then(txt => alert(txt));
      */
 
      /* (B2-2) REDIRECT WITH URL SEARCH PARAMS?
      let params = new URLSearchParams();
      for (let s of hSteps) {
        for (let [k,v] of new FormData(s)) { params.append(k,v); }
      }
      location.href = "URL?" + params.toString();
      */
    }
 
    // (B3) SHOW LAST/NEXT STEP
    else { for (let i=0; i<=steps; i++) {
      if (i==now) { hSteps[i].classList.add("now"); }
      else { hSteps[i].classList.remove("now"); }
    }}
 
    // (B4) PREVENT DEFAULT HTML FORM SUBMIT
    return false;
  };
 
  // (C) AUTO ATTACH LAST STEP / NEXT STEP / SUBMIT
  for (let i=0; i<=steps; i++) {
    // (C1) LAST STEP - IF ANY
    let back = hSteps[i].querySelector(".back");
    if (back) { back.onclick = () => proceed(); } 
 
    // (C2) NEXT STEP
    hSteps[i].onsubmit = () => proceed(true);
  }
 
  // (D) READY - SHOW FIRST STEP
  hSteps[0].classList.add("now");
}
window.addEventListener("DOMContentLoaded", wiz);

TLDR – Just change (B2) to your own, do something when the user completes the entire wizard form.

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

Works on all modern “Grade A” browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *