Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

Dev GuideAPI ReferenceUser Guide
HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
Legal TermsGitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

Forms 4.5 - Important changes

Describes important changes (even though they are not breaking changes) in Optimizely Forms 4.5.

Suggest Edits

📘

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 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.

Updated 9 months ago