Styles Tab
Efrelie
Last Update 3 maanden geleden
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.
Survey Type
Select whether to display questions one at a time or many at a time.
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.
Label Width
This setting controls the horizontal distance between the label and the field.
Label Alignment
Here, you can choose the relative location of the label to the field.
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 to. 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 and 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.
Background Fill
Enter the hex code for the background or choose from the available options in the picker.
Footer Height
This defines the thickness of the footer - a 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).
The progress bar, if enabled for the Stick to Page footer, is completely customizable including the colors of the text and progress bar.
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 of user responses 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.
5. Field Padding: This adds space between fields to prevent overcrowding in the survey.
6. 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.
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.
With these styling options, you have full control over the appearance of your survey—from layout and spacing to colors, typography, and even custom CSS. Taking the time to customize your survey not only enhances visual appeal but also ensures a consistent and professional brand experience for your audience.