Make Admin Template Documentation

## Form Wizard

Form Wizard generate step navigation for your purpose. You can use it for registration, settings, introduction or presentation of your projects.

Usage is very simple. Only thing you need is html structure of some form with fieldsets and call on this form this plugin.
For more information about options, visit plugin documentation.

Form Wizard Documentation

## 5 styles to fit your needs

Form Wizard comes with 5 styles. It's very easy to change style, you just have to change `data-style` attribute on your form.

Here is a list of each style and how to apply them:

    <!-- SEA STYLE -->
    <form  role="form" class="wizard" data-style="sea">
        ...
    </form>
    <!-- SKY STYLE -->
    <form  role="form" class="wizard" data-style="sky">
        ...
    </form>
    <!-- ARROW STYLE -->
    <form  role="form" class="wizard" data-style="arrow">
        ...
    </form>
    <!-- SIMPLE STYLE -->
    <form  role="form" class="wizard" data-style="simple">
        ...
    </form>
    <!-- CIRCLE STYLE -->
    <form  role="form" class="wizard" data-style="circle">
        ...
    </form>

## 4 navigation positions

By default, form wizard navigation is on top. Here you can create creative form wizard with left, right or bottom navigation too.

Idem as style, you just have to add `data-nav` to your form if you want to change it, that's it!

    <!-- LEFT NAVIGATION -->
    <form  role="form" class="wizard" data-nav="left">
        ...
    </form>
    <!-- RIGHT NAVIGATION -->
    <form  role="form" class="wizard" data-nav="right">
        ...
    </form>
    <!-- BOTTOM NAVIGATION -->
    <form  role="form" class="wizard" data-nav="bottom">
        ...
    </form>

## How to use Form Validation?

### 1. Add specific javascript and css

Add in your head page:

    <link href="assets/plugins/step-form-wizard/css/step-form-wizard.css" rel="stylesheet">

Add inside `body` at the end of your page, before main template scripts:

    <!-- OPTIONAL, IF YOU NEED VALIDATION -->
    <script src="assets/plugins/step-form-wizard/plugins/parsley/parsley.min.js"></script>
    <!-- Step Form Validation -->
    <script src="assets/plugins/step-form-wizard/js/step-form-wizard.js"></script>

### 2. Create your form with Tabs

Add html markup for your form with `wizard` class for your form. Each part inside fieldset willbe a step. Here is a simple example:

    <form  role="form" class="wizard" data-style="sea">
        <!-- FIRST STEP-->
        <fieldset>
            <legend>Basic information</legend>
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password again</label>
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                </div>
            </div>
        </fieldset>
        <!-- SECOND STEP-->
        <fieldset>
            <legend>Condition</legend>
            In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate
            the graphic elements of a document or visual presentation, such as web pages, typography,
            and graphical layout. It is a form of "greeking".
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" value="option1" checked data-radio="iradio_square-blue">
                    Yes, it is totaly right.
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" value="option2" data-radio="iradio_square-blue">
                    No, I check it twice and it is not right.
                </label>
            </div>
        </fieldset>
        <!-- THIRD STEP-->
        <fieldset>
            <legend>Final step</legend>
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputName1">Your name</label>
                                <input type="text" class="form-control" placeholder="Your name">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="sr-only" for="exampleInputCat1">Name of your cat</label>
                                <input type="text" class="form-control" placeholder="Name of your cat">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>

## Form Wizard Validation

You can validate each step, to be sure user have complete all necessary datas. Here we use Parsley Validation plugin.

Parsley Validation Documentation

In order to validate each step, you have add `wizard-validation` class to your class and to tell which input is in which step.

For example, input 1, 2 and 3 are in step 1. So we have to validate them together.For each "group" of input, you have to add `data-parsley-group` attribute.

Here is an example:

    <form class="wizard wizard-validation" data-style="sea" role="form">
      <fieldset>
          <legend>Basic information</legend>
          <div class="row">
              <div class="col-lg-6">
                  <div class="form-group">
                      <label for="email">Email address</label>
                      <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required data-parsley-group="block0">
                  </div>
                  <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="password" name="password" placeholder="Password" required data-parsley-group="block0" data-parsley-equalto="#password">
                  </div>
                  <div class="form-group">
                      <label for="exampleInputPassword1">Password again</label>
                      <input type="password" class="form-control" id="password-repeat" name="password-repeat" placeholder="Password" required data-parsley-group="block0" data-parsley-equalto="#password">
                  </div>
              </div>
          </div>
      </fieldset>
      <fieldset>
          <legend>Condition</legend>
          In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, such as web pages, typography, and graphical layout. It is a form of "greeking".
          Even though using "lorem ipsum" often arouses curiosity due to its resemblance to classical Latin, it is not intended to have meaning. Where text is visible in a document, people tend to focus on the textual content rather than upon overall presentation, so publishers use lorem ipsum when displaying a typeface or design in order to direct the focus to presentation. "Lorem ipsum" also approximates a typical distribution of letters in English.
          <div class="radio">
              <label>
                  <input type="radio" value="option1" name="condition" data-parsley-group="block1" data-radio="iradio_square-blue" data-parsley-errors-container='div[id="condition-error"]' required>
                  Yes, it is totaly right.
              </label>
          </div>
          <div class="radio">
              <label>
                  <input type="radio" value="option2" name="condition" data-parsley-group="block1" data-radio="iradio_square-blue" data-parsley-errors-container='div[id="condition-error"]' required>
                  No, I check it twice and it is not right.
              </label>
          </div>
          <div id="condition-error"></div>
      </fieldset>
      <fieldset>
          <legend>Final step</legend>
          <div class="row">
              <div class="col-lg-12">
                  <div class="row">
                      <div class="col-lg-6">
                          <div class="form-group">
                              <label class="sr-only" for="exampleInputName1">Your name</label>
                              <input type="text" class="form-control" id="exampleInputName1" placeholder="Your name" name="your_name" data-parsley-group="block2" required="">
                          </div>
                          <div class="form-group">
                              <label class="sr-only" for="exampleInputCat1">Name of your cat</label>
                              <input type="text" class="form-control" id="exampleInputCat1" name="exampleInputCat1" placeholder="Name of your cat">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </fieldset>
    </form>