Get HTML

Get CSS

Get JS

Step by step bootstrap form

3063 22 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

7104
1
0

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

Sidebar contact form

onex

4822
0
0

ionic 4 form example

onex

4397
0
0

Bootstrap 3 Modal

onex

2557
1
0

Bootstrap Pop up login form

onex

2340
1
0

FORM VALIDATIONS

Bootstrap Registration form wi

bhuwan

2303
0
0

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

Register Now Form

onex

2180
1
0

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

1970
0
0

Checkout page with materialize

onex

2015
1
0

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: /^\w+@[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