Application Themes revolutionize the way you design forms—shifting the focus from basic data entry to visually engaging, brand-aligned experiences. Themes allow you to customize backgrounds, fonts, and field styles, ensuring every form is polished and professional. You can apply these settings globally, at the section level, or even at the individual field level.
During application creation in the Form Builder, the Themes option is available in the right-hand panel. Selecting it opens the Themes Properties section, which is divided into two main parts: Background and Font.
- Form Background
- Color: Set a background color for the form.
- Opacity: Adjust transparency for both color and images.
- Image: Upload images and choose how they display:
- Fill
- Fit
- Original Size
- Tile
- Font Family: Select from available font options.
- Field Label Color: Define label text color.
- Field Label Size: Choose from Small, Medium, Large, or Custom.
- Field Label Style: Apply Bold or Italic formatting.
- Field Value Color: Set color for user-inputted data.
- Field Value Size: Choose from Small, Medium, Large, or Custom.
- Field Value Style: Apply Bold or Italic formatting.
Manually styling individual elements can be time-consuming. Global Styles solve this by allowing you to define reusable CSS classes for consistent design across your form.
- Maintain a uniform appearance across fields and sections.
- Apply changes centrally—updates to a CSS class instantly reflect across all linked elements.
- Save time by avoiding repetitive manual adjustments.
Note
When a Global Style is applied, individual font and color settings are disabled to maintain consistency.
- In the Form Builder, open the Themes panel from the right-hand side.
- Enable CSS Class.
- Click Add CSS Class and define your custom CSS rules.
- Save your CSS configuration.
You can apply CSS classes to different form elements:
- Title CSS Class (Section): Styles the section headers.
Example: Change font size, background color, or borders.
- Element Label CSS Class (Field): Styles field labels.
Example: Modify font style, text color, or spacing.
- Element Value CSS Class (Value): Styles user-inputted data inside fields.
Example: Change text color, background, or padding.
For consistent styling across multiple sections, apply the same CSS classes to each.
CSS mapping ensures:
- Consistency: A uniform design across the entire form.
- Efficiency: Apply a predefined style once instead of configuring each field or section individually.
- Scalability: Easily update styles in the future without re-editing every element.
In summary, Application Themes and Global Styles allow you to move beyond functional forms into fully branded, aesthetically pleasing, and easy-to-maintain designs.