How to customize the appearance of the survey

Customizing the appearance of the survey helps you match your brand and provide a coherent experience for your users.


Basically, TotalSurvey offers control of four main aspects of the survey design, which are:

  1. Colors: The colors of different interface elements including buttons, etc…
  2. Size: The overall size of the survey
  3. Spacing: The space between the interface elements
  4. Roundness: The edge roundness of the interface elements

Customizing colors#

The main colors used in the survey are:

  • Primary: Main information and actions
  • Secondary: Secondary information and actions
  • Background: Survey’s background
  • Dark: Texts and labels
  • Success: Success messages
  • Error: Error messages

Customizing the size#

You can change the overall size of the survey to suit your design. Four options are available:

  • Small
  • Regular
  • Medium
  • Large

Customizing spacing#

Depending on your website design, you can choose between:

  • Compact: Small space between elements
  • Normal: Regular space between elements
  • Comfortable: Large space between elements

Customizing border roundness#

Customization of the roundness of elements is possible, you can choose between:

  • Sharp: Interface elements will have sharp edges
  • Rounded: Interface elements will have rounded edges

Reset to defaults#

You can reset design settings by clicking on the "Reset to defaults" button.

Custom CSS#

This field lets you style your survey granularly via CSS.