The look and feel of your survey can be just as important as the questions you ask. We've selected a default pre-built theme that will give your survey a nice, clean look and feel that will definitely not embarrass you (unless BORING is embarrassing) if you choose to send out your survey without bothering with our style options. But, with all these options, we dare you to ignore the possibilities!
To get started customizing your survey's look and feel, head over the Style tab!
Step 1: Choose a Theme
Click the Themes thumbnail to get started. You can choose one of our Pre-Built Themes, Quick Colors, or, if you've saved any of your themes created with the new theme builder, these will be available under YourTheme Library. You can also skip this step altogether and just jump in and build your style your survey from scratch.
Step 2: Add a Logo
Looking to add your logo to the top of your survey? Adding a header image is easy! Click the Logo thumbnail to get started. Then click the Add Image link. From here you can select an image from your SurveyGizmo File Library or click Upload image file to upload a new image from your computer. Then use the position and size controls as needed.
For best results, we recommend header images of up to 750px wide and 200px tall.
If you would like your header image to display like a banner that stretches across the entire page, we recommend image files 1000px wide and 200px tall.
Step 3: Tweak Your Colors
The Background, Page, Header, Button/Accent and Text thumbnails can be used to take your survey theme to the next level using our various color and image options.
To get started customizing your colors, click on the thumbnail for the area of the survey you wish to modify, Background, Page, Header or Button/Accent. You can choose from the color palette or use the color picker tools on the right to select a hue then adjust it with the darkness and transparency sliders.
Below the color picker, there are additional tools available to get your survey colors just right.
If you have the exact hex code for the color you wish to use you can paste it in the HEX Code field below.
Get Colors From an Image
The option to get colors From Image is one of our favorite features! This tool works great when you need to perfectly match the colors of your survey to your logo!
Get started by clicking Select Image. Next, you can select an image from your SurveyGizmo File Library or click Upload image file to upload a new image from your computer. Once an image is selected, the primary colors from the image will display as thumbnails to the right of the image. Then, simply click the color thumbnail you wish to use.
Get Colors from a Webpage
Finally, you can enter a website URL to extract colors from. Simply enter the URL in the From Webpage field and click the magnifying glass. This will fetch the colors from the website and display them as thumbnails. Then, you can simply click on the color you wish to use.
Please note, this feature works by scanning the CSS of the website, so it will not pull colors from images on the website. If you wish to pull the colors from an image on the website, say a logo, use the Pick from Image tool instead. In addition, this feature will only pull colors from the first three CSS files on the website so any colors from CSS stylesheets four and greater will not be fetched.
Step 4: Explore Survey Background Options
Looking to add some flair to your survey? Adding a background image is a great way to capture potential respondents' interest from the moment they click your survey link. You can choose from our library of images or upload your own image!
Or, if you are looking for more polish than flair, you can choose from our patterns and gradients to use as a background in your survey.
Using a Background Image
Go to Background > Images and choose from our library of images as your survey background. Or, click the link to Choose from Image Library to choose an image from your SurveyGizmo File Library. There is also an option to Upload image file from here.
Once you select an image, select how you wish to display it in the first dropdown menu.
Cover Screen - This option will use the image to fill the background. If it is not big enough it will be stretched to fill the window.
Best Practice Tip: Recommended Background Image Size
For background images you wish to use as a cover screen, we recommend, as a rough guideline, 1920 x 1080px or smaller with the same height-width ratio (1.777 to 1). For more info on full-screen background images check out this awesome article: http://www.webmalama.com/the-best-full-screen-background-image-sizes-for-web-design/
Tile - This option will repeat the image in tiles to fill the background. This option is best for smaller images.
Left - This option will display the image to the upper left corner of the background.
Right - This option will display the image to the upper right corner of the background.
Center - This option will display the image in the center top of the background.
Once you've selected how you wish to display your image, adjust the image brightness using the slider control.
If you wish, you can also adjust the transparency of the survey form to show off your image. To do so, click the Page thumbnail and adjust the Transparency.
Remove a Background Image
If you need to remove a background image simply click Background > Images > Remove Background.
Using a Pattern
If you wish to use a pattern in the background of your survey, we recommend starting by selecting a Background color, as this will be combined with the pattern options to create some really cool options.
Next, go to Background > Patterns to select a pattern to use in the background of your survey. Adjust your pattern's brightness using the control just above the pattern thumbnails.
Finally, in addition to adjusting your pattern's brightness, you can also adjust the transparency of the color that is mixed with your pattern to get that perfect look. To do so, go to Background > Color picker and adjust the Transparency control to the far right up and down.
Using a Gradient
For gradients, start by selecting a gradient that you like and adjust it as you wish. Once you select a gradient to start with, you can change the colors by clicking the arrows below to display a color picker. You can also add a new color to the mix by clicking anywhere on the bar.
Finally, change the gradient to display Left to Right as opposed to Top to Bottom if you wish!
Internet Explorer 8 does not support backgrounds. Backgrounds will display on all other modern browsers.
Step 5: Choose Fonts
To change the font of your survey, go to Style > Text > Header Text and/or Body Text. Select a font, font size and click the bold button if you wish for your text to display as bold.
More Fonts Using Google Fonts!
Not seeing a font that matches your particular style? Add one from Google Fonts! At the bottom of both the Header Text and Body Text font dropdown menus, there is an option to +Add Web Font. Select this option to utilize the power and variety of Google Fonts in your survey.
Next, head over to Google Fonts and find the typeface that suits your survey. We recommend having your survey in one window/tab and Google Fonts in another. Click the Quick Use button once you've made your decision.
If needed, choose the appropriate styles/character sets you wish to use, then copy the Standard code to your clipboard.
Head back over to the Style tab of your survey and enter a name for your Google font in the Font Name field and paste the code from your clipboard in the Font URL field.
The Font Name must be entered as you see it in Google Fonts. You'll also need to delete all but the link portions of the code in order for it to work:
Step 6: Choose Your Layout Options
Under the Layout thumbnail, there are a number of options available. You can toggle the back button, the progress bar, and the Powered by logo.
You can also adjust the width of the page, and the page content, a.k.a the survey. The width of various text fields in your survey can be adjusted here.
One of the most important considerations under the Layout thumbnail is your Desktop Interaction and Mobile Interaction. This determines how survey respondents experience your survey questions and pages. Hover your mouse over each option to see each in action. Below we'll describe and demo each interaction in a survey.
Standard (default) - Survey respondents will experience your survey much like how it is displayed on your Build tab. Check out this survey link on your desktop to see it in action:
One at a Time - This desktop interaction option will display one question at a time. When the respondent submits the question it will slide to the left and the next question will slide in from the right. Check out this survey link on your desktop to see it in action:
Standard - Survey respondents will experience your survey much like how it is displayed on your Build tab. Check out this survey link on a mobile device to see it in action:
One at a Time (default) - Survey respondents will see one question at a time. When the respondent submits the question it will slide to the left and the next question will slide in from the right. Check out this survey link on a mobile device to see it in action:
Not Mobile Optimized - This option will render the survey as it is designed for desktops on a mobile device.
One of the great things about the way the Style tab works is that you can make a series of changes and then decide whether you wish to apply them. If you do, simply click the Apply Changes button. If not, click the Reset Changes button.
If you navigate away from the Style tab without applying your changes don't fret! We'll save all your changes for you and give you the option to apply them when you return to the Style tab.
Preview Your Survey Theme Per Device, Language, and Link
Once you've made your styling decisions, you can preview how your survey will look on a desktop, tablet, and mobile devices. Click the icon in the upper-left corner to see a rough approximation of how your survey will display. We can't account for all screen sizes and display resolutions but this will give you a good place to start!
You may also want to check how your survey looks in different languages.
Finally, if you are using multiple share links for your survey, you can set different themes for each share link. This is a great way to target certain audiences with your look and feel or to simply segment responses for tracking purposes.
Learn more in our Multiple Themes, One Survey Tutorial.
You can add custom HTML and/or CSS to your theme by scrolling to the bottom of the survey preview and clicking the link to access the HTML/CSS Editor. On the Custom CSS tab, you can append your custom CSS to the survey theme. On the Custom HTML tab, you'll see the HTML that is included in your survey theme. This can be customized, but use care. If you'd like to learn more about the standard HTML merge codes for surveys visit our Custom Theme Tutorial. Finally, we now provide you with a space to append HTML to the head of the survey on the Custom <HEAD> tab. For example, if you want to use a special font you can link to it in the head of the survey.
Make sure to Save Changes once you're done and then you, good survey friend, are good to go!
Seeing Something Different?
All styling tutorials contain steps to achieve look & feel customizations using the improved theme designer that was released in November 2014. As of November 2015, the old theme designer has been deprecated. If you seeing something different than the tools covered below this means that you are using a Legacy Theme within Legacy Theme Designer. It's time to make a switch! To do so, go to Style > Customize Theme and click the link to Try The New Theme Designer to access the current theme interface. Learn more about Moving Over to the New and Improved Theme Builder.