Documentation Docs
Documentation Docs

Customize the Survey Look

Accent Color

The accent color is used to highlight key survey elements, such as the survey title, selected choice options, and focused input fields.

Survey accent color

Each predefined theme comes with a unique accent color, but you can easily change it by following these steps:

  1. Under the Appearance category, locate the Accent color property.
  2. Select a new accent color from the drop-down menu or use the Color Picker to set the color in RGB, HEX, or HSL. If you know the color code for the color you'd like to use, you can enter it directly into the Accent color input field.
Set the survey accent color

Survey Element Transparency

You can adjust the transparency of panels (sections that group questions) and question boxes (which frame individual questions) relative to the survey background. This setting can help create a cleaner look by blending these elements with the background. To set the transparency, do the following:

  1. Locate the Panel and question box opacity property.
  2. Adjust the opacity between 0% and 100% by using the spinner to achieve the desired transparency level.
Adjust the opacity of panels and question boxes

Similarly, you can customize the transparency of input elements (text boxes, Boolean toggles, the background of checkboxes and radio buttons) using the Input element opacity setting.

Adjust the opacity of question input elements

Survey Font

To change the font used in your survey, follow these steps:

  1. Locate the Survey font family setting.
  2. Expand the drop-down menu and select a font from the available options. If your desired font isn't listed, you can request your development team to add it to your Survey Creator by following the instructions from the Add Custom Fonts demo.

A specified Survey font family also applies to the survey title. If the title should have a different font, change the Survey title font property in the header settings.

To adjust the font size, use the Survey font size property. You can enter the desired size in percentage or use the spinner for easy adjustments.

Set the survey font

Survey Scale Factor

The Survey scale factor setting allows you to increase or decrease the size of survey elements. Adjust the scale factor using the spinner to achieve the desired dimensions.

Survey scale factor

Corner Radius

The Corner radius property controls the roundness of all rectangular elements (panels, question boxes, input fields).

Set a common corner radius for rectangular survey elements

To set corner radii for specific elements, enable the Advanced mode toggle in the Appearance category and use individual corner radius settings.

See Also

Survey Theming

Send feedback to the SurveyJS team

Need help? Visit our support page

Copyright © 2024 Devsoft Baltic OÜ. All rights reserved.

Your cookie settings

We use cookies on our site to make your browsing experience more convenient and personal. In some cases, they are essential to making the site work properly. By clicking "Accept All", you consent to the use of all cookies in accordance with our Terms of Use & Privacy Statement. However, you may visit "Cookie settings" to provide a controlled consent.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.