Dev GuideAPI ReferenceUser Guide
HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback

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.