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.

  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.
  1. To save your changes, click Apply styles on the toolbar.

Add a custom CSS to your form

Important: 
  • Applying custom CSS styles involves acceptance of potential risks, such as incompatibility with future form upgrades, interfering or conflicting with accessibility of the Forms or Nintex‚Äôs platform, and is excluded from Nintex support services.

Use 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.

The Custom CSS feature must be enabled in Nintex Automation Cloud 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.

Note: Custom CSS styling is not supported on Nintex Mobile. Forms opened in a mobile web browser will display the custom styling.

  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.

    Important: 
    • This option is available only if the Custom CSS setting is enabled in Nintex Automation Cloud 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:

  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.

Add a custom CSS to a specific control

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.

    Note: 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.