Stylesheet Reference

Elements

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>`