How to create custom FormContainerBlock in CMS 12

  • Updated

Issue Description:

Currently, the documentation for custom Form container block is not updated for CMS 12 (.NET Core). Please following the steps below to customize the FormContainerBlock in CMS 12.



1, Create new class EPiFormWithTwoColumnOptionBlock:

[ContentType(GUID = "{DD088FD8-895E-47EF-9497-5B7A6700F4A6}", GroupName = EPiServer.Forms.Constants.FormElementGroup_Container, Order = 4000)]
    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

[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 file FormContainerBlock.cshtml in folder \modules_protected\EPiServer.Forms\\Views\ElementBlocks\Components\FormContainerBlock

To under new folder \Views\Shared\ElementBlocks\Components\EPiFormWithTwoColumnOptionBlock (the name of this folder should be the same with new controller => EPiFormWithTwoColumnOptionBlock )

Then update some code like this:

// change the class name of Model to new class EPiFormWithTwoColumnOptionBlock
@model [YOUR_NAMESPACE].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>


Note: Please make sure you don't have any custom FomContainerBlock.cshtml under \Views\Shared\ElementBlocks\Components\FormContainerBlock