Stepper form is a great and useful feature regarding user experience, especially if you have a long form. In this post, I will create a cool stepper form with HTML, CSS and JavaScript.

You can check it live on Codepen : Stepper Form

Sorry for the interrupt!

If you’re interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It’s an affiliate link, so by purchasing, you support the blog at the same time.

1. HTML

As you can see, the HTML file is relatively simple with several classes i might say.

<main>
  <div class="stepper">
    <div class="step--1 step-active">Step 1</div>
    <div class="step--2">Step 2</div>
    <div class="step--3">Step 3</div>
    <div class="step--4">Finish</div>
  </div>
  <form class="form form-active">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Personal Info
      </h1>

      <p class="form--header-text">
        Tell us more about you.
      </p>
    </div>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Email" />
    <input type="text" placeholder="Password" />
    <button class="form__btn" id="btn-1">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Company Info
      </h1>

      <p class="form--header-text">
        Tell us more about your company.
      </p>
    </div>

    <input type="text" placeholder="Company Name" />
    <input type="text" placeholder="Job title" />
    <input type="text" placeholder="Location" />
    <button class="form__btn" id="btn-2-prev">Previous</button>
    <button class="form__btn" id="btn-2-next">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Social account
      </h1>

      <p class="form--header-text">
        Tell us more about your social account.
      </p>
    </div>
    <input type="text" placeholder="Linkedin" />
    <input type="text" placeholder="Twitter" />
    <input type="text" placeholder="Github" />
    <button class="form__btn" id="btn-3">Submit</button>
  </form>
  <div class="form--message"></div>
</main>

Beside the main tag, i firstly define a div that hold the stepper element. Then, we have three forms with different button’s id which will make soon the stepper effect with JavaScript.

#css #html #javascript