Design Configuration
This section controls the look and feel of your form across three main style categories: Form Styles, Stepper Styles, and Field Styles.
Design Configuration Panel:
1. 🧾 Form Styles
These settings affect the general appearance of the form itself:
Primary Color: The main accent color.
Primary Contrast Color: Text or icons on top of the primary color.
Background Color: The background of the form container.
Font Color: Default text color used throughout the form.
✅ Use high-contrast combinations to ensure readability and accessibility.
For detailed visual examples of each Form Style design, please refer to the Forms Global Config Design Configuration.
2. 📍 Stepper Styles
Relevant if your form uses multi-step navigation (steppers):
Active Step Background Color: Background color of the current step.
Active Step Font Color: Text color on the active step.
Inactive Step Background Color: Background color of steps not currently active.
Inactive Step Font Color: Text color on inactive steps.
📌 Helpful for users to visually track progress in multi-page forms.
For detailed visual examples of each Stepper Style design, please refer to the Forms Global Config Design Configuration.
3. 🧱 Field Styles
Customize how form input fields appear:
Select Field Template:
Four layout options to choose from — visually arranging the Field Label and Field Value differently.
Pick the one that best fits your branding or design preference.
Label Font Color: Color of the text label for form fields.
Font Styles: Dropdown to select a font family for field labels/values.
Font Size: Dropdown to define the size of text inside fields.
🧠 Tip: Keep field design consistent to improve usability.
For detailed visual examples of each Field Style design, please refer to the Forms Global Config Design Configuration.
Last updated