Custom rendering of Episerver forms

High Score Labs News • Aug 4, 2021

Episerver comes with tons of functionalities. And Developers can choose any of these functions from the out of the box feature. However, you may decide to get adventurous with your forms and include features that aren’t ready-made into the EPiServer environment. This article addresses this challenge and provides helpful tips to help you render the custom form in EPiServer. It also highlights a few extra measures to take when creating custom forms for rendering in EPiServer.

Rendering Client Resources

EPiServer Forms use client resources registered in the FormContainerBlockController to execute JavaScript and CSS. Thus, you need to render them when using your custom form template for JavaScript to execute the asynchronous post functionality of the form. However, CSS isn’t needed so you may disable it in the `_protected/EPiServer.Forms/Forms.config` configuration file using,

injectFormOwnStylesheet= “true”

Next, proceed to render the client resource in the header and footer on every page where a form appears. Here’s an example.

If the required resources are not registered once the FormContainerBlockController index is called, you may do so manually using the following code:

varformController= new EPiServer.Forms.Controllers.FormContainerBlockController();

formController.RegisterCssResources();

formController.RegisterScriptResources(new FormContainerBlock());

Wrapping the Container

Always wrap the default form container. That’s important because it futureproofs the form and makes it easier to maintain. Who knows, you may add some properties to the container later. Then you’ll need an overriding wrapping container to apply those changes.

If you attempt to wrap the container without rendering the necessary resources or calling the FormContainerBlockController index, you’ll get an error message. So, ensure you complete that step first.

Another crucial point to note is that you should not simply copy FormContainerBlock codes from the documentation zip files and edit them to your custom forms. These may not be supported by future releases, hence breaking when those updates come along. Remember, we try to develop code that is useful for as long as possible. Instead, wrap the custom container this way and keep the code in the original files;

Finally, add the wrapping element you require in your view and render the form as a partial. Rendering as a partial allows you to make changes to code or add code and still render the form.

Creating Custom Elements

If you intend to create a few custom elements in your form? Wrap the elements as you did with the container. Then, make your new element, add its properties, and render the view once again while referring to the original code. Add the view in the folder for the elements i.e., Shared/Element Blocks.

You’ll have duplicate codes here and there. So, you’ll need to hide the elements and containers you don’t need i.e., the original ones. Use the code below for this reason;

Conclusion

Creating and rendering custom EPiServer forms does not have to be a nightmare for you. Neither does adding custom elements to existing forms. Simply use the guidelines and sample code in this article to make the process a cakewalk.