Create a custom form block

3 min

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.

Create class EPiFormWithTwoColumnOptionBlock.

[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;
  }
}

Create class EPiFormWithTwoColumnOptionBlockController.

[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);
  }
}

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:

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

Add code to the body of view.

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