---
title: Create a custom form block
slug: cms-12/docs/creating-a-custom-form-block
docTags: 
createdAt: 2026-08-10T15:55:57.000Z
---

:::hint{type="info"}
**Note**
[Optimizely Forms](docId:3SbSlJZIS_3iFmghfQA3J) 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`.

```c#
[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`.

```c#
[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:

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

Add code to the body of view.

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