Create a custom form block

📘

Note

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 new 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 new 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 new folder in 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.
   XML

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