Update the Styling of Disabled Input Fields on Nintex Forms

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.

DefaultStyling_AllFieldsDisabled

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:

  1. If the Type of Request equals “New Requirement”, then only the Course Code and Justification controls are enabled.
  2. 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.

DefaultStyling_CompareNewVsNotNew

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.

CustomStyling_AllFieldsDisabled

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.

CustomStyling_CompareNewVsNotNew

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!

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