Customize App and Form Styles for an Environment

  • Updated on Dec 22, 2025
  • Published on Dec 22, 2025
  • 1 minute(s) read
Prev Next

This article demonstrates how to configure styles for applications and forms within an environment. These include setting a banner image for the app, choosing a font family, and setting a color theme.

Instructions

  1. Sign in to your site

  2. Navigate to Advanced Tools and select Environments
    The Advanced Tools left-hand navigation menu with Environments selected.

  3. Click the name of the environment you wish to edit
    Select an environment from the list.

  4. Navigate to the Appearance tab
    The Appearance tab at the top of the Environments page.

  5. Configure general appearance settings, as needed
    Environment appearance tab for customizing app banner, color theme, favicon, and validation error icon settings.

    • App Banner Image: Add or update the default custom banner image used by the apps in this environment

    • Color Theme: Customize the default colors displayed in the apps and emails in this environment.

    • Favicon: Customise the favicon displayed in apps and appless forms in this environment.

    • Validation Error Icon: Customize the icon displayed alongside validation errors in forms in this environment.

  6. Customize the App Styles for apps in this environment
    App style customization options for font family and content width settings displayed.

    • Font Family: Choose a font from the drop-down list

    • Content Width: Set the width in pixels for the content containers in your app/forms. The previews will update based on the number input.

  7. Customize the Form Styles applied to forms rendered within apps in this environment
    Overview of form styles applied to app-rendered forms, including containers and elements.

    • Form Container:
      Settings for form container styles including background color, padding, border width, and radius.

      • Outer Background Color: Add the HEX value of the color you would like to display behind the form container

      • Padding: Set the padding between the form container and the outer edge

      • Border Width: Add and choose a border thickness for around the form container

      • Border Radius: Round the corners of the border using the radius tool

      • Border Color: Choose the hex value color of the border (defaults to black)

    • Elements:
      Settings for form elements including spacing, font size, and color options.

      • Element Spacing: Set the spacing between elements on a form

      • Font Size: Choose the font size of element labels

      • Font Weight: Customize the font weight (bolding) of an element label

      • Font Color: Set the hex value color for the element label (defaults to black)

    • Heading Element:
      Settings for heading elements, including font size, color, and border options.

      • Background Color: Set the hex value for the background color of the header

      • Font Color: Set the hex value for the color of the header font

      • Padding: Adjust the padding between the header text and the background color box

      • Border Width: Add and choose a border thickness for around the header box

      • Border Radius: Round the corners of the border using the radius tool

      • Border Color: Choose the hex value color of the border (defaults to black)

      • Title, Large, Medium, Small, Normal: Set the Font Size and Weight (bolding) for each header type
        Title header font size and weight settings with a sample text preview.

  8. Customize the label and icon displayed for Buttons in your apps in this environment
    Buttons for form submission, save, discard, or navigate back.

  9. Click Save in the top right corner of the page
    The Save button in the top right corner of the environments page.

Related articles