Forms

Actions

<div class="form__actions">
    <button class="btn btn--beta btn--medium" type="submit">send</button>
</div>

Checkboxes

<div class="form__row">
    <div class="column-5 form__label">
        <label>Some checkboxes</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <ul class="form__input-list list-unstyled">
                <li><input name="checkbox" type="checkbox" checked="checked" id="checkbox1"><label for="checkbox1">Checkbox</label></li>
                <li><input name="checkbox" type="checkbox" id="checkbox2"><label for="checkbox2">Checkbox</label></li>
                <li><input name="checkbox" type="checkbox" disabled="disabled" id="checkbox6"><label for="checkbox6">Checkbox disabled</label></li>
            </ul>
        </div>
    </div>
</div>

Data

Some data
<div class="form__row">
    <div class="column-5 form__label">
        <label>Form data</label>
    </div>
    <div class="column-7 form__data">Some data</div>
</div>

Custom file

<div class="form__row">
    <div class="column-5 form__label">
        <label>File</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <input type="file" name="file-custom[]" id="file-custom" class="form__file-input" data-multiple-caption="{count} files selected" multiple />
            <label for="file-custom"><span>kies bestand</span></label>
        </div>
    </div>
</div>

Floating label

<div class="form__input form__input--floating-label">
    <input id="floating-label" type="url">
    <label for="floating-label">Website</label>
</div>

Form horizontal

Use the grid to your advantage.

<form class="form form--horizontal" data-form-validate novalidate="novalidate">
    <div class="grid grid--no-gutters column-beta-6 column-gamma-and-up-5 column-centered">
        <div class="column-8"><input type="text" placeholder="E-mailadres"></div>
        <div class="column-4"><button class="btn btn--beta btn--block btn--medium" type="submit">send</button></div>
    </div>
</form>

Form vertical

Vertical form

* = Verplicht veld

<form class="form form--vertical" data-form-validate novalidate="novalidate">
    <h2>Vertical form</h2>
    <div class="grid column-4 column-centered">
        <div class="form__row">
            <div class="form__label">
                <label>Aanhef</label>
            </div>
            <div class="form__input">
                <div class="form__select">
                    <select name="aanhef" id="" required="required">
                        <option value="" disabled="disabled" selected="selected">Kies een optie</option>
                        <option value="Dhr.">Dhr.</option>
                        <option value="Mevr.">Mevr.</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form__row">
            <div class="form__label">
                <label>Website *</label>
            </div>
            <div class="form__input">
                <input type="url">
            </div>
        </div>

        <div class="form__actions">
            <p class="form__required-field"><i>* = Verplicht veld</i></p>
            <button class="btn btn--beta btn--medium" type="submit">send</button>
        </div>
    </div>
</form>

Password toggle

<div class="form__row">
    <div class="column-5 form__label">
        <label>Password toggle *</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <input type="password" placeholder="password">
            <a class="form__password-toggle tooltip" data-tooltip-position="top" title="Show/hide password"></a>
        </div>
    </div>
</div>

Radio buttons

<div class="form__row">
    <div class="column-5 form__label">
        <label>Some radio buttons</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <ul class="form__input-list list-unstyled">
                <li><input name="radio" type="radio" name="radio" id="radio1"><label for="radio1">Radio</label></li>
                <li><input name="radio" type="radio" name="radio" id="radio2"><label for="radio2">Radio</label></li>
                <li><input name="radio" type="radio" name="radio" disabled="disabled" id="radio6"><label for="radio6">Radio disabled</label></li>
            </ul>
        </div>
    </div>
</div>

Range

50s 
<div class="form__row">
    <div class="column-5 form__label">
        <label>Range</label>
    </div>
    <div class="column-7">
        <div class="column-10 form__input">
            <div class="column-2 text-align-center">
                <output data-range="range-test" class="range-output">50s</output>
            </div>
            <div class="column-10">
                <input type="range" min="0" max="100" step="1" value="50" id="range-test" data-range-measurement="s">
            </div>
        </div>
    </div>
</div>

Required field

* = Required field

<div class="form__actions">
    <p class="form__required-field"><i>* = Required field</i></p>
    <button class="btn btn--beta btn--medium" type="submit">send</button>
</div>

Select

<div class="form__row">
    <div class="column-5 form__label">
        <label>Aanhef</label>
    </div>
    <div class="column-7">
        <div class="column-6 form__input">
            <div class="form__select">
                <select name="select" id="" required="required">
                    <option value="" disabled="disabled" selected="selected">Choose option</option>
                    <option value="Dhr.">Some option</option>
                    <option value="Mevr.">Another option</option>
                </select>
            </div>
        </div>
    </div>
</div>

Switch

<div class="form__row">
    <div class="column-5 form__label">
        <label>Switch</label>
    </div>
    <div class="column-7">
        <div class="form__switch">
            <input name="switch1" type="checkbox" id="switch1"><label for="switch1">Switch</label>
        </div>
    </div>
</div>

Textarea

<div class="form__row">
    <div class="column-5 form__label">
        <label>Vraag / opmerking</label>
    </div>
    <div class="column-7">
        <div class="column-10 form__input">
            <textarea cols="30" rows="10"></textarea>
        </div>
    </div>
</div>

Validation

We use parsleyjs for our form validation engine.

* = Required field

<form class="form" action="?action=ajax" data-form-ajax data-form-ajax-method="GET" data-form-ajax-datatype="json" data-form-ajax-url="form-ajax.json" data-form-ajax-msg-container="#form-message" data-form-validate novalidate="novalidate">
    <div id="form-message"></div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Aanhef</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <div class="form__select">
                        <select name="aanhef" id="" required="required">
                            <option value="" disabled="disabled" selected="selected">Kies een optie</option>
                            <option value="Dhr.">Dhr.</option>
                            <option value="Mevr.">Mevr.</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Postcode</label>
            </div>
            <div class="column-7">
                <div class="column-3 form__input">
                    <input type="text" placeholder="0123AB" data-parsley-pattern="^\d{4}[a-zA-Z]{2}$" data-parsley-error-message="Dit is geen geldige postcode." data-parsley-maxlength="6" maxlength="6">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Telefoonnummer</label>
            </div>
            <div class="column-7">
                <div class="column-4 form__input">
                    <input type="tel" placeholder="0123456789" data-parsley-type="digits" data-parsley-minlength="10" data-parsley-error-message="Dit is geen geldig telefoonnummer.">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>IBAN-nummer (NL)</label>
            </div>
            <div class="column-7">
                <div class="column-4 form__input">
                    <input type="tel" placeholder="NL01INGB0123456789" pattern="^(([a-zA-Z]{2}\d{2})?([a-zA-Z]{4}\d{10})|(\d{7}|\d{9,10}))$" data-parsley-error-message="Dit is geen gelding IBAN nummer.">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>E-mailadres *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input type="email" placeholder="jouwnaam@adres.nl">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Wachtwoord *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input id="password" type="password">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Herhaal wachtwoord *</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <input type="password" data-parsley-equalto="#password" data-parsley-error-message="Wachtwoorden zijn niet identiek.">
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Some checkboxes</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <ul class="form__input-list list-unstyled">
                        <li><input name="checkbox2" type="checkbox" checked="checked" id="checkbox10" data-parsley-mincheck="2"><label for="checkbox10">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox11"><label for="checkbox11">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox12"><label for="checkbox12">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox13"><label for="checkbox13">Checkbox</label></li>
                        <li><input name="checkbox2" type="checkbox" id="checkbox14"><label for="checkbox14">Checkbox</label></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="form__row">
            <div class="column-5 form__label">
                <label>Some radio buttons</label>
            </div>
            <div class="column-7">
                <div class="column-6 form__input">
                    <ul class="form__input-list list-unstyled">
                        <li><input required="required" name="radio2" type="radio" id="radio13"><label for="radio13">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio14"><label for="radio14">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio10"><label for="radio10">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio11"><label for="radio11">Radio</label></li>
                        <li><input name="radio2" type="radio" id="radio12"><label for="radio12">Radio</label></li>
                    </ul>
                </div>
            </div>
        </div>
    </fieldset>

    <div class="form__actions">
        <p class="form__required-field"><i>* = Required field</i></p>
        <button class="btn btn--beta btn--medium" type="submit">send</button>
    </div>

</form>