Form V2 inputs

This topic will cover the <input > fields structure and setup dependencies within form-v2 forms. The base form-v2 guidelines can be found there:

structure

The minimal form-v2 struture required is:

<div class="input-container">
    <input type="text" name="firstname">
</div>

The common structure on form-v2 forms is to have a warning handler showing under the input field if it hasn't been filled in correctly:

<div class="input-container" 
    data-empty-warning="Looks like there's nothing here. Could you please check?">
    <div class="input-field">
        <input type="text"
                 name="firstname"
                 data-mandatory-input="true">
    </div>
    <div class="input-warning">
            Looks like there's nothing here. Could you please check?
    </div>
</div>

Dynamic elements

The form structure and its fields can change depending on some user preferences, for instance if the user wants to be contacted by phone rather than email he can toggle the contact field with some radio buttons(example: here).

The purposes of this feature is to play on the visibility but also to make mandatory fields handling easier, any mandatory field which is hidden in a non-active dynamic content will be ignored by the frontend form validation.

setup: Add a data-activate attribute to a checkbox/radio button with a class name pointing to some .element-dynamic elements to toggle their visibility with active classes(e.g: data-activate=".email-dynamic" will toggle the visibility of each .email-dynamic element in the form). The checkbox/radio button must be part of a .select-dynamic container If your .element-dynamic contains an input, add an .input-dynamic class to the input node(this will help the form validation for mandatory fields part of .element-dynamic

Note:

<div class="select-dynamic">
    <input data-activate="dynamic-content-1" type="radio" name="medium" id="medium-1" value="content1" checked="">
    <label class="check" for="medium-1">Activate content 1</label>

    <input data-activate="dynamic-content-2" type="radio" name="medium" id="medium-2" value="content2">
    <label class="check" for="medium-2">Activate content 2</label>
</div>

<div class="element-dynamic active dynamic-content-1">This is content 1</div>
<div class="element-dynamic dynamic-content-2">This is content 2</div>

Options

Options are usually added on the <input > element itself, they usually indicate how the input should be validated, if it's mandatory, etc...

Examples:

here