Using CSS with Forms

Last Updated: 04/11/2018 Introduced in Version:

 

There are two ways to use CSS in Decisions. Existing CSS documents can be uploaded and the custom-defined classes can be mapped to each form component. The other method is to carefully craft your CSS document using the pre-defined classes of Decisions, which will be automatically mapped to their respective form components. 

 

CSS files can be used to change the appearance of forms and form controls by simply uploading your custom CSS file and selecting it in the form designer. 
Upload CSS Document: Path: System/Designer/CSS.
Note: For more information on how to upload a CSS file, please refer to https://documentation.decisions.com/css-styling-form-controls/ .

Example 1: Custom-defined classes

In this example, we will be using this custom-defined classes in our style sheet.

 

Once the CSS file is uploaded in the Studio, open up the Form Designer and navigate to Properties > Style and check the box of the CSS file to be used.

The CSS file is now available to use on any form component. By default, the custom-defined classes are not mapped to any components. To map a form component to a class, click on the component and expand the View section under Properties. Under Css Class, use the drop down menu to map the custom class to the form component.

Repeat this process for each form component that will be modified by the CSS file. When the form is run in a flow, the components that are assigned a Css Class will be modified.


We see that each component of the form has been modified by it’s own unique custom-defined class.

 

Example 2: Pre-defined classes from Decisions

In this next example, we will be using a style sheet that utilizes the pre-defined classes from Decisions.

 

CSS files with the pre-defined classes are also applied in the form Properties > Style by checking the box next to the CSS file.
The CSS classes are automatically matched up to the components by default so there is no need to set the class for each component.

When the form is run in a flow, we see the CSS classes have been assigned to the correct components.

 


Pre-defined classes in Decisions

Listed below are the pre-defined CSS classes available when designing a CSS file to modify a form. 

 

Additional Resources