Edit Design Settings


This feature is included in all plans.


This guide describes what each of the Design settings does. 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!


Here are 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


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-Design tab


1 Design templates

Choose a ready-made design for an instant professional look. There are plenty of different styles which you'll find by scrolling through using the left and right arrows.


Edit design - design templates


2 Layout

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


Edit design - choose layout


Tip: On the right, 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.


Upload your logo by clicking Upload logo. Your logo will be resized to 400px height. Make sure your logo is as large as this or larger in order to guarantee good quality.


Edit design - upload logo


Tip: Your logo will always look better when you opt for a transparent one. Best format for 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.


Use Logo colors


Tip: 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 - detect colors

 

4 Colors

That is not all! You can even customize the Primary color by clicking on the color picker tool.


Edit design - primary colors


Now let's see how to select your color...


Edit design - color picker


The quickest and easiest way is to click on one of the colors from your generated colors. If you want to change the color, move the circle along the color line or within the colored box to your desired shade.


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 as the background or select a solid color.


Click Update background to upload your own image. Images uploaded should have a minimum width of 1920 px. If your questionnaire is only going to be viewed on smartphones or tables, the minimum width should be 621 px and the minimum height should be 1104 px. 


Tip: 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 - update background


If you'd prefer to have no image and a single color, click on the color picker tool. You'll have the four options to adjust the background color to the shade of your dreams! See the detailed explanation above.


Edit design - choose background color


Besides for 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 - color of 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 in the preview screen.


Edit design - settings for content box


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 - edit text color and font


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 - buttons


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

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

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


Edit design - additional design elements


8.2 Page numbers in 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 - progress bar

Edit design - progress bar example


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 - rounded corners

Edit design - rounded corners example


8.4 Survey Anyplace branding

With any paid licence, you can toggle the button below to remove the Survey Anyplace branding.


Edit design - 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 - show previous button


8.6 Icon

An icon is the 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 Update icon and a box will pop-up allowing you to upload your icon.


Edit design - update icon


8.7 Custom CSS

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


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


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


Edit design - custom CSS - add file