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 10 months ago