Surveys – Themes

General

Theme editor allows users to use and edit different themes, so the surveys represent the wanted brand or look. The editor has basic and advanced settings, which we will explain in this guide. It is good to note that you are not able to adjust the look of the element if it is not present in the survey. For example, before you enter the title of the survey, you are unable to adjust the Survey title settings.

CRM-service is also happy to offer customers pre-made templates in case there is a need to always use specific layout settings. If you are interested in getting a custom template, please contact our support team.

General Theme Editing Tools

Theme editor has multiple different setting types, but there are also a common set of tools used in wide variety of these settings. These include things like colour picker and opacity selector. We now go through these universal setting tools, and later in this guide, we will then just mention them by name.

Colour Picker

On many occasions, the colour settings are determined by using the colour selector setting (see picture below). In some cases, you can also see a picklist that lets you pick from a set of popular colours, but the colour picker and HEX code input field are present in all settings.

A palette icon with the label 'Color' and a color code '#00'.

Colour can be edited by entering the HEX code manually or by using the colour picker to select the wanted colour. The HEX colour input field can be fully visible or cropped to fit it in the settings block, but you can edit it by clicking anywhere in the field. In the colour picker, you can either pick the wanted colour by clicking it with the mouse, or you can manually input RGB values (see picture below).

Color picker tool interface with a gradient from black to red and RGB input fields.

Opacity Settings

Element opacity determines the transparency of the element related to its background. Opacity 100% means that the element is fully visible, while 0% means that it is not visible at all. Opacity settings can be inserted by typing the percentage to the field, or when available, by using down and up arrows to adjust the value (see picture below).

A graphic tool interface showing an 'Opacity' setting at '100%' with up and down arrows for adjustment.

Background plays a part in the final result, so for example, using 50% transparency with a black font on a white background or with a white font on a black background both give grey font as an end result (see picture below).

Text "Opacity Example" with transparency on a white background on the left and the same text with transparency on a black background on the right.

Theme General Settings

In the general settings of the Theme, you can use a picklist to pick one of the ready-made themes. You can either use the theme as it is or edit it. Each theme also has Light and Dark modes. Light mode is always the default, but you can switch to the dark colour scheme by pressing activating the dark mode under Theme settings (see picture below).

Screenshot of a user interface with theme settings, offering light or dark mode and question appearance options.

Question appearance determines whether the question has outline panels or not. The default is with panels, but you can always toggle the Without Panels option to change it. This option removes the outer panels, but some questions may still show a thin outline to make the question easier to read.

Survey Fonts

The themes tab allows you to edit the survey fonts. Each font type can be adjusted separately, but in the Basic Appearance settings, you can adjust font family and font size settings on a survey level (see the picture below).

Interface options for setting survey font family to 'Open Sans' and font size to '100%'.

Survey-wide settings affect all fonts that have not been separately adjusted. So, for example, if we have specified that in one question font family is Times New Roman, that setting stays even if we change the survey font family to Arial.

Specific Font Settings

In the specific font settings users can edit font family, style, colour, opacity and size (see the picture below).

A user interface showing font options: family (Open Sans), styles, color (black), opacity (91%), and size (24px).

Styles from Regular to Heavy adjust how thick the selected font is. All fonts do not support all the styles, so when unsure, it is good to always keep an eye on the text the font you are editing affects.

You can also specify the font colour and opacity in the settings. Font size is edited in pixels, and the number can be adjusted by writing it on the field or using the down and up arrows to make it smaller or larger.

Theme Background Settings

In the Background settings of the survey, you can set up and customise the survey’s background image (see the picture below).

A screenshot of a graphic user interface for background settings with options for image fit and scroll behavior.

In background image settings you can either upload an image by clicking on the Folder icon or paste a link to an online image in the provided input field. Once your image is uploaded or linked, you can select a display style.

The “Auto” setting maintains the image’s original dimensions and aspect ratio, tiling it if it’s smaller than the survey container. The “Contain” option resizes the image to fit within the container while preserving its aspect ratio, also applying tiling if necessary. The “Cover” option allows the image to fill the entire container, retaining its aspect ratio.

Further customization options allow you to control how the image behaves as users scroll through the survey. By activating the Fixed position toggle, the background image will remain stationary, creating a fixed backdrop effect as the content scrolls over it. Alternatively, selecting Scroll will make the background move along with the survey content.

Finally, to adjust the image’s transparency, use the Opacity property, which enables you to set the degree of visibility for the image.

Survey Header Settings

In the Basic mode of the survey header settings, users can adjust the title and description fonts on a basic level. They can also adjust the survey logo alignment if the logo is set up in the survey’s general settings. You can read more about the general settings of the survey here.

In the advanced mode of the survey settings user gets more settings for both information and the logo. They can also adjust the content area height and select the height displayed on the smartphones (see picture below).

Screenshot of a user interface with settings for height, smartphone height, content area, and text width.

Content area width determines does the header’s content width follows the width of the survey or the width of the container. The first option matches the width of the survey while using the Same as container option automatically adjusts the content area width to match the space where the survey’s contents are displayed.

The Text width option adjusts the width of the header area that contains the survey title and description. The adjustments are made by typing in the wanted pixel value into the field or by using the down and up arrow to adjust the value.

Survey Header Background Settings

The background of the survey header settings gives the user the opportunity to give the header a more personal look. This can be done by editing the background colour and by using the background image (see picture below).

Screenshot of a user interface for background settings with color and image options.

Header background colour settings have three options – none uses the background colour determined by the base theme used. Accent colour uses the survey’s accent colour. The Accent colour is adjusted in the survey’s Appearance settings. Selecting the Custom setting activates the colour picker and other colour input options.

In background image settings you can either upload an image by clicking on the Folder icon or paste a link to an online image in the provided input field. Once your image is uploaded or linked, you can select a display style.

The “Cover” setting maintains the image’s aspect ratio and fills the whole header area. The “Stretch” option fills the header box with the image, stretching the image while maintaining its aspect ratio. The “Contain” option resizes the image so it will fit the header box, retaining its aspect ratio. If the image is smaller than the header box, the background fills the remaining area. The “Tile” option repeats the image to fill the whole header box while maintaining its aspect ratio.

Checking the Overlap option active will make the survey partly overlap with the header (see picture below).

A screenshot of a survey interface with a question box that is partly in the green area and partly on the grey area

NOTE: Background colour does not matter if the background opacity is set to 100%, but the lesser the opacity, the more the background colour is visible behind the image.

Survey Header Content Alignment Settings

In the survey header advanced settings users can also find alignment settings for logo, survey title and survey description. The Left, Center and Right options control the horizontal alignment, while the Top, Middle and Bottom control the vertical alignment (see the picture below).

Two rows of boxes labeled with positional words: "Left, Center, Right" and "Top, Middle, Bottom."

In the settings above (Center & Bottom) we can put the header in the center of the survey and the bottom part of the header. These settings are demonstrated in the Overlap Example image in the previous chapter.

Survey Appearance Settings

The basic survey appearance settings allow users to customise accent colour, survey element transparency, font settings, survey scale factor and survey corner radius. By toggling the advanced options user will get even more options for each of these, and additional settings to the page, question boxes, etc.

Survey Accent Colour

The accent colour of the survey is the colour used when highlighting the survey’s key elements like title, currently focused field, and selected choice. In basic settings, accent colour is determined by using the colour selection box containing a colour picker, HEX input field and picklist (see picture below).

A color picker interface showing a teal accent color with its hex code #19B394.

Survey Element Opacity

The panel and question box opacity setting adjusts how transparent the panels and questions are related to the survey’s background. The same type of setting is available to the input elements like text boxes and the background of radio group buttons (see picture below).

Interface with two opacity settings at 100% with dropdown arrows for adjustments.

Survey Scale Factor Settings

Using the survey scale factor settings, it is possible to adjust the size of the survey’s elements. Adjust the value by entering the wanted percentage into the field, or by using the down and up arrows to set the value (see picture below).

A survey scale factor setting at 100% with down and up arrows for adjustment.

The survey scale factor can go over 100%. When adjusting scale factor settings, it is good to test the survey afterwards to ensure that it retains its readability.

Survey Corner Radius Settings

In the basic survey appearance settings, adjusting the survey corner radius setting will affect all rectangular elements of the survey. The value is adjusted in pixels and 0px means sharp corner. The higher the number, the rounder the corner. Users can either type the value in the input field or use the arrows to edit the value (see picture below).

A user interface field labeled "Corner radius" with an input box displaying "4px" and up/down arrows.

If users want to adjust the corner radius for the rectangular elements individually, this can be done in advanced settings.

Surveys – Question and Element Types
Surveys – Question and Element Settings
Surveys – Survey Editor
Surveys – General Settings
Surveys – Setting up a new survey
Surveys – Basic Guide
Combined Shape