HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

Forms 4.5 - Important changes

This topic 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 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 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
  • 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.


Did this page help you?