Get HTML

Get CSS

Get JS

Step by step bootstrap form

1564 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

2075
1
0

This sidebar contact form is used to get user query form the same page.

Sidebar contact form

onex

1080
0
0

ionic 4 form example

onex

Bootstrap 3 Modal

onex

Bootstrap Pop up login form

onex

This is an example of ionic 4 form , ionic is a Javascript framework used to build hybrid mobile app,desktop and pwa.

Ionic form example

onex

FORM VALIDATIONS

Bootstrap Registration form wi

bhuwan

Checkout page with materialize

onex

This kind of registration and appointment booking form can be used on many places like on slider,banner and section.

Register Now Form

onex

Call to action button

onex

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

Resourse

Log in