Styles

In the Styles tab, you can define the color scheme and fonts that display in your form. There are orange and blue predefined styles to choose from, and you can also edit either of the pre-defined styles to create a custom look and feel for your form.

Style your form

1. Click the Styles tab at the top of the forms designer.

   A preview of the form and a configuration panel appears.

2. To use a pre-defined styleset, select the styleset you want from the Theme drop-down list.
   • Nintex default
   • Orange
   • Classic blue

   The pre-defined stylesets include standards governing all style elements.

   Note: Once you make changes to any style elements, the Applied style automatically becomes Current style*, the asterisk indicates the changes are unsaved. From the toolbar, click Apply styles to save the Current style changes. You can always re-select the pre-defined stylesets Orange and Blue if you want. For more information and guidance, see this video.

3. To configure colors for style elements, click the element you want and then use the color picker.

   You can select from the color map or enter Hex codes.

   List of custom styling options

   • Primary color (Page number icons, Next/ Previous page labels, 'Select to sign label' in Signature control, 'Select files' button in File upload control)
   • Secondary color (Field titles and borders of form controls, page numbers)
   • Page background
   • Form background
   • Control fill (Text fields, check boxes, etc.)
   • Control input color (Texts entered in form)
   • Control border stye (Corners: Rounded or squared)
   • Control border color
   • Primary button (Submit)
   • Primary button font
   • Secondary button (Next page, Previous page)
   • Secondary button font
4. Select a Font to use in texts that appear on your form.
5. In Input, select the size for texts entered in fields.
6. In Control labels, select the size for the titles of the fields in the form.
7. In the Advanced styles section, enable the Customise your form styling using CSS toggle to add a custom CSS to the form. See, Add a custom CSS to your form.

8. To save your changes, click Apply styles on the toolbar.

Add a custom CSS to your form

Use the CSS feature toggle in Advanced styles to add a custom CSS to your forms. This gives form designers the ability to create custom styles and customize their forms as required.

Note: You can also use the AI Assistant to generate a custom CSS for your form. See, Use the AI assistant to apply styles and create a custom CSS

The Custom CSS feature must be enabled in Nintex Workflow settings by a tenant administrator to allow form designers to apply a custom CSS to a form.

You can add a CSS that is hosted in an external location or use the CSS editor to write custom styles in the code editor. The custom CSS is applied to one form at a time and can be disabled whenever you want.

It's recommended to use the CSS editor when you want to apply small and targeted style changes to a form. Linking to an external CSS is recommended for complex styling that you want to use for multiple forms. You can use both methods together if required and the CSS in the code editor takes priority over any similar CSS included in the external file.

1. Click Styles at the top of the forms designer to open the Form styles configuration panel.

2. Click Advanced styles to expand the section.

3. Enable the Customize your form styling using CSS toggle.

   Important: 

   • This option is available only if the Custom CSS setting is enabled in Nintex Workflow Settings.

   • After you enable this toggle you must complete the next step and Link to an external CSS or Embed CSS code to complete the configuration.

4. Select an option and complete the steps:

   Link to external CSS

   You can add a CSS that is hosted in an external location. The External URL field is displayed when Link to URL option is selected.

   1. Select Add link.

   2. Enter the URL location. The file extension must be .css.

   3. Click Save.

   Embed CSS code

   You can use the CSS editor to write custom styles to apply to the form. The editor supports 10,000 characters and includes rich IntelliSense and validation for CSS. The character limitation is in place to ensure a minimal performance impact to the forms and workflow environment.

   1. In the Embed CSS code option, click to open the options menu.

   2. Select Open CSS editor.

   3. Add the CSS styles in the Create CSS editor window that is displayed. For examples and guidelines, see Custom CSS Guidelines.

   4. Click Apply changes.

5. To save your changes, click Apply styles on the toolbar.

Important: You can deactivate the Custom CSS applied to the form whenever you want by disabling the Customize your form styling using CSS toggle. Even if you disable the toggle, the Custom CSS is retained for the form till the form is saved. If you Apply changes to the form with the option disabled the CSS is deleted.

Use the AI assistant to apply styles and create a custom CSS

You can create custom CSS styles using the AI Assistant and add it to form styles. Simply type the prompt describing the custom CSS you want in the AI Assistant.

1. Open the form you want to edit.

2. Hover over the   icon on the right and click AI Assistant.

   The Form Assistant panel is displayed.

Important: To access this feature, it has to be selected in the AI features for the tenant.

3. Enter the description of the styling change you want and click .

   Note: CSS code or external CSS URLs are not supported as prompts in the AI Assistant.

   Example prompts

   Make the control text bold and italic

   Make the control labels bold and italic

   Add a border around the control

   Add a shadow effect to the control

   Add a border to the form with color #FF5959

   Add a shadow effect to the form border

   Add a gradient effect to the form backgound

   Add a hover effect to the form controls

4. If the Advanced styles toggle is turned off in the Styles tab of the form, a confirmation message appears asking if you want to enable it.

   Click Confirm to proceed.

   The Form styles panel is opened with Advanced styles enabled.

5. To open the CSS editor with the generated code applied, in the Form styles configuration panel click Edit CSS.

   The CSS editor is displayed with the code loaded.

6. To apply or discard your CSS changes:

   • To apply the AI generated CSS to the form: On the toolbar, click Apply styles on the toolbar.

   • To revert to your previous CSS: On the toolbar, click Discard changes.

   Note: The AI Assistant overwrites your existing CSS, and discarding allows you to restore your earlier work without losing any progress.

Add a custom CSS to individual controls

You can target a specific control and apply a style only to the control you want using the CSS field in the configuration panel of the form control. This enables you to apply unique styles to a control or a group of controls easily. The style is applied only to the controls you apply that style to using the CSS field, rather than applying it to all controls in the form.

You can use form rules to apply a style to a control based on a condition.

Add the CSS class to a control

1. Open the configuration panel of the control you want to apply a style to.

2. In the Styling section, enter the CSS class name in the CSS class field. You can enter one class name or multiple class names separated by a space.

Create the class in the CSS code editor

1. Click Styles at the top of the forms designer to open the configuration panel.

2. Click Advanced styles to expand the section.

3. Enable the Customize your form styling using CSS toggle.

4. Click Open CSS editor.

5. In the Create custom CSS window, create the CSS class. You can use a name you want for the class.

   For examples and guidelines, see Apply styles using custom CSS classes.

Style builder fields, buttons and settings

Section	Field, button, or setting	Description
Color	Theme	A drop-down list of pre-defined stylesets of Orange and Blue. The pre-defined stylesets include standards governing all style elements. Note: Once you make changes to any style elements, the Applied style automatically becomes Current style*, the asterisk indicates the changes are unsaved. From the toolbar, click Apply styles to save the Current style changes. You can always re-select the pre-defined stylesets Orange and Blue if you want. For more information and guidance, see this video.
	Primary color	Displays a color picker and a field to enter the Hex code of the color you want. Primary colors include the colors of Page number icons, Next/ Previous page labels, 'Select to sign label' in Signature control, and 'Select files' button in File upload control.
	Secondary color	Displays a color picker and a field to enter the Hex code of the color you want. Secondary colors include the colors of Field titles and borders of form controls, page numbers.
	Page background	Displays a color picker and a field to enter the Hex code of the color you want for the background of the webpage where your form will be embedded.
	Form background	Displays a color picker and a field to enter the Hex code of the color you want for the background of your form.
	Control fill	Displays a color picker and a field to enter the Hex code of the color you want. Control fill colors include the color of Text fields, radio buttons, and check boxes.
	Control input color	Displays a color picker and a field to enter the Hex code value of the color you want for the texts entered in form.
	Control border style	Displays a drop-down list of style for the control borders: Rounded or squared.
	Control border color	Displays color picker and a text field where you can enter the Hex code of the color you want for the control borders.
	Primary button	Displays a color picker and a field to enter the Hex code of the color you want for the Submit button.
	Primary button font	Displays a color picker and a field to enter the Hex code of the color you want for the text that appears on the Submit button.
	Secondary button	Displays a color picker and a field to enter the Hex code of the color you want for the Next page and Previous page buttons.
	Secondary button font	Displays a color picker and a field to enter the Hex code of the color you want for the texts that appears on the Next page and Previous page buttons.
Text formatting	Font	Displays a drop-down list of font to use for texts that appear on your form.
	Input	Select the size for texts entered in fields.
	Control labels	Select the size for the field titles.
Advanced styles	Customise your form styling using CSS	Enable the toggle to add a custom CSS to the form. You can add a CSS that is hosted in an external location or use the CSS editor to write custom styles. Important: You can deactivate the Custom CSS applied to the form whenever you want by disabling the Customize your form styling using CSS toggle. Even if you disable the toggle, the Custom CSS is retained for the form till the form is saved. If you Apply changes to the form with the option disabled the CSS is deleted.
	Link to external CSS	Add a CSS that is hosted in an external location. The file extension must be .css.
	Embed CSS code	Opens the CSS editor to write custom styles to apply to the form. The editor supports 10,000 characters. The character limitation is in place to ensure a minimal performance impact to the forms and workflow environment. For examples and guidelines, see Custom CSS Guidelines.