Introduction:

Free download form wizard step by step, with web design responsiv, using jquery and bootstrap. You will find with our template a form of the four steps. The first step is for information about the user account: its user name, password, email address. The third step, for the personal information of the customer in question: are first name, last name, .... You also find a step relative to the information of the bank account, you can modify or delete this step to your needs of your site. Finally, with a last step, the client in question can validate his information dejat seizure. Test a demo version on webi4u.com, and download the full version on our github account.

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: Use form wizard layout?

Our template is compsé by two main element One is for the description of the registration form, you must explain to your users what to do an account on your site, you can put your social media links, and the possibility of login to customers who already have an account at home.

            
<section class="row form_wizard">
    <!-- form wizard description -->
    <div class="col-lg">
        
    </div>
    
    <!-- form wizard content -->
    <div class="col-lg">
        
    </div>
</section>
Part 2: How you use form wizard item?

For each form wizard item, you will find a header, and a section for form controll, a footer that contains two buttons for navigation on the form.

<section class="row form_wizard">
    <!-- form wizard content -->
    <div class="col-lg">
        <div class="container-fluid form_item form_account_information">
            <header class="row justify-content-between">
                <div>
                    <em>
                        1/4
                    </em>
                    <br/>
                    <strong>
                        Account Information Step
                    </strong>
                </div>
                <div>
                    <img src="img/lock_icon_6813906.png"/>
                </div>
            </header>
            <hr/>
            <div class="row">
                <div class="col-lg">
                    <input type="text" placeholder="user name" class="form-control"/>
                </div>
            </div>
        </div>                
    </div>
</section>