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