📘

Note

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.

   Text

   

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

   Text

   

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

   Text

   

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

   Text

   

<!----->

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

   Replace:

   Text

   

   with:

   Text

   

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

   Text

   

The following shows a form rendered in view mode. 

📘

Note

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.

🚧

Limitation

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