Kentico Form Sections

The Form layout composed via the Kentico Xperience Form Builder is made up by elements called sections. Each form section defines an HTML block of code containing one or more zones. These zones can then hold any number of form fields.

Form sections are implemented using an ASP.NET Core view component.

Create your form section view files into your project structure under Components/FormBuilder/FormSections folder.

Call your form section view files easy to discern between different layouts. Example: FormSection5050.cshtml (2 equal columns) or FormSectionCols3.cshtml (3 columns)

This is an example of form section with 2 equal columns (using Bootstrap):

@using Kentico.Web.Mvc
@using Kentico.Forms.Web.Mvc

<div class="row">
    <div class="col-md-6 mb-3">
        @await Html.Kentico().FormZoneAsync()
    </div>
    <div class="col-md-6 mb-3">
        @await Html.Kentico().FormZoneAsync()
    </div>
</div>

If you want to apply a CSS just to the form builder without affecting the live site layout use the Context.Request.Path property:

@using Kentico.Web.Mvc
@using Kentico.Forms.Web.Mvc

@if (Context.Request.Path.Value.Contains("Kentico.FormBuilder"))
{
    <link href="/css/YourCustomStyle.css" rel="stylesheet" />
}

<div class="row">
    <div class="col-md-6 mb-3">
        @await Html.Kentico().FormZoneAsync()
    </div>
    <div class="col-md-6 mb-3">
        @await Html.Kentico().FormZoneAsync()
    </div>
</div>

After you’re done creating the form sections, register the sections in your ComponentRegister.cs (under your Components folder).

[assembly: RegisterFormSection("YourProjectName.FormSections.FormSection5050",
                               "2 Columns Section",
                               customViewName: "~/Components/FormBuilder/FormSections/FormSection5050.cshtml",
                               IconClass = "icon-l-cols-2")]

[assembly: RegisterFormSection("YourProjectName.FormSections.FormSectionCols3",
                               "3 Columns Section",
                               customViewName: "~/Components/FormBuilder/FormSections/FormSectionCols3.cshtml",
                               IconClass = "icon-l-cols-3")]

Next, rebuild your project and head over Kentico administration >> Forms >> Your Custom Form >> Form Builder and add form sections to your form.

I used the Context.Request.Path property to display the CSS only on the form builder because the Context.Kentico().PageBuilder().EditMode doesn’t work on the form builder.