## Form - Steps

One stop solution for perfect admin dashboard!

Toggle Code!
jQuery Steps! A powerful jQuery wizard plugin that supports accessibility and HTML5. For official documentation, click here .

##### Basic Example

### Keyboard

Try the keyboard navigation by clicking arrow left or right!

### Effects

Wonderful transition effects.

### Pager

The next and previous buttons help you to navigate through your content.

    <div id="example-basic">
        <h3>Keyboard</h3>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>
        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>
        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>

    <!-- ========== JS ========== -->
    <script>
        $(function($) {
            $("#example-basic").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                autoFocus: true
            });
        });
    </script>

##### Form Validations

### Account

User name *
Password *

### Profile

First name *
Last name *

### Hints

- Foo
- Bar
- Foobar

### Finish

I agree with the Terms and Conditions.

    <form id="example-form" action="#">
        <div>
            <h3>Account</h3>
            <section>
                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="userName">User name <sup class="danger-color">*</sup></label>
                        <input id="userName" name="userName" type="text" class="form-control required" placeholder="User name...">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="password">Password <sup class="danger-color">*</sup></label>
                        <input id="password" name="password" type="password" class="form-control required" placeholder="Password...">
                    </div>
                </div>

            </section>
            <h3>Profile</h3>
            <section>
                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="name">First name <sup class="danger-color">*</sup></label>
                        <input id="name" name="name" type="text" class="form-control required" placeholder="First name...">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="surname">Last name <sup class="danger-color">*</sup></label>
                        <input id="surname" name="surname" type="text" class="form-control required" placeholder="Last name...">
                    </div>
                </div>
            </section>
            <h3>Hints</h3>
            <section>
                <ul>
                    <li>Foo</li>
                    <li>Bar</li>
                    <li>Foobar</li>
                </ul>
            </section>
            <h3>Finish</h3>
            <section>
                <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
            </section>
        </div>
    </form>

    <!-- ========== JS ========== -->
    <script>
        $(function($) {

            var form = $("#example-form");
            form.validate({
                errorPlacement: function errorPlacement(error, element) { element.before(error); },
                rules: {
                    confirm: {
                        equalTo: "#password"
                    }
                }
            });
            form.children("div").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                onStepChanging: function (event, currentIndex, newIndex)
                {
                    form.validate().settings.ignore = ":disabled,:hidden";
                    return form.valid();
                },
                onFinishing: function (event, currentIndex)
                {
                    form.validate().settings.ignore = ":disabled";
                    return form.valid();
                },
                onFinished: function (event, currentIndex)
                {
                    alert("Submitted!");
                }
            });
        });
    </script>

##### Dynamic Manipulation

### Account

User name *
Password *

### Profile

First name *
Last name *

### Hints

- Foo
- Bar
- Foobar

### Finish

I agree with the Terms and Conditions.

    <form id="example-manipulation" action="#">
        <div>
            <h3>Account</h3>
            <section>
                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="userName">User name <sup class="danger-color">*</sup></label>
                        <input id="userName" name="userName" type="text" class="form-control required" placeholder="User name...">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="password">Password <sup class="danger-color">*</sup></label>
                        <input id="password" name="password" type="password" class="form-control required" placeholder="Password...">
                    </div>
                </div>

            </section>
            <h3>Profile</h3>
            <section>
                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="name">First name <sup class="danger-color">*</sup></label>
                        <input id="name" name="name" type="text" class="form-control required" placeholder="First name...">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6 col-md-offset-3">
                        <label for="surname">Last name <sup class="danger-color">*</sup></label>
                        <input id="surname" name="surname" type="text" class="form-control required" placeholder="Last name...">
                    </div>
                </div>
            </section>
            <h3>Hints</h3>
            <section>
                <ul>
                    <li>Foo</li>
                    <li>Bar</li>
                    <li>Foobar</li>
                </ul>
            </section>
            <h3>Finish</h3>
            <section>
                <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
            </section>
        </div>
    </form>

    <!-- ========== JS ========== -->
    <script>
        $(function($) {
            var form2 = $("#example-manipulation");
            form2.children("div").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "fade",
                enableAllSteps: true,
                enablePagination: false,
                onFinished: function (event, currentIndex)
                {
                    alert("Submitted!");
                }
            });
        });
    </script>

##### Tabs Example

### Keyboard

What is needed to transform it to a tabs component? Not much. Just override some properties and done.

    $("#wizard").steps({
        // Disables the finish button (required if pagination is enabled)
        enableFinishButton: false,
        // Disables the next and previous buttons (optional)
        enablePagination: false,
        // Enables all steps from the begining
        enableAllSteps: true,
        // Removes the number from the title
        titleTemplate: "#title#"
    });

### Other demos

Scroll down or up to see the other demos.

### Documentation

For more information check out the documentation!

### Purchase

You can purchase 'Options - Admin Template' from Themeforest!

    <div id="example-tabs">
        <h3>Keyboard</h3>
        <section>
            <p>What is needed to transform it to a tabs component? Not much. Just override some properties and done.</p>
            <pre class="prettyprint linenums">
    $("#wizard").steps({
    // Disables the finish button (required if pagination is enabled)
    enableFinishButton: false,
    // Disables the next and previous buttons (optional)
    enablePagination: false,
    // Enables all steps from the begining
    enableAllSteps: true,
    // Removes the number from the title
    titleTemplate: "#title#"
    });
    </pre>
        </section>
        <h3>Other demos</h3>
        <section>
            <p>Scroll down or up to see the other demos.</p>
        </section>
        <h3>Documentation</h3>
        <section>
            <p>For more information <a href="https://github.com/rstaib/jquery-steps/wiki">check out the documentation</a>!</p>
        </section>
        <h3>Purchase</h3>
        <section>
            <p>You can purchase 'Options - Admin Template' from Themeforest!</p>
        </section>
    </div>

    <!-- ========== JS ========== -->
    <script>
        $(function($) {

            $("#example-tabs").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                enableFinishButton: false,
                enablePagination: false,
                enableAllSteps: true,
                titleTemplate: "#title#",
                cssClass: "tabcontrol"
            });
        });
    </script>

##### Vertical Steps Example

### Keyboard

Try the keyboard navigation by clicking arrow left or right!

### Effects

Wonderful transition effects.

### Pager

The next and previous buttons help you to navigate through your content.

    <div id="example-vertical">
        <h3>Keyboard</h3>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>
        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>
        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>

    <!-- ========== JS ========== -->
    <script>
        $(function($) {
            $("#example-vertical").steps({
                headerTag: "h3",
                bodyTag: "section",
                transitionEffect: "slideLeft",
                stepsOrientation: "vertical"
            });
        });
    </script>