Take full advantage of the style options. Make any necessary adjustments to bring your survey design to perfection.
Survey Styles
1. Theme: Choose the theme for your survey between these two nice themes.
- Classic Light: Light background, dark text.
- Classic Dark: Dark background, light text.
- Minimal (Pro): Transparent background, dark text.
2. Survey color: Specify the main color of the survey. The borders of your survey will get the color that you set. You can also define the transparency level of a specific color.
3. Background color: Specify the background color of your survey. Define the transparency level of the chosen color.
4. Text color: Identify the text color of your survey, including the questions, the answers, and the thank you message. Again, there’s a possibility for you to make the color more transparent.
5. Button text color: Define the color of the button texts. Make it more transparent if you wish.
6. Survey width: Specify the width of your survey in pixels or in percentage. For a 100% width, leave the field blank.
7. Survey mobile width: Specify the width of your survey in pixels or percentage for mobile devices.
8. Survey max-width for mobile: Specify the maximum width of the survey container for mobile in percentage. This option will work for the screens with less than 640 pixels width.
9. Survey logo: Add logo image for survey. Click “Add image” to add.
10. Survey cover photo: Add cover image for survey. Click “Add image” to add.
11. Survey title alignment: Specify the alignment of the survey title.
12. Survey title font size: Specify the font size of the survey title.
13. Survey section title alignment: Specify the alignment of the section title.
14. Survey section description alignment: Specify the alignment of the section description.
Question Styles
15. Question font size (px): Define the font size of the survey questions in pixels.
16. Question font size on mobile (px): Define the font size of the survey questions in pixels on mobile devices.
17. Question image styles: Configure the sizing of your question image.
- Image width (px): Set the question image width in pixels. For a 100% image width, leave the field blank.
- Image height (px): Set the question height in pixels.
- Image sizing: Configure the scales of the question images.
- – Cover: Resize the image so that it fills the whole container. The image may be trimmed to fit.
- – Contain: Resize the image to be displayed fully.
- – None: The image is not resized at all.
- – Unset: The variable does not exist.
Answer Styles
18. Answer font size (px): Specify the font size of the answers in pixels.
19. Answer view: Arrange the answers by the following layouts. Note that if at least one of the answers has an image, the answers will be shown in grid layout. In this case, it won’t matter if you have chosen the list layout.
- List
- Grid
20. Answer image sizing: Define the size of the images added to the answers. Choose from the properties below:
- Cover: Resize the image to cover the whole container. The image may be trimmed to fit.
- Fill: Resize the image to cover the whole container. The image may be stretched to fit.
- Contain: Resize the image to be displayed fully.
- Scale-down: Rescale the image to be smaller than contain or none.
- None: The image is not resized.
21. Answer padding (px): Define the distance between the text and the border of the answer box in pixels․
22. Answer gap (px): Specify the gap size between answers in pixels.
23. Answer image size (px): Specify the size of answers image in pixels.
Button Styles (Pro)
24. Button background color: Specify the color of the survey buttons:
25. Button size: Specify the size of buttons in your survey:
- Small
- Medium
- Large
26. Button font-size (px): Specify the text font size inside the buttons in pixels. Note that the button size will change simultaneously with the button text size.
27. Button padding (px): Define the distance between the text and the border of the buttons in pixels.
- Left/Right
- Top/Bottom
28. Button border-radius (px): Make the corners of the buttons rounder by setting a pixel value.
29. Custom class for survey container: Use your custom HTML class for adding your custom styles to the survey container.
30. Custom CSS: (Pro) Enter your own CSS code.
