Stylesheet Reference

Elements and Stylesheet Classes

Intro

The CSS classes are using BEM and set automatically by the renderForm method. Additionall classes can be added at the form designer.

Global Elements

Class Description Markup
.flyingforms This class is for the wrapper all over the form.
<div class="flyingforms"></div>
.flyingforms__row Each section module has a wrapper element.
<div class="flyingforms__row"></div>
.flyingforms__row--active When accordion or paging is active, the current step has this class
<div class="flyingforms__row flyingforms__row--active"></div>
.flyingforms__row__title Each row can have a title.
<div class="flyingforms__row__title">
    <p>Row Title</p>
</div>
.flyingforms__row__content Each row have a content wrapper.
<div class="flyingforms__row__content"></div>
.flyingforms__col Even the section has no column module, by default a column wrapper will be added.
<div class="flyingforms__col"></div>
.flyingforms__col--12 The subclass will be added at column elements.
<div class="flyingforms__col flyingforms__col--12"></div>
.flyingforms__columns The columns module creates a new wrapper.
<div class="flyingforms__columns "></div>
.flyingforms__col flyingforms__col--6 The columns module creates a new wrapper with children wrappers.
<div class="flyingforms__col flyingforms__col--6">
    <div class="flyingforms__col-wrapper"></div>
</div>
.flyingforms__field Each field has a wrapper with this class.
<div class="flyingforms__field"></div>
.flyingforms__input Input have a wrapper with this class.
<div class="flyingforms__input"></div>

Field Elements

Element Class Markup
Text .flyingforms__field flyingforms__type--text
<div class="flyingforms__field  flyingforms__type--text">
    <label class="flyingforms__label flyingforms--w-100">Last Name</label>
    <div class="flyingforms__input">
        <input type="text" class="flyingforms--w-100">
    </div>
</div>
Dropdown .flyingforms__field flyingforms__type--dropdown
<div class="flyingforms__field  flyingforms__type--dropdown">
    <label class="flyingforms__label" >Salutation*</label>
    <div class="flyingforms__input">
        <select class="flyingforms--w-100">
            <option value="Mr">Mr</option>
            <option value="Mrs">Mrs</option>
        </select>
    </div>
</div>
Textarea .flyingforms__field flyingforms__type--textarea
<div class="flyingforms__field  flyingforms__type--textarea">
    <label class="flyingforms__label flyingforms--w-100">Message</label>
    <div class="flyingforms__input">
        <textarea class="flyingforms--w-100"></textarea>
    </div>
</div>
Checkbox .flyingforms__field flyingforms__type--checkbox
<div class="flyingforms__field flyingforms__type--checkbox">
    <div class="flyingforms__input">
        <label>
            <input type="checkbox">Checkbox
        </label>
    </div>
</div>
Checkbox List .flyingforms__field flyingforms__type--checkbox-list
<div class="flyingforms__field  flyingforms__type--checkbox-list">
    <label class="flyingforms__label">Label</label>
    <div class="flyingforms__input">
        <div class="flyingforms__checkboxes">
            <div class="w-100">
                <label class=""><input type="checkbox" value="ValueA">ValueA</label>
            </div>
            <div class="w-100">
                <label class=""><input type="checkbox" value="ValueB">ValueB</label>
            </div>
        </div>
    </div>
</div>
Radio .flyingforms__field flyingforms__type--radio
<div class="flyingforms__field  flyingforms__type--radio">
    <label class="flyingforms__label">Label</label>
    <div class="flyingforms__input">
        <div class="flyingforms__radiogroup">
            <div class="flyingforms--w-100">
                <input type="radio" value="ValueA"><span>ValueA</span>
            </div>
            <div class="flyingforms--w-100">
                <input type="radio" value="ValueB"><span>ValueB</span>
            </div>
        </div>
    </div>
</div>
reCAPTCHAv2 .flyingforms__field flyingforms__type--recaptchav2
<div class="flyingforms__field flyingforms__type--static-recaptchav2"></div>
Submit Button .flyingforms__field flyingforms__type--submit
<div class="flyingforms__field flyingforms__type--submit">
    <input type="button" value="Next">
</div>
Next Button .flyingforms__field flyingforms__button-next
<div class="flyingforms__field flyingforms__button-next">
    <input type="button" value="Next">
</div>
Back Button .flyingforms__field flyingforms__button-previous
<div class="flyingforms__field flyingforms__button-previous">
    <input type="button" value="Back">
</div>
Static Image .flyingforms__field flyingforms__type--static-image
<div class="flyingforms__field  flyingforms__type--static-image">
    <img src="URL"/>
</div>
Static Text .flyingforms__field flyingforms--w-100 flyingforms__type--static-text
<div class="flyingforms__field flyingforms--w-100 flyingforms__type--static-text">
    <p>TEXT</p>
</div>
Static HTML .flyingforms__field flyingforms--w-100 flyingforms__type--static-html
<div class="flyingforms__field flyingforms--w-100 flyingforms__type--static-html">
    <p>TEXT</p>
</div>