Loading...
Area: Episerver Add-ons
Applies to versions: 4.5

Forms 4.5 - Important changes

Recommendations [hide]

Note: Episerver Forms is supported by MVC-based websites only.

This topic describes important changes (even though they are not breaking changes) in Episerver Forms 4.5. 

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 more information in 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.

Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 02, 2017

Recommendations [hide]