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 colours, borders, and additional design features. Customising the look of your survey allows you to create a cohesive and aesthetically pleasing user experience that aligns with your brand identity.
Here you will find your survey layout settings, meaning the way the fields will be spread across the survey.
With the Input Style, you can change the appearance of the fields.
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.
This number will determine the space between the field lines.
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.
If you want the field label to be hidden disable this option.
The footer type defines the look and behaviuor 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 customisable including the colours of the text and progress bar.
This defines the colour of your footer, to change the background colour, click on the colour box and select a colour or add a custom code.
This defines the thickness of the footer, higher numbers get you a bigger footer.
This allows you to customise the font and its look for the progress buttons (Next and Prev)
Here you can control the look and text of the advance, revert and complete buttons.
To change the background colour, click on the colour box and select a colour or add a custom code, this will affect the general survey's background.
This will modify the font colour user responses have when data is entered. You can see it by previewing the survey.
This will change the background colour for the response fields.
The background image is intended to cover the entire page, providing a visually appealing backdrop for the survey.
The header image is designed to cover the entire width of the survey and remains positioned at the top of the survey.
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.
Here you can configure the look of the surveys further, allowing you to get detailed with your changes.
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 Colour: This allows you to modify the colour 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.
These sections allow you to change the font and its colour, 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).
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, colours, buttons, and more. Consult with a web developer familiar with CSS if you are unfamiliar with this option.
