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.
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.
- Create new 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; } }
- 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); } }
- 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:Add code to the body of view.// change the class name of Model to new class EPiFormWithTwoColumnOptionBlock @model AlloyMvcTemplates.EPiFormWithTwoColumnOptionBlock
//... @{ async void RenderFormBody() { if (Model.HasTwoColumns) { <div class="Form__Status"> <span class="Form__Readonly__Message"> <h2>Has two colums</h2> </span> </div> } //....
Updated 5 months ago