CSS styling and JavaScript

Note: Episerver Forms is only supported by MVC-based websites and HTML5-compliant browsers.

The built-in form elements have minimal styling rules with the expectation that a developer will modify the appearance for site application. The styling rules apply to rendering whether you view or edit a form.

Episerver Forms uses the EPiServerForms.less file to generate the EPiServerForms.css file that is used to view and edit a form.

Original .less files are included in the Episerver Forms NuGet package.

The EPiServerForms.less file shows the Episerver Forms JavaScript CSS classes, and the overview structure of Form’s document object module (DOM). Class names are structured and named using the BEM (Block, Element, Modifier) methodology. For an ElementTextBox, if separate, the FormTextBox CSS class is for CSS styling. The JS_FormTextBox_For_JS_Manipulation CSS class is for JavaScript referring only. This case of Form functionality of FormTextBox and JS_FormTextBox_For_JS_Manipulation is always duplicated. Use JavaScript data-* attributes to change or remove system CSS classes.

Note: Most of CSS classes and their structures are heavily used by Form Core JavaScript.

Altering the default styling of forms

You can alter the default styling of a form by directly modifying the CSS file in wwwroot\modules\_protected\EPiServer.Forms\x.xx\ClientResources\ViewMode. You can modify styling rules freely but the following rules apply:

• When you adjust the HTML of the view template element, keep the structure (parent-child, block-element relation) and default class names as-is.
• Keep default CSS classes in the element view template as-is. You can add your own, but do not remove the existing ones.

Note: Prior to version 4.5, altering the default “system”-CSS-classes could break Episerver Forms functionality because the JavaScript code used those classes to provide saving data to browser storage, validation, collecting data, step-navigation and form submission. Now, all view-templates of build-in elements use data- attribute instead of CSS class which makes it easier to change CSS classes without breaking functionality. See Forms 4.5 - Important changes.

JavaScript in EPiServerForm.less

The following list shows the JavaScript used. When you develop your own templates, do not remove the JavaScript. You should leave all classes defined in EPiServerForms.less and default attributes intact.

EPiServerForms
Form__MainBody
FormStep
Form__Status__Message
Form__Element
Form__CustomElement
Form__Element__ValidationError
FormHidden
FormFileUpload
FormFileUpload__Input
FormFileUpload__PostedFile
FormChoice
FormSelection
FormCaptcha
FormCaptcha__Refresh
FormCaptcha__Image
FormTextbox
FormTextbox — Number
FormTextbox__Input
FormTextbox — Textarea
FormRange
FormRange__Input
FormChoice__Input
FormChoice__Input — Checkbox
FormChoice__Input — Radio
FormSubmitButton
FormResetButton
Form__NavigationBar
Form__NavigationBar__ProgressBar
Form__NavigationBar__ProgressBar__CurrentStep
Form__NavigationBar__ProgressBar__StepsCount
Form__NavigationBar__ProgressBar — Progress
Form__NavigationBar__Action
btnPrev
btnNext

Data attributes

data-epiforms-element-name
data-epiforms-visitordataproperty
data-epiforms-default-value
data-epiforms-linked-name
data-epiforms-visitordatasources

Hidden inputs

__FormGuid
__FormHostedPage
__FormLanguage
__FormCurrentStepIndex

Last updated: Oct 02, 2017