Can we have TABS in Nintex form 🤔 ??

So Answer is “Yes”, we can tweak it to get the Tabs on Nintex form. Lets start, I am considering you already have basic knowledge of Nintex forms. How to create it and how it behaves, add custom CSS and JavaScript code..

Open your form in Nintex form editor, Add a choice control, and edit properties > Enter the Name of Control , Display Format =”Option buttons”, Choice options , Default value(it will decide your default selected tab),and last & important is “Render as button=’Yes'”. as below image.



In my case, I wanted to add three tabs (tab1, tab2, and tab3). I have added three sections for 3 tabs, we will enable it as per the selection of tabs. Select each section one by one and add rule to hide. Condition for Tab1 Not(TabHeader==”Tab-1″) , Tab2 Not(TabHeader==”Tab-2″) and Tab3 Not(TabHeader==”Tab-3″).


Now add below style code and javascript to Nintex form.

.nf-outer .nf-choiceAsTabs span label{    background: #3a3a3a;    color: white !important;    font-size: 17px !important;} .nf-outer .nf-choiceAsTabs input[type="radio"]:checked + label {     background: #87d29e !important}

//here just replace 3 with number of tabs to adjusted as per the width of your form.
NWF$(document).ready(function(){      NWF$('.nf-outer .nf-choiceAsTabs span label').css('width',NWF$('.ms-formtable').width()/3)});

Once you publish our tabs will looks like below 😉