App > Documentation > Components > Forms

There are four general styles available to style forms: .form-horizontal, .form-condensed, .form-label-left and "no style" for horizontal placed inputs, decreased margins, labels aligned to left and default form accordingly. You can combine any of them together.

Example:

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about inputs.

Input Sizing

Any input can be sized by adding .col-*-* class. For vertical sizing .input-lg and .input-sm are available.

Prepened And Appended Inputs

Again Bootstrap helps. It has everything we need to prepend and append inputs.

Example:

Auto-growing textarea uses jQuery Autosize plugin to increase area size dynamically. Files:

<script src="node_modules/jquery-autosize/jquery.autosize.min.js"></script>

Example:

autosize(document.querySelector('textarea'));

Wysiwyg editor is based on bootstrap-wysihtml5. Files:

<script src="node_modules/bootstrap3-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script>
<script src="node_modules/bootstrap3-wysihtml5/src/bootstrap3-wysihtml5.js"></script>

Example:

$('.textarea').wysihtml5();

Markdown editor is built with Markdown js. Files:

<script src="node_modules/markdown/lib/markdown.js"></script>

Example:

let markdown = require( "markdown" ).markdown;

Two different type of selects avaiables in Flatlogic One template:

• Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
• Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.

Required files:

<script src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="node_modules/select2/select2.min.js"></script>

Two different type of selects avaiables in Flatlogic One template:

• Select2 - is a really powerful tool used to convert default selects to interactive search-enabled widgets.
• Bootstrap Select - is Bootstrap based custom select, designed to behave like regular Bootstrap selects. This one can be colored as any button.

Required files:

<script src="node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="node_modules/select2/select2.min.js"></script>

Bootstrap has a great api to handle button states - bootstrap-button.js, so using it to imitate checkbox or radio buttons.

There is a special plugin to do that - Switchery. Include following files:

<script src="node_modules/switchery/dist/switchery.min.js"></script>

Any field may have either Datetimepicker or Colorpicker attached. Required files:

<script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="node_modules/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

To make any input accept only formatted values there is a great plugin to use - jasny's inputmask.js. Files:

<script src="node_modules/jasny-bootstrap/js/inputmask.js"></script>

Flatlogic One sliders are styled version of Bootstrap Slider plugin.

<script src="node_modules/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>

Same as masked input based on Jasny's BS fork. Files:

<script src="node_modules/jasny-bootstrap/js/fileinput.js"></script>

Dead simple file upload plugin with image preview Dropzone.

<script src="node_modules/dropzone/downloads/dropzone.min.js"></script>

Flatlogic One uses really great validation plugin - parsley.js. It's better to let it say itself:

To activate it you need to add data-validate="parsley" to your form to make it work. That's it.

If you want to add step-by-step validation with wizard please check this guide.

Files:

<script src="node_modules/parsleyjs/dist/parsley.min.js"></script>

Twitter Bootstrap Wizard Plugin is used to build wizard-enabled widget.

To activate it you need to call $("#rootwizard").bootstrapWizard(); on your markup to create wizard.

If you want to add step-by-step wizard validation please check this guide.

Files:

<script src="node_modules/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>

Example Markup:

<div id="rootwizard">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
            <ul>
                <li><a href="#tab1" data-toggle="tab">First</a></li>
                <li><a href="#tab2" data-toggle="tab">Second</a></li>
                <li><a href="#tab3" data-toggle="tab">Third</a></li>
                <li><a href="#tab4" data-toggle="tab">Forth</a></li>
                <li><a href="#tab5" data-toggle="tab">Fifth</a></li>
                <li><a href="#tab6" data-toggle="tab">Sixth</a></li>
                <li><a href="#tab7" data-toggle="tab">Seventh</a></li>
            </ul>
        </div>
      </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
          1
        </div>
        <div class="tab-pane" id="tab2">
          2
        </div>
        <div class="tab-pane" id="tab3">
            3
        </div>
        <div class="tab-pane" id="tab4">
            4
        </div>
        <div class="tab-pane" id="tab5">
            5
        </div>
        <div class="tab-pane" id="tab6">
            6
        </div>
        <div class="tab-pane" id="tab7">
            7
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>

Bootstrap Application Wizard is a ready to use wizard component with simple install process. You don't even need to have any special markup to instantiate it.

<script src="node_modules/bootstrap-application-wizard/src/bootstrap-wizard.js"></script>