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.
Add predefined breakpoints for the bootstrap grid.
Optionally, add more display options corresponding to these breakpoints:
Create the `
FormContentAreaRenderer
` class to get content area items style and calculate the item width necessary for the layout.Define `
RenderFormElements
` extension method for `HtmlHelper
`.
<!----->
Edit the view of `
FormContainerBlock
` (_FormContainerBlock.ascx_) to use the new render method.Replace:
with:
`
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](🔗)