Step by step bootstrap form

692 23 November 2019

No Description Available

Abhishek Singh

~ onex

Step by step form is smart way to collect data, where we collect data from user in steps.

Related Elements

This pop up login form can be used in varius place where you want login without redirecting to other page.

Call to action button

let status = $(".status");
let prog = $(".progress-bar");
let steps = $(".step:not(.step.end)");
let proceed;
$(".next").click(function(e) {
  e.preventDefault();
  $(".prev")
    .show()
    .prop("disabled", false);
  $.each(steps, (i, e) => {
    if ($(e).css("display") == "block") {
      if ($(e).attr("validation") == "true") {
        validate(e);
      }
      if (proceed) {
        $(e)
          .hide()
          .next()
          .fadeIn()
          .removeClass("d-none");
        progress(e);
        if ($(e).index() == steps.length) {
          $(this).hide();
          $(".prev").hide();
        }
        return false;
      }
    }
  });
});
$(".prev").click(function(e) {
  e.preventDefault();
  $(".next")
    .show()
    .prop("disabled", false);
  $.each(steps, (i, e) => {
    if ($(e).css("display") == "block") {
      $(e)
        .hide()
        .prev()
        .fadeIn()
        .removeClass("d-none");
      console.log(
        $(e)
          .prev()
          .prev()
      );
      console.log($(e));
      progress(
        $(e)
          .prev()
          .prev()
      );
      if ($(e).index() - 1 == 1) {
        $(this).prop("disabled", true);
      }
      return false;
    }
  });
});
const progress = e => {
  let pos = (parseInt($(e).index()) / steps.length) * 100;
  if($(e).index() == 1){
     prog.parent().show();
  }
  if (pos == 100) {
    prog.addClass("bg-success");
  }
  prog
    .attr("valuenow", pos)
    .css("width", pos + "%");
};
const validate = step => {
  let inputs = step.querySelectorAll(".validate");
  proceed = true;
  let regex = {
    string: /^[a-zA-Z ]{2,30}$/,
    email: /^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/,
    mobile: /^[0-9]{10,12}$/,
    notEmpty: /^(?!\s*$).+/,
  };
  $.each(inputs, (i, input) => {
      let type = ($(input).attr("type") == undefined || $(input).attr("type") == 'checkbox') ? false : true;

    if (input.value == "") {
      show_error(input, "Feild is Required");
      proceed = false;
    }else if (type &&
      !regex[
        ($(input).attr("data-validate") == undefined)
          ? "notEmpty"
          : $(input).attr("data-validate")
      ].test(input.value)
    ) {
        //alert($(input).attr("type"))
      show_error(input, `Enter a valid ${$(input).attr("name")}`);
      proceed = false;
    } else if ($(input).attr("type") == "checkbox") {
    } else if(proceed && inputs.length == i-1) {
      proceed = true;
    }
  });
};
function show_error(input, msg) {
    let ind = $(input).attr('name');
    if($('#err'+ind).length > 0){
        $('#err'+ind).html(msg)
    }else{
          $(input).after(
    '<div id="err'+ind+'" class="alert alert-danger mt-2 alert-sm">' + msg + "</div>"
        );
    }

}

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-12 mx">
                <div class="adp-block mt-5 mb-5">
            <form>
                <div class="progress mt-2 mb-2" style="display:none">
                       <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                        </div>
            <div class="step" validation="true">
                <p class='status'>Enter Mandatory Info</p>
                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" class="form-control validate" name="full_name" data-validate="string">
                </div>
                <div class="form-group">
                    <label>Email </label>
                    <input type="email" name="email" class="form-control validate" data-validate="email">
                </div><div class="form-group">
                    <label>Mobile</label>
                    <input type="mobile" class="form-control validate" name="mobile" data-validate="mobile">
                </div>
            </div>
            <div class="step d-none" validation="true">
                <p class='status'>Personal Info</p>
                <div class="form-group">
                    <label>Gender</label>
                   <select class="form-control validate" data-validate="notEmpty">
                       <option value="" class="form-control">---</option>
                       <option value="male">Male</option>
                       <option value="female">Female</option>
                   </select>
                </div>
                <div class="form-group">
                    <label>Skills </label>
                    <p class="checkbox"></p>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="skills" value="ruby" id="defaultCheck1">
                      <label class="form-check-label" for="defaultCheck1">
                        Ruby
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox"  name="skills" value="nodejs" id="defaultCheck2">
                      <label class="form-check-label" for="defaultCheck2">
                        Node js
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox"  name="skills" value="python" id="defaultCheck3">
                      <label class="form-check-label" for="defaultCheck3">
                        Python
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input"  name="skills" type="checkbox" value="php" id="defaultCheck4">
                      <label class="form-check-label" for="defaultCheck4">
                        PHP
                      </label>
                    </div>
                    
                    
                </div>
            </div>
            <div class="step d-none" validation="true">
                <div class="form-group">
                    <label>Company Name</label>
                    <input type="text" class="form-control validate" name="company" data-validate="string" required>
                </div>
                <div class="form-group">
                    <label>Company Email </label>
                    <input type="email" name="company_email" class="form-control validate">
                </div><div class="form-group">
                    <label>Company Mobile</label>
                    <input type="mobile" class="form-control validate" name="company_mobile">
                </div>
            </div>
            <div class="step end d-none">
               <div class="card-body  text-center">
                   <i class="fas fa-check fa-2x text-success"></i>
                   <h4 class="card-title">Thank Tou For Registring with Us</h4>
                   <p class="card-text"
                   > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <button class="btn btn-success btn-sm">Go to Home</button>
               </div>
            </div>
            <div>
               <button class="btn btn-primary prev" disabled>Back</button>
               <button class="btn btn-primary next float-right">Next</button>
                <input type="submit" class="btn btn-success btn-block d-none">
                </div>
            </form>
            </div>
            </div>
        </div>
    </div>
</section>

Get HTML

Get CSS

Get JS

Step by step bootstrap form

Abhishek Singh

Related Elements

Bootstrap Pop up login form

Bootstrap Registration form with val

Sidebar contact form

Register Now Form

Checkout page with materialize

Call to action button

Resourse

Log in