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


Optimizely Forms is only supported by MVC-based websites and HTML5-compliant browsers.

The form container block render elements line-by-line by default. You can customize the rendering proccess to display the form in a multi-column layout using a grid system like Bootstrap.

  1. Add predefined breakpoints for the bootstrap grid.

  2. Optionally, add more display options corresponding to these breakpoints:

  3. Create the `FormContentAreaRenderer` class to get content area items style and calculate the item width necessary for the layout.

  4. Define `RenderFormElements` extension method for `HtmlHelper`.



  1. Edit the view of `FormContainerBlock` (_FormContainerBlock.ascx_) to use the new render method.




  2. `ICustomCssInContentArea` interface for adding a custom CSS for form element.


The following shows a form rendered in view mode. 


A form can appear differently between edit view and view mode because in view mode, form elements are grouped into rows and columns to keep the layout unbroken. If you want a consistent look between edit view and view mode, create a custom content area renderer and apply it for the whole site.


Currently, for simplicity, breakpoints are fixed for bootstrap grid, so 1/3 is 1/3 across screens. You can specify that 1/3 should be on the desktop and 12/12 should be on smaller screens. However, modifying the form container block template (_FormContainerBlock.ascx_) can be a little tricky.

See also: blog post, [Create custom Episerver Forms container](🔗)