Tab Navigation using Sitecore Forms

In Sitecore Forms module it’s possible to implement tab navigation, using elements and conditions from Forms Editor and CSS only. With proper styling the effect could be like this:

You can install sample form item with forms tab navigation Sitecore package.

Prerequisite:

To use this approach we need to modify a little bit .cshtml file, responsible for rendering radio buttons. Standard .cshtml contains following structure for radio button:

We need to change it to:

Either structure is valid, but the second one allows us to modify the CSS of the label easier. Same effect is possible with standard Sitecore label structure, but it would require javascript, which we want to avoid.

We can modify standard Sitecore file (\Views\FormBuilder\FieldTemplates\RadioButtonList.cshtml), or create a copy of the file and Sitecore Forms field item (/sitecore/system/Settings/Forms/Field Types/Lists/Radio Button List), so we will have two types of radio buttons. Finally our .cshtml should look like this:

Form Definition

First we need to define elements for our tab navigation: using Froms Editor we add Radio button list inside a section element. For section element we define CSS class radio-tabs-wrapper which will be used for styling:

Then, we define condition to show the section, if radio button value is selected:

We repeat this for each section, we want to show:

Form Validation Issue

In Sitecore 9.2 there is an issue related with forms validation (reference number 341616). It causes form validation trigger for fields, even if they are in hidden sections. We can workaround this by setting additional “enable” conditions for each element with validation:

Styling

Finally we create styles to change radio buttons into tabs. For example following:

and reference this CSS file in our layout.