Styling Theme

Keep the survey styling consistent over all surveys with a Styling Theme. Customize the colors, fonts, and other styling options to match your brand's aesthetic.

Configuration

In the left side bar, you find the Configuration page. On this page you find the Look & Feel section:

Choose a link survey template

Styling Options

  1. Form Styling: Customize the survey card using the following settings
Form styling options UI
  • Brand Color: Sets the primary color tone of the survey.
  • Text Color: This is a single color scheme that will be used across to display all the text on your survey. Ensures all text is readable against the background.
  • Input Color: Alters the border color of input fields.
  • Input Border Color: This is the color of the border of the form input field.
  1. Card Styling: Adjust the look of the survey card
Card styling options UI
  • Roundness: Adjusts the corner roundness of the survey card and its components (including input boxes, buttons).
  • Card Background Color: Sets the card's main background color.
  • Card Border Color: Changes the border color of the card
  • Card Shadow Color: Adds a shadow effect for depth
  • Hide Progress Bar: Optionally remove the progress bar to simplify the survey experience
  • Add Highlight Border: Adds a distinct border for emphasis.
  1. Background Styling: Customize the survey background with static colors, animations, or images (upload your own or get from Unsplash)
Background styling options UI
  • Color: Pick any color for the background
  • Animation: Add dynamic animations to enhance user experience..
  • Upload: Use a custom uploaded image for a personalized touch
  • Image: Choose from Unsplash's extensive gallery. Note that these images will have a link and mention of the author & Unsplash on the bottom right to give them the credit for their awesome work!
  • Background Overlay: Adjust the background's opacity

Customize your survey with your brand's logo.

  1. In the Look & Feel page itself in Product settings, scroll down to see the Logo Upload box.
Choose a link survey template
  1. Upload your logo
Choose a link survey template
  1. Add a background color: If you’ve uploaded a transparent image and want to add background to it, enable this toggle and select the color of your choice.
Choose a link survey template
  1. Remember to save your changes!
Choose a link survey template

Overwrite Styling Theme

You can allow to overwrite the styling theme for individual surveys to create unique styles for each survey:

Choose a link survey template

In the survey editor, a tab called Styling will appear. Here you can overwrite the default styling theme.


Was this page helpful?