Note
Optimizely Forms is supported by MVC-based websites only.
## EPiServer.Forms
This release uses data attributes for binding functionality instead of css classes
From version 4.5, all view-templates of build-in elements now use `
data-
` attribute instead of CSS class. It gives the designer more freedom to change CSS classes in the view-templates without worrying about breaking Forms functionality. See also [CSS styling and JavaScript](🔗) for information on changing CSS classes.Built-in elements have attribute `
data-f-type
`, with the following possible values:form
step
textbox
hidden
submitbutton
resetbutton
range
fileupload
captcha
selection
choose
navigationbar
Custom elements must have `
data-f-type="custom"
` attribute.`
data-f-modifier
` to separate variations of same type of element. For example: textbox element has `data-f-type="textbox"
` and four variations of modifier:number
url
number
textarea
Built-in `
DataElement
` keep data in **\<input>**, marked with `data-f-datainput
` (Boolean) attribute (instead of using `.FormTextbox\_\_Input
` CSS class).Element has `
data-f-element-nondata
` attribute (Boolean) will not be collected on submitting (instead of using `.Form\_\_Element--NonData
` CSS class).Using `
data-f-validationerror
` instead of .Form\_\_Element\_\_ValidationError to find error message elementUsing `
data-f-form-statusmessage
` instead of .Form\_\_Status\_\_Message CSS classUsing `
data-f-excludedatarebind
` instead of .FormExcludeDataRebind CSS classCaptcha element
Using `
data-epiforms-type="captcha"
`Using `
data-epiforms-captcha-refresh
`, `data-epiforms-captcha-image
` instead of .FormCaptcha\_\_Refresh, .FormCaptcha\_\_Image CSS classes
Form NavigationBar
`
data-epiforms-type="navigationbar"
`data-epiforms-navigation-currentStep, instead of .Form\_\_NavigationBar\_\_ProgressBar\_\_CurrentStep
data-epiforms-navigation-stepcount, instead of .Form\_\_NavigationBar\_\_ProgressBar\_\_StepsCount
data-epiforms-navigation-progress, instead of .Form\_\_NavigationBar\_\_ProgressBar—Progress
Use `
data-f-linked-name
` instead of `data-epiforms-linked-name
` to link DOM element of the same FormElement.
Note
View Template using CSS classes (the old method) still works when using Forms 4.x, but there is no guarantee it will work in future major releases.