Form Elements

Basic Form

HTML5
To create a basic form, insert the following code where you want it displayed.
Insert class="form-control" inside the input tag to get it styled as shown in the content tab.

<div class="form-item">
    <input type="" class="form-control" name="" placeholder="Text here">
</div>

Basic Selector

HTML5
To create a basic selector, insert the following code where you want it displayed.
Insert class="form-control product-list-sort-select" inside the select tag to get it styled as shown in the content tab.

<select class="form-control product-list-sort-select">
    <option value="">Select me 1</option>
    <option value="">Select me 2</option>
    <option value="">Select me 3</option>
</select> 

Form with suggestion list

HTML5
To create a form with a suggestion list, insert the following code where you want it displayed.
Insert class="site-search stores store-checker" inside the first div tag to get it styled as shown in the content tab.
Make li tags inside the ul tag. These are the suggestions being showed. The more li's you make, the more suggestions will be displayed.
To get the form to display the suggestion list, just add id="site-search" inside the input tag.

<div class="site-search stores store-checker">
    <label>
        <input type="text" placeholder="Type in min. 2 characters" class="form-control" id="site-search">
        <ul class="search-suggestions store-stock-suggestions dropdown-menu" style="display: none;">
            <li>Suggestion 1</li>
            <li>Suggestion 2</li>
            <li>Suggestion 3</li>
        </ul>
    </label>
</div>

Form with inside number control

HTML5
To create a form with inside number control, insert the following code where you want it displayed.
Insert class="form-control" inside the input tag to get it styled as shown in the content tab.
To make the form act as a counter, insert type="number" inside the input tag. This will also make the inside controller visible when hovering the field.

<div>
    <input type="number" class="form-control" value="1">
</div>

Form with outside number control

HTML5
To create a form with outside number control, insert the following code where you want it displayed.
Insert class="class="basket-item-quantity quantity" inside the first div tag to get it styled as shown in the content tab.
To make the form act as a counter, insert type="number" inside the input tag. This will also make the inside controller visible when hovering the field.

<div class="basket-item-quantity quantity">
    <div class="basket-button button-minus hidden-xs" data-bind="click: function() { var crf=customerColliRoundingFactor(); changeQuantity(-crf); }">-</div>
    <input name="quantity" type="tel" value="1" data-bind="value: quantity">
    <div class="basket-button button-plus hidden-xs" data-bind="click: function() { var crf=customerColliRoundingFactor(); changeQuantity(crf); }">+</div>
</div>

Form with validation for invoice details

Validation Form

Validated Form

Not-validated Form

HTML5
To create a form with validation for invoice details, insert the following code for the default validation form where you want it displayed.
Insert class="validation-input" inside the div tag to get it styled as shown in the content tab. You can then add the class validated or not-validated to get the preferred validation form.
This type of validation form, are mainly used on the checkout page, where customers write their delivery details.
Therefor you want several informations like firstname, surname, address etc., and to tell your validation form you can do the following:
In the label tag, you put in for="". In this you can type the following, depending on what information you want:
for="checkout-info-first-name"
for="checkout-info-sur-name"
for="checkout-info-address"
for="checkout-info-address-number"
for="checkout-info-zipcode"
for="checkout-info-city"
for="checkout-info-email"

// Default Validation Form //
<div class="validation-input">
    <label for="checkout-info-first-name" class="active">Name *</label>
    <input type="text" class="form-control" id="checkout-info-first-name" name="checkout-info-first-name" placeholder="Name *">
</div>

// Validated Form //
<div class="validation-input validated">
    <label for="checkout-info-first-name" class="active">Name *</label>
    <input type="text" class="form-control" id="checkout-info-first-name" name="checkout-info-first-name" placeholder="Name *">
</div>

// Not-validated Form //
<div class="validation-input not-validated">
    <label for="checkout-info-first-name" class="active">Name *</label>
    <input type="text" class="form-control" id="checkout-info-first-name" name="checkout-info-first-name" placeholder="Name *">
</div>

Basic Checkbox

HTML5
To create a basic checkbox, insert the following code where you want it displayed.
Insert type="checkbox" inside the input tag, to make it behave as a checkbox.

<label>
    <input type="checkbox">
</label>

Basic Category Checkbox with helper

?

HTML5
To create a basic category checkbox with helper, insert the following code where you want it displayed.
Insert class="product-list-sort" inside the first div tag and class="product-list-sort-group" inside the second div tag and class="checkbox" in the third div tag, to get it styled as shown in the content tab.

To create the helper you insert the span tag after the label tag.
To style it you insert class="product-list-sort-group-helper" inside the span tag.
Then to make the helpertext appear when hovering it, you add data-toggle="tooltip" inside the span tag.
The text you want to be displayed when hovered is what you write inside the data-original-title="" field, which you also put inside the span tag.

<div class="product-list-sort">
    <div class="product-list-sort-group">
        <div class="checkbox">
            <label><input type="checkbox" value="basic"> Checkbox</label>
            <span class="product-list-sort-group-help" data-toggle="tooltip" title="" data-original-title="This is a checkbox helper. It informs the user about what the checkbox does.">?</span>
        </div>
    </div>
</div>