Styling Form and Form Components

User can define form and form components styles using form CSS Styles builder.

Click on form header (1) on canvas then click on settings icon in "CSS Styles" section (2) in "Settings" subtab of left sidebar to open "CSS Styles" popup (3).

Choose element you need to style in components picklist (4) and proper CSS selector will be inserted into text field (5). To add this selector into the CSS area (6) click + icon (7).

Components picklist contains all components added to the form:

Add style properties and modify styles (if needed) correspondingly to CSS standards:

Above example styles change background color and font color of "Save" form button:

Notes:

• CSS builder supports Merge fields (8).

• CSS builder does not support formulas. If you need some dynamic styles, you should evaluate and store them somewhere (e.g., in form variable or field) and use it in the CSS builder as proper Merge field.

CSS selectors available in picklist (4) contain the following special instructions: @@ and ## (9). They are necessary for system and will be replaced with special prefixes automatically. These prefixes are generated to allow usage of more than one form in one page without affection one form by styles of another.

If you want to style something not pre-defined in picklist (4) - e.g., section headers or list entries - you should inspect these elements in browser, write proper CSS selectors and place them after form container (.@@-form-container-wrbpm) or form body (.##-form-wrbpm) class. If you omit this, your styles can affect all forms on the page and modal popups: