Note
Optimizely 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.
Optimizely 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 Optimizely Forms NuGet package.
The _EPiServerForms.less_ file shows the Optimizely 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.
## Alter 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 Optimizely 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.