Skip to main content

How to change my background image and colors

  • Updated

The Branding Editor allows users to manage logos, background images, and color schemes to customize their application's visual identity. It supports easy image uploads, library management, and accessibility checks for color contrast. Best practices include using high-resolution, optimized images and consistent brand colors. Troubleshooting tips and advanced features for admins, like Asset Source Sets, are also provided.

 

Accessing the Branding Editor

To access the Branding Editor:

  1. Navigate to Settings in the left sidebar
  2. Click on Branding
  3. The Branding Editor panel will open with all customization options

 

Managing Image Assets

The Branding Editor supports various image types for different use cases. Each image type has specific requirements and display contexts.

Available Image Types

Logo

  • Purpose: Displayed in web forms and emails
  • Requirements: Minimum 500 x 500px PNG with transparent background recommended
  • Best Practice: Use a square or near-square logo with transparent background for maximum flexibility

Background

  • Purpose: Displayed in web form introduction pages
  • Requirements: Minimum 1200 x 900px (landscape) JPEG recommended
  • Best Practice: Choose high-quality landscape images that don’t distract from form content

Uploading Images

There are two methods to upload images:

Method 1: Drag and Drop

  1. Drag an image file from your computer
  2. Drop it onto the image preview area
  3. The image will upload and replace the current asset

Method 2: Click to Browse

  1. Click on the image preview area for the asset you want to change
  2. An asset picker modal will open showing your image library
  3. Click the upload area or Drag an image file from your computer
  4. The image will upload automatically and be set as the active image

Managing Your Image Library

To manage you library, click on a image, the asset picker modal will open showing your image library:

  • Upload Area: Large drop zone at the top for new uploads
  • Image Library: Horizontal scrollable gallery of previously uploaded images
  • Active Image: Currently selected image is highlighted with a border
  • Unused Images: Images not currently in use have a delete icon in the top-right corner

To switch images:

  1. Click on any image in the library
  2. The modal will close and the image will be applied

To delete unused images:

  1. Click the trash icon on an unused image
  2. Confirm the deletion in the action sheet that appears
  3. The image will be permanently removed from your library

 

Color Customization

The color scheme defines the visual identity of your brand throughout the application. Four color options are available to ensure consistency and accessibility.

Available Color Options

Primary Color

  • Usage: Headings, buttons, links, and primary action elements
  • Best Practice: Choose a color with sufficient contrast against light backgrounds for accessibility

Secondary Color

  • Usage: Background for selected options on multi-select pages
  • Best Practice: Often works well as a complementary or analogous color to your primary

Dark Color

  • Usage: Submit button background when pressed (active state)
  • Best Practice: Typically a darker shade of your primary color

Light Color

  • Usage: Page header backgrounds and question option backgrounds when pressed
  • Best Practice: Typically a lighter tint of your primary color

How to Change Colors

  1. Click on the colored circle button for the color you want to change
  2. A color picker popover will appear with three input methods:
    1. Visual Picker: Click and drag on the color wheel and brightness slider
    2. Hex Input: Type a hex color code directly (e.g., #FF5733)
    3. Eye Dropper (if supported): Click the eyedropper icon to pick a color from anywhere on your screen
  3. The preview circle will update in real-time as you make changes
  4. Click outside the popover or press Escape to save your changes

Accessibility Considerations

The Branding Editor includes an automatic contrast checker. If your primary color doesn't provide sufficient contrast against light backgrounds, you'll see a warning message:

Your chosen primary color might not offer enough contrast to be sufficiently legible, especially to those with a visual impairment. Please choose carefully.

 

Related articles