HomeGuidesAPI Reference
Submit Documentation FeedbackJoin Developer CommunityLog In

Creating a custom form block

This topic shows you how to create your own form container block.



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

In some cases, you might want to customize the Form Container Block to improve the rendering process or add more features to the form. For example, you might want a property called HasTwoColumns to control whether the form should render a layout of two columns.

  1. Create a custom form container block model that inherits from EPiServer.Form.FormContainerBlock:
[ContentType(GUID = "{DD088FD8-895E-47EF-9497-5B7A6700F4A6}", GroupName = EPiServer.Forms.Constants.FormElementGroup_Container, Order = 4000)]
public class EPiFormWithTwoColumnOptionBlock : FormContainerBlock
    [Display(Name = "Use two column layout", Order = 1, GroupName = SystemTabNames.Content)]
    public virtual bool HasTwoColumns {get;set;}
  1. Create a controller for the new block that inherits from FormContainerBlockController:
[TemplateDescriptor(AvailableWithoutTag = true, 
                    Default = true, 
                    ModelType = typeof(EPiFormWithTwoColumnOptionBlock),
                    TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
public class EPiFormWithTwoColumnOptionBlockController: FormContainerBlockController
   public override ActionResult Index(FormContainerBlock currentBlock)
      return base.Index(currentBlock);
  1. Create a custom view:
    • Create an ElementBlocks folder in the View/Shared folder.
    • Find the file EPiServer.Forms.zip in the modules folder and extract it. Copy the FormContainerBlock.ascx and then save it into the ElementBlocks folder created in the previous step.
  2. Edit the file FormContainerBlock.ascx:
    • Import the namespace containing the new form container block model (OptimizelySiteCustomValidatorMessage is replaced by the namespace of your project):
<%@ Import Namespace="OptimizelySiteCustomValidatorMessage.Models.Blocks" %>
- Include the new model:  
<%@ Control Language="C#" Inherits="ViewUserControl<EPiFormWithTwoColumnOptionBlock>"%>
  1. Use the HasTwoColumns property control if the form should render a layout of two columns:
if (Model.HasTwoColumns)
    <div class="Form__Status">
        <span class="Form__Readonly__Message">
           <h2>Has two colums</h2>

What’s Next
Did this page help you?