Note
Optimizely Forms is only supported by MVC-based websites and HTML5-compliant browsers.
Form elements inherit from an `ElementBlockBase
` class, which is the only type allowed in the form element Content Area. Inherit from `ValidatableElementBlockBase
` to support custom validator.
By default, you can choose from available form element validators (that inherit `ElementValidatorBase
` class). If you only need some of these validators, or you have your own validator, you can include or exclude them selectively by using the `AvailableValidatorTypesAttribute
` attribute. The following element includes only the `RequiredValidator
` along with its own validator. Apply `MyCustomValidator
` to this element; do not make it available for others.
`MyCustomValidator
`:
Only the `RequiredValidator
`Â appears in edit view; `MyCustomValidator
` is included transparently.

To validate a form element at the client side, you must specify a validate handler. `Serverside
`'s `Fullname
` of the `Validator
` instance is used as object key (case-sensitive) to lookup the `Clientside
` validate function. The `EpiForm
` client code calls this function to validate the form element’s value before submitting the form.
### Element view
The default path of element views are found at _modules\\\_protected/EPiServer.Forms/Views/ElementBlocks_, but you can override this by adding custom views in the _Views/Shared/ElementBlocks_ folder. If you want a custom view location, you can override the `GetDefaultViewLocation
` method of `CustomViewLocationBase
` class:
### Form element resources
If a form element needs its own resource, it must implement the `IElementRequireClientResources
` interface. The form element's resource is loaded after form's resources and external's resources. For example, the `DateTime
` element requires jQuery datetime to work but it is not loaded until the element is dragged into the form. For example:
### Customize an element's icon and image
To display a form element's image in the Forms Element gadget, add an image with the same name as the element name inside _modules/\_protected/EPiServer.Forms.UI/{version}/ClientResources/epi-forms/themes/sleek/images/contenttypes_. If you want a different location for a form element's big icons, you can override the default one (dojo part):
From Optimizely Forms 4.4.2, you can use the `ImageUrl
` attribute to change the big icon of a form element block like other blocks types by adding this to the custom element block:
For the small icon in the Form Elements gadget, add a class as follows:
For examples about custom form elements, see [https://github.com/episerver/EPiServer.Forms.Samples](🔗).