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


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.

    
  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.

    Replace:

    

    with:

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

    

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