HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Create a custom form block

Shows you how to create your own form container 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.
    [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.
    [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:
    // 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>
      
           } 
     //....