Edit Design Settings

Edit Design Settings to customize your survey's design to match your company colors and identity. There are loads of different features for you to play around with. Each one works independently, so choose as many or as few as you fancy to customize your design!


    Professional         
   Enterprise         
   ReportR         
   DistributR     

tip
TIP




Here is the list of what you can do in the Design tab.

  1. Design templates
  2. Layout
  3. Logo
  4. Colors
  5. Background
  6. Text
  7. Buttons
  8. Additional Design Elements
  9. Save Design as template

You'll need to be logged in to make changes to your questionnaire. We're working in the Design tab. Make sure to save changes periodically.

Edit Design Settings- Design tab

1. Design templates

Choose one of our ready-made templates for an instant professional look. There are plenty of different styles which you'll find by scrolling through. Expand the design templates gallery for more templates.

Edit Design Settings- browse templates

2. Layout

Choose the position of your logo, text, and buttons. Click the icon displaying how the different layouts will appear on the screen - Left, Centered, or Compact.

Edit Design Settings- layout tab

note
NOTE


On the left bottom, you'll see a mini-preview screen of how your questionnaire will appear. This will follow you down the screen as you scroll down to different design options and updates as you make changes.



Edit Design Settings- mobile preview

Keep in mind that on a mobile device the survey layout will always look as compact.

Upload your logo by clicking Upload logo. Your logo will be resized to 400px height. Make sure your logo is at least 400px in order to guarantee good quality.

Edit Design Settings- logo

tip
TIP


Your logo will always look better when you opt for a transparent one. The best format for the logo is PNG.




A box will pop up displaying the detected colors and asking if you'd like to use those colors. Click Yes, please, if you're happy to use those colors in your design. If you're not sure about the colors, click No, thanks for now.

Edit Design Settings- logo colors

note
NOTE


You can use a template together with your logo colors. Your logo colors will be used for different parts of the text and template




If you decide later that actually you do want to use the logo colors, click Detect colors to automatically detect the colors from the logo you've uploaded and then click Yes, please to use the logo colors.

Edit Design Settings- logo detect colors

4. Colors

You can also customize the Primary color by clicking on the color picker tool.

Edit Design Settings- primary color

To select your color, just click the Primary color icon and you will see a window like the one below.

Edit Design Settings- change color

If you want to change the color, move the circle along the color line or within the colored box to your desired shade.


tip
TIP


If your company logo has a color code, you can select it here. Use the arrows to choose from HEX, RGB, or HSL.



5. Background

In this section, you can choose your own image to use it as a background or select a solid color.


Click Update background to upload your own image. If your questionnaire is going to be viewed on desktops, the minimum width should be 1920 px, and the minimum height should be 1536 px. If it is only going to be viewed on smartphones or tablets, the minimum width should be 621 px, and the minimum height should be 1104 px. The maximum file size is 2MB.


note
NOTE


If you are using your questionnaire on a specific tablet, you can use the sizes of that tablet for the size of your background for optimal use.



Edit Design Settings- update background

If you'd prefer to have no image but only a single color, click on the color picker tool. You'll have the four options to adjust the background color to the shade that suits you best. 


Besides customizing the main background image or color, you can also customize the color of the Content box. The Content box is the box where the question text is written and is overlaid on the background image.

Edit Design Settings- content box

Click the color picker tool to adjust the color of the Content box, and slide the circle to adjust the transparency of the box. All the changes you make will be visible immediately on the preview screen.

Edit Design Settings- content box

tip
TIP


You can also add a Background Image or color per question/question block. Read Question grouping to see how to set it up.



6. Text

You have four different options here. Click the down arrow for a drop-down menu to change Font or Font size

Use the color pick tool to adjust the Font color and Link color. Read the detailed explanation about choosing a color above.

Edit Design Settings- font color

7. Buttons

Here you can change the Button color or the Button text color by clicking on the color picker tool. 

You'll be offered different ways of choosing your required color. Read the detailed explanation about choosing a color above.

Edit Design Settings- buttons

note
NOTE


The color of the scroll bar in your survey is by default grey. It can be changed with CSS, but CSS pseudo-element ::-webkit-scrollbar is not yet supported on all browsers. 


When you hover over the scroll bar, its color will change to your buttons and sliders color if not overwritten by CSS. You can change the hover color with CSS by using 

"::-webkit-scrollbar-thumb:hover { background: CUSTOM_COLOR; }".



8. Additional design elements

There are additional design elements that you can make changes to. Let's see what they are.

8.1 Progress bar

8.2 Page numbers in the progress bar

8.3 Rounded corners

8.4 Pointerpro branding

8.5 Hide Previous Button

8.6 Icon

8.7 Custom CSS

8.1 Progress bar

Click on the down-arrow to choose how the progress bar will look at the top of your survey. The preview screen displays the Arrow design, but you can change it to Bullets or Hidden if you do not want it displayed at all.

Edit Design Settings- additional design elements

warning
WARNING


The Bullets option is available in the Professional, Enterprise, and ReportR plans.



8.2 Page numbers in the progress bar

When you have the Progress bar set to display as Arrows, here you can choose if you want the page number displayed inside the arrow or hidden.

edit design settings- show page numbers in progress bar

Edit Design Settings- progress bar

8.3 Rounded corners

Toggle the button to turn rounded corners on or off. See the example below, which shows the difference in the corners of the boxes.

Edit Design Settings - rounded corner

Edit Design Settings- rounded button

Edit Design Settings- square button

8.4 Pointerpro branding

With any paid license, you can toggle the button below to remove the Pointerpro branding.

Edit Design Settings- show pointerpro branding

8.5 Hide Previous Button

Toggle the button to hide the Previous button. Respondents will not be able to go to a previous page in the questionnaire.

Edit Design Settings- show previous button

note
NOTE


Depending on the template you choose, you may have a next button or an arrow to navigate through your questionnaire questions.



8.6 Icon

An icon is an image that will be shown to users in the browser tab and short-links on tablets and smartphones.


Add an icon to your survey to give an extra level of branding and familiarity to users. Click the Update icon, and a box will pop up allowing you to upload your icon.

Edit Design Settings- add icon

8.7 Custom CSS

book
DEFINITION


Custom CSS allows you to change other elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab.




warning
WARNING


Adding Custom CSS is an option for the Enterprise and ReportR plan only.




Make a CSS or Text-file with the changes you want, and upload it by clicking Add custom CSS file.

Edit Design Settings- add custom css

9. Save design as template

You can save the custom template you have created. Under the Design templates gallery click Custom and then click Save current design as template. 

Edit Design Settings- save as a template

Once you edit the Title and the Thumbnail of your template, click Save and close.

Edit Design Settings- save as template

Now you can use your saved template in all of your surveys.

What's next?

  • Add a Custom Button with HTML: Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice. 
  • Set up your Intro screen: The intro screen is the first screen your respondents will see when they're taking your questionnaire. When you're sending out a questionnaire, you'll want to give your respondents a bit of information before they start. You can do this with the Intro screen.
  • Set up your final screen: The final screen aims to give a final message to your respondents, thank them for participating, give further instructions or leave some extra information. You can also display the respondent score like a percentage or a gauge chart.
S
Support is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.