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.



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.
    [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 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:
    // 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>