📘

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](🔗).