# Form Wizard

[Bootstrap Wizard plugin](http://vinceg.github.io/twitter-bootstrap-wizard/) to build a wizard out of a formatter tabable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows  to hook into each step individually.

#### Step 1

Add JavaScript file before enclosure of body tag

```markup
<script src="assets/vendor/jquery.bootstrap.wizard/jquery.bootstrap.wizard.min.js"></script>
```

#### Step 2

Prepare the Markup

```markup
<div id="rootwizard">

    <ul class="nav nav-pills nav-justified">
        <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Verify
            Identity</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Select
            Plans</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">
            Delights</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane p-t-20 p-b-20" id="tab1">

            <h3>
                <span class="align-middle">Welcome Fella,</span></h3>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1"
                       aria-describedby="emailHelp" placeholder="Enter email">
                <small id="emailHelp" class="form-text text-muted">We'll never
                    share your email with anyone else.
                </small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control"
                       id="exampleInputPassword1" placeholder="Password">
            </div>

            <div class="custom-control custom-checkbox">
                <input checked type="checkbox" class="custom-control-input"
                       id="customCheck1">
                <label class="custom-control-label" for="customCheck1">Agree to
                    the terms and conditions.</label>
            </div>


        </div>
        <div class="tab-pane p-t-20 p-b-20" id="tab2">
            <div class="radio-box">
                <input id="radio-new1" name="bigradios" type="radio">
                <label for="radio-new1">
                    <div class="radio-content">
                        <h6>Starter Plan <span class="badge-soft-primary badge">$12 MONTH</span>
                        </h6>
                        <p class="text-muted">
                            description
                        </p>
                    </div>
                </label>
            </div>
            <div class="radio-box">
                <input id="radio-new2" name="bigradios" type="radio">
                <label for="radio-new2">
                    <div class="radio-content">
                        <h6>Pro Plan <span class="badge-soft-info badge">$49 MONTH</span>
                        </h6>

                        <p class="text-muted">
                            description
                        </p>
                    </div>
                </label>
            </div>

        </div>
        <div class="tab-pane p-t-20 p-b-20" id="tab3">
            <div class="row">
                <div class="col m-b-30">
                    <div class="radio-box-column">
                        <input id="radio-column-1" name="column-radio"
                               type="radio">
                        <label for="radio-column-1">
                            <div class="radio-content ">
                                <div class="p-all-15">
                                    <div class="m-b-20">
                                        <img src="assets/img/cake.png" alt="">
                                    </div>
                                    <ul class="list-group">
                                        <li class="list-group-item">2 Cups of
                                            Icecream Daily
                                        </li>
                                        <li class="list-group-item">1 Surprise
                                            Cake
                                        </li>

                                    </ul>
                                </div>

                                <div class="radio-highlight ">
                                    Cup Cakes
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="col m-b-30">
                    <div class="radio-box-column">
                        <input id="radio-column-2" name="column-radio"
                               type="radio">
                        <label for="radio-column-2">
                            <div class="radio-content ">
                                <div class="p-all-15">
                                    <div class="m-b-20">
                                        <img src="assets/img/iceccream-bowl.png"
                                             alt="">
                                    </div>
                                    <ul class="list-group">
                                        <li class="list-group-item">1 Cups of
                                            Icecream Daily
                                        </li>
                                        <li class="list-group-item">5 Surprise
                                            Cakes
                                        </li>

                                    </ul>
                                </div>

                                <div class="radio-highlight ">
                                    Ice Cream
                                </div>
                            </div>
                        </label>
                    </div>
                </div>

            </div>
        </div>
        <ul class="nav nav-pills justify-content-between wizard m-b-30">
            <li class=" nav-item next"><a class="nav-link btn-success"
                                          href="#!">Proceed</a></li>


        </ul>
    </div>
</div>
```

#### Step 3

Initialize the plugin

```javascript
 $('#rootwizard').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'onNext': function (tab, navigation, index) {

            },

        });
```

{% embed url="<http://vinceg.github.io/twitter-bootstrap-wizard/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/form-elements/form-wizard.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.