Loading...
Area: Episerver Add-ons
Applies to versions: 2 and higher

Creating a custom Form Container Block

Note: Episerver 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.

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

  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)]
    [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 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);
         } 
      }
  3. 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.
  4. Edit the file FormContainerBlock.ascx:
    • Import the namespace containing the new form container block model (EpiserverSiteCustomValidatorMessage is replaced by the namespace of your project):
      <%@ Import Namespace="EpiserverSiteCustomValidatorMessage.Models.Blocks" %> ​
    • Include the new model:
      <%@ Control Language="C#" Inherits="ViewUserControl<EPiFormWithTwoColumnOptionBlock>"%> ​
  5. 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>
            </span>
        </div>
        <% 
           }
        %>
    ​

Last updated: Nov 07, 2019