Forms 4.5 - Important changes
Describes important changes (even though they are not breaking changes) in Optimizely Forms 4.5.
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 hasdata-f-type="textbox"
and four variations of modifier:- number
- url
- number
- textarea
-
Built-in
DataElement
keep data in <input>, marked withdata-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 element -
Using
data-f-form-statusmessage
instead of .Form__Status__Message CSS class -
Using
data-f-excludedatarebind
instead of .FormExcludeDataRebind CSS class -
Captcha element
- Using
data-epiforms-type="captcha"
- Using
data-epiforms-captcha-refresh
,data-epiforms-captcha-image
instead of .FormCaptcha__Refresh, .FormCaptcha__Image CSS classes
- Using
-
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 ofdata-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.
Updated 5 months ago