Overview

The Appearance section allows you to customize the visual design and branding of your survey. It controls how the survey is presented to respondents and helps create a professional, engaging, and brand-consistent survey experience.

Using Appearance settings, you can:

• Apply predefined themes
• Create and save custom themes
• Upload your company logo
• Customize colors and fonts
• Add background images
• Configure question layouts
• Customize navigation buttons
• Add custom CSS and JavaScript

All appearance settings are applied at the survey level and are reflected in the survey preview in real time.

A well-designed survey helps:

• Strengthen brand identity
• Improve readability
• Enhance respondent experience
• Increase survey completion rates

Creating reusable branded themes allows teams to maintain consistency across multiple surveys without redesigning each survey from scratch.

Key Use Cases

• Apply company branding to surveys
• Create reusable survey themes
• Add logos and brand colors
• Customize survey layouts
• Improve survey readability and engagement
• Create unique survey experiences using custom styling

How to Access Appearance

1. Open the required survey.
2. Navigate to the Build section.
3. From the left navigation panel, click Appearance.

The Appearance section contains three tabs:

• Default Themes
• Saved Themes
• Modify Theme

A live survey preview is displayed on the right side, allowing you to instantly view design changes.

Default Themes

Default Themes provide ready-to-use survey designs that can be applied instantly.

Each theme contains predefined styling for:

• Question text
• Answer text
• Buttons
• Background elements

Create New Theme

To create a completely custom design:

1. Click Create New Theme.
2. The system will open the Modify Theme section.
3. Configure your preferred styling options.
4. Save the theme for future use.

Custom themes can be reused across multiple surveys, helping maintain consistent branding.

Saved Themes

The Saved Themes tab displays all themes that have been previously created or customized.

From this section, you can:

• Apply an existing theme
• Edit a saved theme
• Duplicate a theme
• Manage themes using the options menu

Modify Theme

The Modify Theme section provides complete control over your survey's visual appearance.

Theme Name

Use the Theme Name field to rename and organize your custom themes.

Header Customization

Header Customization controls branding elements displayed at the top of the survey.

Upload Logo

You can upload your company logo to display within the survey.

To upload a logo:

1. Click Upload Logo.
2. Select an image file from your device.
3. Upload the logo.

The logo will immediately appear in the survey preview.

Logo Alignment

Choose how the logo is aligned within the survey.

Available options:

• Left
• Center
• Right

Logo Size

Control how prominently the logo appears.

Available options:

• Small
• Medium
• Large

Logo Position

Choose where the logo is displayed.

Available options:

• Header (Top of Page)
• With Question

Header Background

Customize the background color of the survey header.

Add Link to Logo (Optional)

You can make the logo clickable by adding a URL.

This can be used to redirect respondents to:

• Company websites
• Product pages
• Landing pages
• Support portals

Page Style

Page Style controls the overall visual design of the survey.

Font

Select the font used throughout the survey.

Changes are reflected immediately in the preview panel.

Question Text

Customize the color used for survey questions.

Answer Text

Customize the color used for answer options and response text.

Button

Choose the color used for survey buttons.

Button Style

Select the appearance of navigation buttons.

Available options:

• Filled
• Border

Page Background

Choose a background color for the survey page.

Background Image

Upload an image to use as the survey background.

Background Image Settings

When a background image is added, additional options become available.

Image Layout

Choose how the background image is displayed:

• FullScreen
• Repeat
• None

Image Opacity

Adjust the transparency of the background image using the opacity slider.

This helps balance visual appeal with survey readability.

Lower image opacity often improves readability when using detailed or colorful background images.

Question Layout

Question Layout controls how survey questions are presented to respondents.

Layout Style

Choose how questions are displayed.

Available options:

• Standard Layout
• Boxed Layout

Standard Layout

Questions are displayed directly on the page without additional containers.

Boxed Layout

Questions are displayed inside a dedicated container box.

Additional customization options become available:

• Box Background
• Show Box Border
• Box Shadow

These settings help create a more structured survey layout.

Question Alignment

Choose how questions are aligned on the page.

Available options:

• Left
• Center

Indicate Mandatory Question

Enable or disable the mandatory question indicator.

When enabled, required questions display a visual marker such as an asterisk (*).

Navigation

The Navigation section controls how respondents move between survey pages.

Navigation Style

Choose the design of navigation controls.

Available styles include:

• Solid
• Outlined
• Solid Up/Down
• Previous / Next

Each option updates the survey preview immediately.

Navigation Alignment

Choose where navigation buttons appear.

Available options:

• Right
• Left
• Apart

Navigation Position

Choose where navigation buttons are displayed.

Available options:

• Footer (Bottom of Page)
• With Question

Advanced Styling

Advanced Styling provides additional customization capabilities for advanced users.

The section contains two tabs:

• CSS
• JS

CSS Customization

Use custom CSS to override default survey styling.

Common use cases include:

• Custom fonts
• Additional spacing
• Layout adjustments
• Advanced branding
• Responsive styling

JavaScript (JS)

Use custom JavaScript to implement advanced front-end customizations and behaviors.

JavaScript can be used to:

• Add custom interactions
• Extend survey functionality
• Implement advanced UI behavior

Custom CSS and JavaScript should be tested thoroughly before publishing to ensure the survey functions correctly across devices and browsers.

Save Your Theme

After completing your customizations:

1. Click Save as New Theme.
2. Enter a theme name if required.
3. Save the theme.

The theme will be available under Saved Themes for future use.

Reset Changes

To discard unsaved modifications:

1. Click Reset Changes.
2. The theme will revert to its last saved configuration.

Preview and Publish

A live survey preview is available on the right side of the Appearance page and updates automatically as changes are made.

Before publishing, review:

• Logo placement
• Colors
• Fonts
• Layout settings
• Background images
• Navigation styles

Once satisfied:

1. Click Publish.
2. Confirm the publication.

If the survey is already live, republishing ensures that all appearance updates become visible to respondents.

Appearance changes are not visible to respondents until the survey is published.