Create a custom form block

📘

Note

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

Sometimes, 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 class EPiFormWithTwoColumnOptionBlock.
   C#

   [ContentType(GUID = "{DD088FD8-895E-47EF-9497-5B7A6700F4A6}", GroupName = EPiServer.Forms.Constants.FormElementGroup_Container, Order = 4000)]
   [ServiceConfiguration(typeof (IFormContainerBlock))]
   public class EPiFormWithTwoColumnOptionBlock: FormContainerBlock {
     [Display(Name = "Use two column layout", Order = 1, GroupName = SystemTabNames.Content)]
     public virtual bool HasTwoColumns {
       get;
       set;
     }
   }
   

2. Create class EPiFormWithTwoColumnOptionBlockController.
   C#

   [TemplateDescriptor(AvailableWithoutTag = true,
     Default = true,
     ModelType = typeof (EPiFormWithTwoColumnOptionBlock),
     TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
   public class EPiFormWithTwoColumnOptionBlockController: FormContainerBlockController {
     protected override IViewComponentResult InvokeComponent(FormContainerBlock currentBlock) {
       return base.InvokeComponent(currentBlock);
     }
   }
   

3. Copy FormContainerBlock.cshtml in folder \\modules_protected\\EPiServer.Forms\\EPiServer.Forms.zip\\Views\\ElementBlocks\\Components\\FormContainerBlock to a folder in the Alloy site \\Views\\Shared\\ElementBlocks\\Components\\EPiFormWithTwoColumnOptionBlock
   Then update some code like this:
   C#

   // change the class name of Model to new class EPiFormWithTwoColumnOptionBlock
   @model AlloyMvcTemplates.EPiFormWithTwoColumnOptionBlock 
   

   Add code to the body of view.
   C#

   //...
   @{
       async void RenderFormBody()
       {
          if (Model.HasTwoColumns)
       
          {
      
   <div class="Form__Status">
   	<span class="Form__Readonly__Message">
   		<h2>Has two colums</h2>
   	</span>
   </div>
     
          } 
    //....