Form Wizard with Progress Bar in Admin Bootstrap

Submitted by azalea zenith on Wednesday, October 12, 2016 - 09:27.
In this tutorial, we are going to learn how to use Form Wizard with Progress Bar in Admin Bootstrap. Using this kind of form, you can specify which information must be first to fill up to the user if we used as a registration form for them. This wizard form separated into a group. It has three steps to finish the wizard form. The user can navigate the form by using Previous, Next, and Last. It has a progress bar when the user finished to fill up the first step then the progress bar is going to fill in until it finished. First, we are going to need the navbar layout for the wizard where it has three buttons such as Step 1, Step 2, and Step 3 controls.
  1. <div class="navbar">
  2.    <div class="navbar-inner">
  3.       <div class="container">
  4.          <ul>
  5.             <li><a href="#step_1" data-toggle="tab">Step 1</a></li>
  6.             <li><a href="#step_2" data-toggle="tab">Step 2</a></li>
  7.             <li><a href="#step_3" data-toggle="tab">Step 3</a></li>
  8.          </ul>
  9.       </div>
  10.    </div>
  11. </div>
For the progress bar, copy and paste this source code.
  1. <div id="bar" class="progress progress-striped active">
  2.    <div class="bar"></div>
  3. </div>
After creating navbar for the buttons above, let's create in their corresponding form field where the user enters their information in every step. This source code below, corresponding form for the Step 1 process in the Wizard Form.
  1. <div id="step_1">
  2.    <fieldset>
  3.       <div>
  4.          <label>First Name</label>
  5.          <div>
  6.             <input name="user_first_name" type="text" placeholder="First Name . . . . ." autofocus="autofocus">
  7.          </div>
  8.       </div>
  9.       <div>
  10.          <label>Last Name</label>
  11.          <div>
  12.             <input name="user_last_name" type="text" placeholder="Last Name . . . . .">
  13.          </div>
  14.       </div>
  15.    </fieldset>
  16. </div>
And, let's create the Step 2 process in the Wizard Form which contains another field where the user continues to fill up the information to registered.
  1. <div id="step_2">
  2.    <fieldset>
  3.       <div>
  4.          <label>Member Code Number</label>
  5.          <div>
  6.             <input type="text" name="user_code_number" value="Pending" placeholder="Member Code Number">
  7.          </div>
  8.       </div>
  9.    </fieldset>
  10. </div>
Then, the Step 3.
  1. <div id="step_3">
  2.    <fieldset>
  3.       <div>
  4.          <label>Member Type</label>
  5.          <div>
  6.             <select name="user_type">
  7.                <option value="Admin">Admin</option>
  8.                <option value="Member">Member</option>
  9.             </select>
  10.          </div>
  11.       </div>
  12.    </fieldset>
  13. </div>
Lastly, this source code below contains the other controls such as Previous, Next, and Last. Using these controls, the user can navigate easily in the Wizard Form.
  1. <ul>
  2.    <li><a href="">First</a></li>
  3.    <li><a>Previous</a></li>
  4.    <li><a>Last</a></li>
  5.    <li><a>Next</a></li>
  6.    <li><button type="submit" name="submit_member">Finish</button></li>
  7. </ul>
For the full source code, kindly download the source code below. Enjoy coding. Thank you.
Tags
Wizard Form
Form Wizard
Wizard Form Bootstrap
progress bar
Wizard Form with Progress Bar

Add new comment

About text formats
  • 512 views