I was working on a Nintex Form for a client recently where there were several disabled fields. Actually, based on the type of request they were submitting, anywhere from 2 to 20ish fields could be disabled. The problem was that the default styling of disabled fields is not much different than enabled fields and our client wanted to make it more obvious which fields the user should be focusing on for certain scenarios. Allow me to explain...
The Default Styling
The following screenshots show the default Nintex Forms styling. Initially, when the form for this scenario loads, all fields are disabled until a Type of Request is selected.
You'll also notice that the Person or Group controls do not have the same white background as all other controls. So, we will address that with this solution as well.
There are basically two main scenarios for this form:
- If the Type of Request equals "New Requirement", then only the Course Code and Justification controls are enabled.
- If the Type of Request does not equal "New Requirement", then the Course Code and Justification controls are disabled and everything else is enabled.
Notice in the screenshot below how subtle the differences are in the two scenarios.
Since this was a main functionality of this form, we needed to make this distinction more obvious and clear to the users submitting these requests.
The Updated Form
In addition to some other custom styling, you can see on the screenshot below, that all fields which are disabled initially are shaded in a darker gray color.
As the user selects the Type of Request, the disabled fields remain shaded gray and enabled fields are updated to have a white input area, which makes it much more obvious to quickly and easily identify which fields need to be filled in.
The Custom CSS
So, how did we achieve this updated look?
With just a bit of custom CSS.
From the Nintex Forms Designer, open the Settings dialog box from the ribbon, and then expand the Custom CSS section. Scroll all the way to the bottom and paste the following code.
Alternatively, you can save this code snippet to an external stylesheet and reference the file from the Advanced > Custom CSS includes section in Form Settings.
/*darken background of disabled input fields*/
input[type=password][disabled], input[type=text][disabled], input[type=file][disabled], textarea[disabled], select[disabled], .sp-peoplepicker-topLevelDisabled, .ms-inputBoxDisabled {background-color:#dddddd !important;}
/*darken background of disabled people pickers*/
.ip-disabled.ip-container {background-color:#dddddd !important;}
/*darken background of disabled MLT fields*/
.nf-form-input div[contenteditable=false] {background-color:#dddddd !important;}
Good luck and happy disabling!
NOTE: This solution was implemented on Nintex for SharePoint 2013, so slight adjustments may be required to implement for other platforms. Also, the Custom CSS option is only available in the Classic Forms Designer (not Responsive).
