Customize Form Label Control Background Color with CSS in Nintex Automation Cloud

I was recently working on a Nintex Automation Cloud (NAC) form that contained a label control containing instructions at the top of the form. I wanted to make this instructions section stand out by adding a background color, but quickly realized that this did not seem possible with the default Label control text editor. After researching and testing, I was able to figure out that the forms designer in Nintex Automation Cloud allows the use of CSS code to customize the form look and feel.

To add a background color to a Label control, you first need to add custom CSS to the “Advanced styles” section in the Styles tab in the form. Then add the CSS class to your Label control configuration. Here are the steps to accomplish this:

• Open the form and click on the top Styles tab in the designer.
• Expand the “Advanced styles” section at the bottom of the right-hand “Form styles” panel.
• Select Enabled for the “Customize your form styling using CSS” toggle.
• Click on the “Edit CSS” button under “Embed CSS code”.
• Add the custom CSS below in the “Create custom CSS” popup and click the Apply Changes button. (Note: The background color in this CSS example is a light blue color and I also added padding inside the Label control).
  
  [dir] .mylabelbackground {
background-color: #cfecf7;
padding: 5pt;
}
  
• Click the “Apply styles” button in the top left-hand corner.
• Select the Label control in the Form designer.
  • Go to the bottom Styling section in the control configuration panel.
  • Add the mylabelbackground class in the “CSS class” field.
• Preview the form to confirm it works (see the final form image below).