Styles tab
Summary:
Use the styles tab to change the look and feel of your survey.
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.
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.
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.
Field Spacing
This number will determine the space between the field lines.
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.
Show Label
If you want the field label to be hidden disable this option.
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.
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.
The progress bar, if enabled, is completely customizable including the colors of the text and progress bar.
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.
Footer Height
This defines the thickness of the footer, higher numbers get you a bigger footer.
Font Family, Size, and Weight
This allows you to customize the font and its look for the progress buttons (Next and Prev)
Buttons
Here you can control the look and text of the advance, revert and complete buttons.
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.
Font Color
This will modify the font color user responses have when data is entered. You can see it by previewing the survey.
Input Background
This will change the background color for the response fields.
Background Image
The background image is intended to cover the entire page, providing a visually appealing backdrop for the survey.
Header Image
The header image is designed to cover the entire width of the survey and remains positioned at the top of the survey.
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.
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:
- Border Width: To add thickness to the border lines.
- Corner Radius: To round the corners of the borders, you get a rounder corner the higher the number you input.
- Border Color: This allows you to modify the color to your liking.
- Border Style: Here you can modify the look of the border or remove it altogether.
- 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.
- Field Padding: This adds space between fields to prevent overcrowding in the survey.
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).
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.
