Create new input fields for forms

You use MVC form fields to collect user input and persist the input in form responses. MVC form fields follow the model-view-controller convention, so you create form fields in a similar workflow as creating widgets in MVC. In addition, similar to standard form fields, you can create the new fields in separate assemblies, following MVC principles of "separation of concerns".

The following tutorial demonstrates how to create a Yes/No field to use in MVC forms. You first create the folder structure, then the custom model, controller, and view. Finally, you register the field in Sitefinity CMS forms toolbox.

The model represents the data your application works with.

NOTE: This example uses plain C# classes for the model.

To create the custom model:

1. Open your Sitefinity CMS project in Visual Studio
2. Navigate to the Mvc folder
3. In the Models folder, create a new class and name it YesNoFieldModel.
4. Open the YesNoFieldModel.cs file and paste the following code:

1. In the Controllers folder, create a new class and name it YesNoFieldController.
2. Open the YesNoFieldController.cs file and paste the following code:

   NOTE: When creating new form fields, your controller can inherit FormFieldControllerBase. Thus, your field is compatible with the forms functionality in Sitefinity CMS. The FormFieldControllerBase provides two actions - Write and Read, which are invoked depending on the Form widget settings. If you want to implement some custom logic in these actions, you can just override them.

   NOTE: If you create your controller in a separate assembly, you need to apply the [Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes.EnhanceViewEngines] attribute to your controller class.

You implement the view that shows the data from the model, populated in the controller:

1. In the Views folder create a new folder and name it YesNoField.
2. Create the view for the field Write mode:
   1. Under the class library, in the Mvc/Views/YesNoField folder, create a new code file and name it Write.Default.cshtml.
   2. Using the Properties window for the file, set its Build Action to Embedded Resource.
   3. Open the file and paste the following code:
3. Create the view for the field Read mode:
   1. Under the class library, in the Mvc/Views/YesNoField folder, create a new code file and name it Read.Default.cshtml.
   2. Using the Properties window for the file, set its Build Action to Embedded Resource.
   3. Open the file and paste the following code:

This tutorial assumes that you are directly changing your Sitefinity CMS project. However, you may also use a separate assembly to contain your custom code. If you do so, add reference to your custom assembly in your Sitefinity CMS project.

After you complete adding the code for your custom form fields, and, if needed, add references to your assembly, as a final step you need to build your solution.

RESULT: The field is automatically registered in Sitefinity CMS forms toolbox and you can now use the new field on your MVC forms.

After you have created and registered the custom form field, you can apply rules to it by following procedure Extend form rules procedure.