Using CSS in Forms
  • 17 Jun 2022
  • 1 Minute to read
  • Dark
    Light

Using CSS in Forms

  • Dark
    Light

Overview

This article will cover how to apply custom or predefined CSS classes to Form controls.

Below is an example CSS file using a custom-defined class. Upload this CSS file to follow alongside the custom class example.


Selecting Form CSS

Predefined Class

  1. In the Form Designer, add controls to the Form workspace and navigate to the STYLE category on the Properties panel.
  2. Select one or more of the options under Style Sheets to have the styles automatically applied to the Form.

Custom Class

  1. In the Form Designer, navigate to the Style section within the Form Properties panel.
  2. Locate and select the custom-class CSS file. For this example, this is the CSS Button style sheet.
  3. Add a Button to the Form. 
  4. Navigate to the Button's Properties and expand the VIEW category. Select the CSS Class dropdown to select the MyButton class to have the style applied to the Button control. The CSS class can be applied to other Button controls as well.



Setting a Default Form CSS

To designate a default styling CSS for Forms, navigate to System > Designers > CSS. 

Right click on the desired CSS to open the Action menu, and select the Set Default CSS Document Action. Once selected, this CSS sheet will automatically apply to all Forms.

If this default CSS includes custom CSS classes, these will need to be selected manually for every control wishing to use one.


For further information on Forms, visit the Decisions Forum.

Was this article helpful?