Add Colors and a Logo to Your Survey Header

Looking to create a header at the top of your survey, perhaps with your logo and brand along with your survey title? Not all of our pre-built themes and color palettes highlight the header, but customizing your survey to do so is easy!

Add a Header

If you've selected either a Pre-Built Theme or Quick Color Scheme palette that does not highlight the header as much as you would like simply click the Header thumbnail on the left to select a different color for your header. Be sure to click Apply Changes once you've selected the perfect color.

Adjust Header Width

Some header containers will match the width of the page, others will match the width of the survey.

To customize this go to Layout > Widths / Sizing and adjust the Page width. Consider the Page content width as well to get the header look and feel you desire.

You can also take advantage of the Space above the header if you wish to separate it from the overall page a bit.

Add a Header Logo Image

Looking to add your logo or another image to the top of your survey? Adding a header image is easy! Click the Logo thumbnail to get started. Click the Add Image Link to select an image from your SurveyGizmo File Library or click Upload image file to upload a new image from your computer. If your image is hosted online, you can paste the image url into the Image URL field instead of uploading the image to your library.

Once you have added your image, use the position and size controls as needed.

 Header Image Sizes

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. To accommodate this image size, change your Page Width (available under Style > Layout > Widths/Sizing) to 100%.

Remove a Header Image

Removing a header image is easy! Simply click the Logo thumbnail and click the link to Remove / Change Image. Finally, click the No Image option in the upper-left corner! Be sure to click Apply Changes when you are finished.

Adjust Header Image and Survey Title Alignment

Click the Logo thumbnail and select left, right or center in the Position dropdown menu. Be sure to click Apply Changes when you are finished.

To adjust the position of the survey title click Text > Text Options and select left, right, or center in the dropdown menu to the right of the Show Survey Title option.

You'll notice the header image and survey title will be stacked one on top of the other. This might not be exactly what you were looking for. If you'd prefer to have both your image and survey title on the same line, you'll need to use a little CSS code.

To do so scroll to the bottom of the survey preview and click HTML/CSS Editor link paste one of the below codes in the field on the Custom CSS tab. 

Left align header image


.sg-header-image{
float:left;
padding-left: 10px;
}

Right align header image


.sg-header-image{
float:right;
padding-right: 10px;
}

Want Two Header Images?

Want to have two images? No worries, we've got you covered!

First, get the links for both images. If the files are located in our File Library, go to Account > Libraries > File Library.

When you click on an image, you'll see the File URL of the image. Copy this and paste it someplace where you can come back to it later. Repeat this step for the second header image.

Now go back to the survey you want to edit and then click Style and scroll to the bottom of the survey preview and click HTML/CSS Editor link. 

You'll be editing both the HTML and CSS of the theme. Let's start with the HTML.

Go to the Custom HTML tab. You need to replace the sg-header-image code with these two pieces of code, where you replace the two links inside these examples with your own links you copied earlier.

<img class="sg-header-image1" src="http://surveygizmolibrary.s3.amazonaws.com/library/193520/tumblr_m1us8cTeCo1r80otbo1_500.jpg" alt="[template("header image text")]" width=50%/>

<img class="sg-header-image2" src="http://surveygizmolibrary.s3.amazonaws.com/library/193520/tumblr_lex7n7CGpL1qzrblzo1_500.jpg" alt="[template("header image text")]" width=50%/>

You can adjust the size of the header images by putting in different values for the width=50%. Don't go over 100% as it will cause your images to become pixelated.

Now, go to the Custom CSS tab and paste the following code. You can see that image 1 will float to the left, image 2 will float to the right. You can adjust these as needed.

.sg-header-image2 {
  float:right;}

.sg-header-image1 {
  float:left;}

.sg-header {
  overflow:hidden;}

h1.sg-title {
    clear: both;
}

Once you're done, click Save Changes and see how it looks!

Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In