The Form Designer's Themes tab allows you to select and modify themes for your Form. This article covers the contents of the Form Designer's Themes tab in detail.
The Themes tab is accessible at the top of the Form Designer. Clicking it will display the Themes view and present you with the General Theme Settings in the right-side panel.
General Theme Settings
The General Theme Settings contains the following properties:
Theme: Choose a default theme for your Form. You can modify Default Themes, and any modifications will be saved as custom themes, so that you can always return to the default if needed.
Light/Dark: Choose between Light Mode and Dark Mode.
Is panelless: Toggle whether fields outside of panels are panelless.
Header Theme Settings
The Header Theme Settings allow you to modify settings related to your Form's header.
You can use the View button to toggle between Basic and Advanced Header Theme Settings.
The Basic Header Theme Settings give you options for:
Logo Alignment: Choose whether your logo is left-aligned or right-aligned. This option will be grayed out if your Form does not contain a logo.
Form title font: Choose the Form Title's font family, weight, and size.
Form description font: Choose the Form Description's font family, weight, and size. This option will be grayed out if you have not provided a Form Description.
Toggling on the Advanced Header Settings will present you with this:
The Advanced Header Theme Settings give you options for:
Height: Set header height in pixels. When set to 0, the height is calculated automatically to accommodate the header's content.
Height on smartphones: Set header height in pixels for display on smartphones. When set to 0, the height is calculated automatically to accommodate the header's content.
Content area width: Set the header's content area width to "Same as Form" or "Same as Container". The "Same as Container" option auto-adjusts the header content area width to fit into the HTML element the Form is placed in.
Text Width: Set the width of the header area that contains the Form Title and Description, measured in pixels. When set to 0, the width is calculated automatically to accommodate the header's content.
Background color: Set the header area's background color to None, Accent Color, or Custom.
Background image: Set the header area's background image. Configure the opacity and choose between cover, stretch, contain, and tile fill modes.
Overlap: When enabled, the top of the Form overlays the bottom of the header.
Form title font: Choose the Form Title's font family, weight, color, opacity, and size.
Form description font: Choose the Form Description's font family, weight, color, opacity, and size. This option will be grayed out if you have not provided a Form Description.
Logo alignment: Set the vertical and horizontal alignment of your Form Logo. This option will be grayed out if you have not provided a Form Logo.
Form title alignment: Set the vertical and horizontal alignment of your Form Title.
Form description alignment: Set the vertical and horizontal alignment of your Form Description. This option will be grayed out if you have not provided a Form Description.
Background Theme Settings
The Background Theme Settings allow you to modify settings related to your Form's Background.
In the Background Theme Settings you can modify the:
Background color: Set the main background color of the Form.
Background image: Set a background image for the Form. Configure the opacity, choose between Auto, Contain, and Cover fill settings, and set whether the background image is fixed or will scroll.
Appearance Theme Settings
The Appearance Theme Settings allow you to modify settings related to the Form's appearance.
In the Appearance Theme Settings you can modify the:
Accent color: Set a supplementary color that highlights key form elements.
Panel and field box opacity: Adjusts the transparency of panels and field boxes relative to the form background.
Input element opacity: Adjusts the transparency of input elements relative to the form background.
Form font family: Select the primary font used in the Form.
Form font size: Specify the size of the primary font used in the Form.
Form scale factor: Specify the Form scale factor.
Corner radius: Sets the corner radius for all rectangular elements.
At the bottom of the Appearance Theme Settings you can toggle Advanced Mode on and off. When enabled, Advanced Mode gives you the ability to adjust the settings outlined above in granular detail. Enable Advanced Mode when you need to fine-tune the Appearance Theme Settings.