Build Multi-Step Forms Fast with Formloop JavaScript Library

Formloop is a lightweight multi-step form JavaScript library that breaks down long, complex forms into a series of smaller, manageable steps.

It helps you build a better user experience for things like registration flows, application forms, e-commerce checkouts, or surveys.

You just add some HTML data attributes to your existing HTML form fields, and it works.

Features:

• Zero-configuration setup: Works out of the box using data-form attributes.
• Step-by-step progression: Manages the display and flow of form sections.
• Built-in validation: Leverages native HTML5 validation to check fields before proceeding.
• Simple navigation: Supports both “next” and “back” buttons between steps.

How to use it:

1. Download the Formloop package and load the formloop.min.js script in the document.

<script src="../dist/formloop.min.js"></script>

2. The library works by reading the following data-* attributes in your HTML. You don’t need to write any JavaScript to connect it.

• data-form="multi-step": Applied to the main form element to enable Formloop functionality.
• data-form="step": Wraps each individual step content. Only one step displays at a time.
• data-form="next-btn": Triggers validation and advances to the next step.
• data-form="back-btn": Returns to the previous step without validation.
• data-form="submit-btn": Validates the current step and submits the form if valid.
• data-validation="error": Marks elements as error message containers.
• data-for="input-name": Links error messages to specific form fields using the input’s name attribute.

<form data-form="multi-step" method="POST" action="/your-api-endpoint">
  <!-- Step 1 -->
  <div class="form-step" data-form="step">
    <h2>Step 1: Personal Info</h2>
    <div class="form-group">
      <label for="name">Full Name</label>
      <input id="name" name="name" type="text" required />
      <p data-validation="error" data-for="name">Name is required.</p>
    </div>
    <div class="form-group">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" required />
      <p data-validation="error" data-for="email">
        Valid email is required.
      </p>
    </div>
    <div class="form-group">
      <label for="phone">Phone</label>
      <input id="phone" name="phone" type="tel" required />
      <p data-validation="error" data-for="phone">
        Phone number is required.
      </p>
    </div>
    <div class="button-row">
      <span></span>
      <button type="button" data-form="next-btn">Next</button>
    </div>
  </div>
  <!-- Step 2 -->
  <div class="form-step" data-form="step">
    <h2>Step 2: Job Info</h2>
    <div class="form-group">
      <label for="position">Position</label>
      <input id="position" name="position" type="text" required />
      <p data-validation="error" data-for="position">
        Position is required.
      </p>
    </div>
    <div class="form-group">
      <label for="experience">Years of Experience</label>
      <input
        id="experience"
        name="experience"
        type="number"
        min="0"
        required
      />
      <p data-validation="error" data-for="experience">
        Experience is required.
      </p>
    </div>
    <div class="button-row">
      <button type="button" data-form="back-btn">Back</button>
      <button type="button" data-form="next-btn">Next</button>
    </div>
  </div>
  <!-- Step 3 -->
  <div class="form-step" data-form="step">
    <h2>Step 3: Resume</h2>
    <div class="form-group">
      <label for="linkedin">LinkedIn or Resume URL</label>
      <input id="linkedin" name="linkedin" type="url" required />
      <p data-validation="error" data-for="linkedin">URL is required.</p>
    </div>
    <div class="form-group">
      <label for="cover">Cover Letter</label>
      <textarea id="cover" name="cover" rows="4"></textarea>
    </div>
    <div class="button-row">
      <button type="button" data-form="back-btn">Back</button>
      <button type="submit" data-form="submit-btn">Submit</button>
    </div>
  </div>
</form>

3. The library leverages the browser’s native form handling. It intercepts the user’s intent to submit (the click on the submit button) and runs one final validation check. If the check fails, it cancels the event. If it passes, it does nothing, allowing the browser to proceed with the submission as it normally would.