1. Help Center
  2. Impact Portfolio Reporting

Setting a theme for your survey

This is a pilot feature with limited availability to pilot users only. For access, please reach out to product@upmetrics.com.

A well-designed survey interface enhances participant engagement and facilitates accurate data collection.

A theme controls how your survey looks - including colors, fonts, and spacing. You can customize these settings in the Theme Editor without coding. Start with a preset theme, make your changes, and save them as a JSON file to use again later.

You can customize the survey design through the Themes tab in the form builder! 🎨

Adding a logo

When you created your survey initially, you should see a subsection in the Designer tab that allows you to add your logo. You can also navigate to that tab to do so: 

  1. Switch to the Designer tab.
  2. Under the Logo in the Survey Header sub section, locate the Logo property.
  3. Click the Folder icon next to the property to upload your logo file.SettingThemeForYourSurvey-AddingLogo

Select a general theme

To change your general theme: 

All themes include both dark mode and a streamlined panel-free layout option.

  1. Switch to the Theme tab. 
  2. In Themes Settings pane, under General, select your preferred Theme. SettingThemeForYourSurvey-Themes
  3. Optional: Enable Dark Mode
    1. Dark mode provides a smooth, modern appearance that's easier on the eyes, especially in low-light environments.

    2. To enable this mode, switch the Light/Dark toggle to Dark

  4. Optional: Display questions without question boxes
    1. In the survey builder, every survey element includes an input field and a question box— an area that frames the question content and separates it from the survey background.

The form builder offers an element called a panel (or a section) that allows you to group several questions together and modify their settings all at once. When questions are grouped within a panel, they don't have individual question boxes. The Question appearance setting doesn't apply to such nested questions.

 

Customize your header

You can customize your survey header in two ways:

  • Basic mode lets you make simple changes to:
    • Logo
    • Title font and size
    • Description  font and size
  • Advanced mode: allows you to to fine-tune every detail of your header's appearance.

SettingThemeForYourSurvey-Header

To change the font of your survey title, follow these steps:

  1. Under Header, locate the Survey title font sub-section.
  2. Select a Font family from the drop-down menu.
  3. Select the Font weight: Regular, Semi-bold, Bold, or Heavy.
  4. Set the Font size in pixels.

Set your background

You can select a background color or image behind your survey questions.

SettingThemeForYourSurvey-Background

Establish your appearance

The appearance menu has two modes, default and advanced:

In default mode, you can change the following:

  • Accent color
  • Panel and question box opacity
  • Survey font and size
  • Survey scale factor: This will resize all survey elements
  • Corner radius

In Advanced mode you have more control over the look of the survey

SettingThemeForYourSurvey-Appearance
🎉 Congratulations! You are theming!