{# Settings #} {% set root = "../../../" %} {% set mainNavActive_1 = "shortcodes" %} {% set sidebarNavActive_1 = "shortcode-base-forms-unify" %} {% set title = "Unify Forms" %} {% include "html/assets/include/nunjucks/partials/head.njk" %} {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %} {% include "html/assets/include/nunjucks/partials/core-css.njk" %} {% include "html/assets/include/nunjucks/partials/core-icons.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

Form Controls

Unify's form controls extend on Bootstrap forms with classes. In all examples, .form-control-md class is used to change Bootstrap's default form size. Also, all form styles can be extended with Unify's global classes.

Text Inputs

We'll never share your email with anyone else.
Note: works in Chrome, Firefox, Opera and above IE11.

Appended icon(s)

Appended icon(s) with border

{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Textareas

Note: height of the textarea depends on the rows attribute.
Note: expands on focus.

Appended icon(s)

Appended icon(s) with border

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

File Inputs (attachments)

Plain File Input

{% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Quantities

$
$
$
{% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Radios Options

Radio options

Columned radios

Inline radios

Radio Group

{% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Checkbox Options

Checkboxes Options

Columned checkboxes

Inline checkboxes

Checkboxes Group

{% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Toggles

Toggles views

Toggles based on radios

Toggles based on checkboxes

{% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Ratings

{% set contentTarget = "#shortcode8" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Slider Forms

Regular slider

Range slider

Step slider

{% set contentTarget = "#shortcode9" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Masking Rules

{% set contentTarget = "#shortcode10" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Datepickers

Datepicker inputs

Inline datepicker

{% set contentTarget = "#shortcode11" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Form Tooltips

Unify's form controls extend on Bootstrap forms with classes. In all examples, .form-control-md class is used to change Bootstrap's default form size. Also, all form styles can be extended with Unify's global classes.

Text Input Tooltips

Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
{% set contentTarget = "#shortcode12" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Textarea Tooltips

Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
Some helpful information
Some information about the form field
{% set contentTarget = "#shortcode13" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Custom Form Extensions

Unify's form controls extend on Bootstrap forms with classes. In all examples, .form-control-md class is used to change Bootstrap's default form size. Also, all form styles can be extended with Unify's global classes.

Text Inputs & Textareas

Text input

Textarea

Text input

Textarea

{% set contentTarget = "#shortcode14" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Checkboxes & Radios

Custom checkboxes

Option 1

Option 2

Option 3

Custom radios

Option 1

Option 2

Option 3

{% set contentTarget = "#shortcode15" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %} {% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}