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, view-templates of build-in elements 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 the same type of element. For example, the 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 sameFormElement
.
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 8 months ago