Using forms in Kentico 12 MVC without the page builder
Kentico 12 MVC is amazing. Its a huge step forward for a CMS that has so much power and provides so much customisation ability to developers.
That said, the forms have caused me some headaches over the last few months as I’ve encountered the same situation several times… a client that wants to have a Kentico form (bizform) rendered on every page that uses a particular MVC layout.
Out of the box, Kentico has no way to do this and still maintain the form-builder functionality allowing the client to edit the form components, validation settings, etc.
The only officially supported method for placing a form on a page is to use the page builder and place the “Form” widget into an editable area on the page. Since the page builder saves the data about its widgets on a per-page basis this becomes impractical for my use-case.
In this article, I’m going to describe, with code examples, how I overcame this and produced working forms that render correctly, validate correctly and respect the settings and configuration of the form from Kentico.
Displaying the form
To display the form and have Kentico render any custom form-sections correctly you will need 4 pieces of information.
- The collection of FormComponent objects
- The FormBuilderConfiguration
- An HTML element ID that will be used to wrap the form and allow multiple instances on a single page
- The form’s codename
Getting the FormComponent collection
We first get the BizForm formInfo; from Kentico using the form codename. This gives the basic information we need to get the form components from the FormProvider .
Getting the FormBuilderConfiguration
Rendering the form
The two objects, formComponents and formConfiguration should be passed to the view in addition to the element ID and the form’s codename.
This should correctly render the form markup based on the Form Sections and Components used in the Form Builder.
The ElementId property in the model should be set to a valid HTML id value. This is used to ensure that the form remains self-contained and that you can use the partial view with different ElementId values in multiple places on the page.
Handling the form submission
You will need a controller action to handle the form submissions.
Saving the form
In order to save the submitted form, you need to convert the form components back into a form item record.
Honouring Kentico form settings
In Kentico, you have the option to configure the behaviour of the form after it is submitted. i.e. whether it should remain on the form, redirect to a different URL or show a message in place of the form.
Fortunately, we can access this information and take action accordingly. Continuing from the form-save above…
In closing
This is far from an ideal solution but it works. Hopefully, Kentico will open up some of the internal classes and interfaces to allow for a simpler extension of forms in future versions.
If you have a better way of doing it or improvements on the method described here, feel free to leave me a note in the comments.
