Styles tab

To alter the visual aspects of your Survey, navigate to the Styles Tab within the builder. In this section, you can tailor the appearance of your survey by adjusting elements such as colors, borders, and additional design features. Customizing the look of your survey allows you to create a cohesive and aesthetically pleasing user experience that aligns with your brand identity.

Image

Layout

Here you will find your survey layout settings, meaning the way the fields will be spread across the survey.

Input Style

With the Input Style, you can change the appearance of the fields.

Image

Width

Modifying the survey's width is also possible by adding a number in the given field. The higher the number, the wider the survey will be.

Image

Field Spacing

This number will determine the space between the field lines.

Image

Padding

The padding adds spaces to the survey so the elements are not on top of the margin or too close to the edge. These four (4) different padding fields move the survey to the left, right, top, or bottom depending on the field you add padding. Simply type a number into the given field to add padding to the top, bottom, left, or right based on your preferences.

Image

Show Label

If you want the field label to be hidden disable this option.

Image

Footer

Footer Type

The footer type defines the look and behavior of your Footer

Stick to Card: This footer type will be part of each survey page, this will not show the progress of the survey instead it will prompt the responders to continue.

Image

Stick to page: This will keep the footer at the bottom of the page regardless of the step they are on and you can select to display the progress for the survey by step or percentage.

Image

The progress bar, if enabled, is completely customizable including the colors of the text and progress bar.

Image

Background Fill

This defines the color of your footer, to change the background color, click on the color box and select a color or add a custom code.

Image

Footer Height

This defines the thickness of the footer, higher numbers get you a bigger footer.

Image

Font Family, Size, and Weight

This allows you to customize the font and its look for the progress buttons (Next and Prev)

Image

Buttons

Here you can control the look and text of the advance, revert and complete buttons.

Image

Colors & Background

Background

To change the background color, click on the color box and select a color or add a custom code, this will affect the general survey's background.

Image

Font Color

This will modify the font color user responses have when data is entered. You can see it by previewing the survey.

Image

Input Background

This will change the background color for the response fields.

Image

Background Image

The background image is intended to cover the entire page, providing a visually appealing backdrop for the survey.

Image

Header Image

The header image is designed to cover the entire width of the survey and remains positioned at the top of the survey.

Image

Miscellaneous

Agency Branding

In the Miscellaneous section, toggle on or off the company Branding option to show or remove agency branding at the bottom of your survey. Turning it off allows you to place your survey on a different funnel from the agency's.

Image

Advanced Settings

Here you can configure the look of the surveys further, allowing you to get detailed with your changes.

Survey and Input Field.

This allows you to modify the look of the borders and surroundings of the survey and its input fields. The modifiable options are:

  1. Border Width: To add thickness to the border lines.
  2. Corner Radius: To round the corners of the borders, you get a rounder corner the higher the number you input.
  3. Border Color: This allows you to modify the color to your liking.
  4. Border Style: Here you can modify the look of the border or remove it altogether.

Image

  1. Shadow: These options allow you to give additional depth to your survey/fields. The horizontal and vertical fields set the size, Blur sets the opacity, and Spread limits how far the shadow should extend.

Image

  1. Field Padding: This adds space between fields to prevent overcrowding in the survey.

Image

Label, Short Label, and Placeholder. 

These sections allow you to change the font and its color, size, and weight for the text inside the survey. The label will be what shows on top of a field (1), the short label will show underneath (2), and the placeholder will show inside a field (3).

Image

Custom CSS.

You can add custom CSS to your survey in the Custom CSS box to modify the design of your surveys, such as input fields' shapes, colors, buttons, and more. Consult with a web developer familiar with CSS if you are unfamiliar with this option.

Image

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us