Create Engaging Multi-Step Forms with HTML, CSS, and JavaScript

Introduction

Welcome to ProgramMatek! In this article, we will explore the creation of multi-step forms using HTML, CSS, and JavaScript. We’ll delve into what multi-step forms are and when it’s appropriate to use them. By breaking long forms into manageable steps, we can enhance the user experience and improve conversions. So, let’s get started!

Multi Step Form Html

What are Multi-Step Forms and When Should You Use Them?

Multi-step forms are a way to divide lengthy forms into smaller, more digestible sections. This approach is particularly useful when dealing with forms that require a lot of information, such as registration or shipping forms. By implementing multi-step forms, you can make it easier for users to complete the form, ultimately enhancing their experience and increasing conversion rates.

Creating a Multi-Step Form in HTML

To create a multi-step form, we need to follow a structured HTML code. Below is an example of the basic HTML structure for a multi-step form:

<section>
  <div class="container">
    <form>
      <div class="step step-1 active">
        <div class="form-group">
          <label for="firstName">First Name</label>
          <input type="text" id="firstName" name="first-name" />
        </div>
        <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" id="lastName" name="last-name" />
        </div>
        <div class="form-group">
          <label for="nickName">Nick Name</label>
          <input type="text" id="nickName" name="nick-name" />
        </div>
        <button type="button" class="next-btn">Next</button>
      </div>
      <div class="step step-2">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" name="email" />
        </div>
        <div class="form-group">
          <label for="phone">Phone</label>
          <input type="number" id="phone" name="phone-number" />
        </div>
        <button type="button" class="previous-btn">Prev</button>
        <button type="button" class="next-btn">Next</button>
      </div>
      <div class="step step-3">
        <div class="form-group">
          <label for="country">Country</label>
          <input type="text" id="country" name="country" />
        </div>
        <div class="form-group">
          <label for="city">City</label>
          <input type="text" id="city" name="city" />
        </div>
        <div class="form-group">
          <label for="postCode">Post Code</label>
          <input type="text" id="postCode" name="post-code" />
        </div>
        <button type="button" class="previous-btn">Prev</button>
        <button type="submit" class="submit-btn">Submit</button>
      </div>
    </form>
  </div>
</section>

Styling the Multi-Step Form with CSS

To make our multi-step form visually appealing, we can apply some CSS styles. Here’s a sample CSS code snippet that you can use:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat";
}

section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aliceblue;
}

.container {
  max-width: 400px;
  width: 90%;
  padding: 20px;
  box-shadow: 0px 0px 20px #00000020;
  border-radius: 8px;
  background-color: white;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

.form-group {
  width: 100%;
  margin-top: 20px;
}

.form-group input {
  width: 100%;
  border: 1.5px solid rgba(128, 128, 128, 0.418);
  padding: 5px;
  font-size: 18px;
  margin-top: 5px;
  border-radius: 4px;
}

button.next-btn,
button.previous-btn,
button.submit-btn {
  float: right;
  margin-top: 20px;
  padding: 10px 30px;
  border: none;
  outline: none;
  background-color: rgb(180, 220, 255);
  font-family: "Montserrat";
  font-size: 18px;
  cursor: pointer;
}

button.previous-btn {
  float: left;
}

button.submit-btn {
  background-color: aquamarine;
}

JavaScript Code for Multi-Step Form Functionality

To add functionality to our multi-step form, we’ll use JavaScript. The following JavaScript code will handle the navigation between steps and form submission:

const steps = Array.from(document.querySelectorAll("form .step"));
const nextBtn = document.querySelectorAll("form .next-btn");
const prevBtn = document.querySelectorAll("form .previous-btn");
const form = document.querySelector("form");

nextBtn.forEach((button) => {
  button.addEventListener("click", () => {
    changeStep("next");
  });
});

prevBtn.forEach((button) => {
  button.addEventListener("click", () => {
    changeStep("prev");
  });
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputs = [];
  form.querySelectorAll("input").forEach((input) => {
    const { name, value } = input;
    inputs.push({ name, value });
  });
  console.log(inputs);
  form.reset();
});

function changeStep(btn) {
  let index = 0;
  const active = document.querySelector(".active");
  index = steps.indexOf(active);
  steps[index].classList.remove("active");
  if (btn === "next") {
    index++;
  } else if (btn === "prev") {
    index--;
  }
  steps[index].classList.add("active");
}

Conclusion

Congratulations! You’ve learned how to create engaging multi-step forms using HTML, CSS, and JavaScript. By breaking lengthy forms into smaller steps, you can greatly improve the user experience and increase conversion rates. Feel free to explore more frontend development knowledge on ProgramMatek’s website. Thank you for visiting our platform!

See also  Customwritings Com Check Paper For Plagiarism

FAQ OF Multi-Step Form