Automatically bootstrap fields in Sitecore 9 Forms

Sitecore Forms enables you to easily create forms by dragging and dropping fields. It also supports Bootstrap. However, if you want to use Bootstrap framework, you must follow a set of steps to add the proper wrapper and classes around each field. Needless to say, this approach is not user friendly at all.

In this post, I share with you a custom processor that automatically wraps fields and adds the proper classes to each input and label.

Bootstrap fields processor

First step is to implement the code for the custom processor. Add a new class and extend the Sitecore.Mvc.Pipelines.MvcPipelineProcessor passing the type RenderFieldEventArgs.

Figure 1: BoostrapFieldsProcessor class

The remaining of the code will use HtmlAgilityPack to manipulate the html of the fields at the moment they are rendered. You can find the code in my Github repository https://github.com/JANeto87/blog/tree/master/sitecore/forms/bootstrap.

Next step is to add the configuration file.

Figure 2: Configuration file

In the configuration, I add a list of fields to be manipulated. You don’t want fields such as Section, Submit and etc, to be changed.

The end result can be seen below.

Below you see the Bootstrap css classes added as well as the form-group wrappers.

Figure 3: The html of the fields are changed by the BoostrapFields processor

Credits

Photo by Nathan Dumlao on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s