Form Themes

Application Themes will transform the way you envision forms. It's not just about fields and data anymore; it's about vibrant fields, background images, matching fonts, and more. Use Themes to beautify the entire form through the Themes option in the right pane or even at the section and field levels.

Let's check out how it works in applications:

Themes are located in the screen's right pane during the application creation process in the form builder. When you click on themes, the following items appear in the properties section that pops up: 

Themes are divided into two sections:

Background

Form Background

Color: Choose the color you want to add for the form background.

Opacity: Allows you to adjust the transparency levels of the color or an image.

Image: Incorporate images as needed and ensure they blend seamlessly with the form background in four distinct styles.

• Fill

• Fit

• Original Size

• Tile

Font

Font Family: Modify the font family and styles as desired from the provided options.

Field Label Color: Choose or modify the color of the label name.

Field Label Size: Select the label size: Small, Medium, Large, or Custom.

Field Label Style: Apply styles such as Bold or Italic to the label name.

Field Value Color: Modify the color of the field's value.

Field Value Size: Select the field size: Small, Medium, Large, or Custom.

Field Value Style: Apply styles like Bold or Italic to the field value.

Effortless Customization with Global Styles (CSS Classes)

Designing a form isn't just about adding fields; it's about creating a visually appealing and well-structured layout. Every section, label, and field should blend seamlessly to maintain a polished and professional look.

Manually styling individual elements works, but what if you need a consistent design across multiple sections? Adjusting fonts, colors, and spacing for every field can be time-consuming.

This is where Global Styles (CSS Classes) come in. Instead of applying styles separately, you can define a set of rules once and apply them across the form in just a few clicks.

With Global Styles, you can:

• Ensure a uniform design across different fields and sections.

• Manage multiple styling options centrally without repeated manual adjustments.

• Make quick and efficient updates—modifying the CSS will automatically reflect across all linked elements.

To apply a Global Style, simply select the Themes option in the form builder, enable CSS Classes, and choose the desired class. The form will instantly adopt the defined styling, creating a cohesive and professional appearance.

Note:

When a Global Style (CSS) is applied, individual font and color settings will be disabled to prevent inconsistencies.

Configuring App CSS in the Form Builder

Applying CSS to a form allows for enhanced customization, ensuring a visually cohesive and structured design. The App CSS feature enables users to define and apply CSS classes across different sections of the form, providing a streamlined approach to styling.

To begin configuring App CSS, follow these steps:

• Open the Form Builder and navigate to the right-side panel. At the bottom, locate and click the Themes icon to open the Themes Properties section.

• Toggle Enable CSS Class to turn it on, then click Add CSS Class to open a panel where you can define your CSS rules.

• Enter the required CSS rules and click OK to save them.

Mapping CSS to Form Sections

• In the Form Builder page, click on a Section (e.g., "Event Details"), and the Properties Panel will open on the right.

• In the Title CSS Class field, select Section from the dropdown, this applies CSS styling to the section header. Example: Changing the font size, background color, or border style of the section title bar.

• In the Element Label CSS Class field, select Field from the dropdown, this applies CSS styling to the fields. Example: Modifying the font style, text color, or spacing for field labels.

• In the Element Value CSS Class field, select Value from the dropdown, this customizes how the user-inputted values appear inside the fields. Example: Changing the text color, background color, or padding of user-entered data.

• If the same style is needed in multiple sections, repeat the process for each one to ensure uniform styling across the entire form.

Why is CSS Mapping Needed?

Mapping CSS classes ensures that styling is applied consistently across all sections and fields, eliminating the need to manually configure each element. Instead of adjusting design settings for each field or section, CSS mapping allows you to apply a predefined style, ensuring a consistent layout, font styles, colors, and spacing. This makes the form well-structured, easy to maintain, and adaptable to future design changes.