CSS styling and JavaScript

📘

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 of the 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 Form’s document object module (DOM) overview structure. Class names are structured and named using the Block, Element, Modifier (BEM) 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 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 templates, do not remove the JavaScript. You should leave 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