---
title: Form builder development
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The Xperience form builder offers an intuitive graphical editor that allows content creators and marketers to [compose online forms](https://docs.kentico.com/13/managing-website-content/forms/composing-forms.md). It is available on the **Form builder** tab of the **Forms** application when editing a form.

The form builder interface is divided into two parts – the designer window, located in the middle and facilitating the overall design of the form, and the properties panel, located on the right and allowing configuration of selected form fields.

![Kentico form builder interface](https://docs.kentico.com/docsassets/13/form-builder-development/FormBuilderUIOverview.png "Kentico form builder interface")

## Displaying forms

Forms created in the form builder can be displayed on the website in the following ways:

- Content editors can [place](https://docs.kentico.com/13/managing-website-content/forms/placing-forms-on-pages.md) the forms onto the live site as widgets using the [page builder](https://docs.kentico.com/13/managing-website-content/adding-page-content-using-widgets.md).
- Developers can add forms directly into the views of pages by [rendering](https://docs.kentico.com/13/developing-websites/page-builder-development/rendering-widgets-in-code.md) the default _Form_ widget.

## Form builder components

The form builder framework consists of a number of component types, each contributing specific functionality.

#### Form sections

[Form sections](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts.md) drive the overall layout of forms. They represent reusable pieces of markup that can store any number of form zones – areas where content creators place form fields. Sections are fully customizable, and as a developer, you have absolute freedom in the way you set each section's layout. Form sections can be implemented with [properties](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts/defining-form-section-properties.md), which allow content editors to adjust the content or behavior of the sections using configuration dialogs in the form builder interface.

See [Developing custom form layouts](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-custom-form-layouts.md) to learn how to implement and customize form sections.

#### Form components

The main building blocks of forms are [form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md) – instances of components represent individual form fields. The implementation of form components consists of two classes, one facilitating the front-end functionality, the other encapsulating the state as configured via the form builder's properties panel, and a corresponding partial view, providing the component's visual elements.

Natively, Xperience contains a set of form components available for use instantly, without the need of any custom development on your part. See [Reference - System form components](https://docs.kentico.com/13/developing-websites/form-builder-development/reference-system-form-components.md) for a comprehensive list. You can also implement form components suited for your specific scenarios. See [Developing form components](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components.md) for more information and a general overview, and [Example - Developing a custom form component](https://docs.kentico.com/13/developing-websites/form-builder-development/developing-form-components/example-developing-a-custom-form-component.md) for a step-by-step tutorial implementing a sample component.

#### Validation rules and visibility conditions

You can further customize form fields by adding [validation rules](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-validation-rules.md) and [visibility conditions](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-visibility-conditions.md). Validation rules enforce constraints on user input, for example by limiting the maximum number of characters, or the maximum allowed numerical value a user can type into a field. Learn how to implement custom validation rules in [Defining field validation rules](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-validation-rules.md).

Visibility conditions restrict the visibility of form fields based on a certain condition. See [Defining field visibility conditions](https://docs.kentico.com/13/developing-websites/form-builder-development/defining-field-visibility-conditions.md) for more information. Moreover, form fields can be set as [smart](https://docs.kentico.com/13/managing-website-content/forms/using-smart-fields-in-forms.md), ensuring they only appear to visitors on subsequent page visits.

All of the above comprises a set of components available to the form builder. Components need to be registered under a unique _Identifier,_ with a _Name_ that is displayed in the Form builder interface.

## Editing components

In addition to the graphical form builder interface, form components are used programatically to build "configuration forms" within the administration. Form components acting in this capacity are referred to as _**editing components**_, and allow developers to build the configuration interface for the properties of various other components used within the [page builder](https://docs.kentico.com/13/developing-websites/page-builder-development.md) and form builder.

For more information, see: [Assigning editing components to properties](https://docs.kentico.com/13/developing-websites/form-builder-development/assigning-editing-components-to-properties.md)

## Form builder utilities

<!-- dev-model:mvc start -->

**MVC 5 development model.** Applies only when building with ASP.NET MVC 5. If this page also covers ASP.NET Core, that version is in its own block.

The system provides a set of extension methods designed to facilitate further development of additional form builder components. To easily access these extension methods in the code of your views, edit your live site project's **Views\web.config** file and add the **Kentico.Forms.Web.Mvc** namespace.

```xml

<system.web.webPages.razor>
  ...
  <pages pageBaseType="System.Web.Mvc.WebViewPage">
    <namespaces>
      ...
      <add namespace="Kentico.Forms.Web.Mvc"/>
    </namespaces>
  </pages>
</system.web.webPages.razor>

```

<!-- dev-model:mvc end -->

<!-- dev-model:core start -->

**ASP.NET Core development model.** Applies only when building with ASP.NET Core. If this page also covers MVC 5, that version is in its own block.

The system provides a set of extension methods and ASP.NET Core [Tag Helpers](https://docs.kentico.com/13/developing-websites/developing-xperience-applications-using-asp-net-core/reference-xperience-tag-helpers.md) designed to facilitate development of new form builder components. To easily access these extension methods in the code of your views, edit your live site project's **Views\ViewImports.cshtml** file and:

- add the **Kentico.Forms.Web.Mvc** namespace
- add the Tag Helpers from the **Kentico.Content.Web.Mvc** namespace

```xml title="ViewImports.cshtml"

@using Kentico.Forms.Web.Mvc

...

@addTagHelper *, Kentico.Content.Web.Mvc

```

<!-- dev-model:core end -->

Alternatively, you can add **these** directly in the code of individual views.