University of Wisconsin Knowledgebase

• DoIT
• UW
• MyUW
• PEOPLE

WebSurvey@UW - Creating a Template

This document describes how to create a template for your survey.

Creating a New Template:

1. From the Templates menu, select .



2. Enter a name for your template and check the “From Scratch” button.
3. Click the save button  .

You will then be taken to the “Edit Template” screen. Here is where the design work begins. The “Edit Template” screen is divided into 5 sections. You may edit the information in each of the sections to complete the look and feel that you want for your survey.

To view what you are designing:

4. Click on the save button  on the bottom right of the screen.
5. Then click on the preview icon  to the right of the template in the template listing.

General Information

This section contains information related to the template settings. The Template Name is the name assigned to each template in your template library. Active templates can be used in surveys while templates that are not active cannot. Public Use refers to whether or not a template can be viewed and used by other WebSurvey@UW users. A survey without Public Use enabled cannot be viewed or used by other people. The Logo Path* is the remote location of the logo used in the survey and is optional. If left blank, no logo will be used. Logo Alignment refers to the positioning of the logo on the survey pages, and Survey Alignment refers to the alignment of survey pages in the browser screen.

Note:: The logo path must be to a secure server (https), or you survey takers will see a security message on every page of your survey. If you are not sure where to store your logo, a publicly accessible directory on My WebSpace is a good option. For more information on My WebSpace please see http://www.doit.wisc.edu/mywebspace.

Borders and Colors

You can select the color for each area of your survey. To select the color, click on the color palette icon  and make a selection, or if you know it, type in the color code. You can also decide to display a border or not and what the width and color of the border should be.

Font Styles

You can select the font color, size and style for all sections of your survey. To select the color, click on the color palette icon  and make a selection, or if you know it, type in the color code. Then choose the font size, font weight (bold or normal) and finally the font family.

Font Family Choices include:

Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, as well as the Browser Default and Small font.

Header and Footer

You may also further customize your survey by providing HTML text that will be displayed above and/or below the survey page. By providing HTML for the header and footer, you can have the same navigation, header, and footer as your own web site. By customizing the header and footer, in conjunction with the many other template attributes, the entire look and feel of your web site can be copied into your survey.

HTML (HyperText Markup Language) is the code commonly used to design websites on the web. If you are unclear about how to use this optional feature in customizing your template, speak with someone experienced in web design who is able to assist you.

Survey Navigation

The final section in “Edit Templates” deals with the look and feel of the buttons or links that survey takers use to navigate through your survey. There are four navigation functions: Back, Next, Done, and Cancel. You may choose from “Button Paths” or “Link Text” for each function.

Buttons are small customizable graphics that, when clicked, perform one of the four functions. To use buttons, specify the Button Path for each of the four navigation functions. The Button Path is the remote location of the image file to be used for the button.

To customize your button graphics, you can create new graphic files or use existing graphics. To use customized button graphics and specify its remote location, the image file must first be uploaded to a remote server capable of providing access to the graphic file over the internet.

Links are small bits of text that also perform the navigation functions. You may edit the link text in the box to the right of each navigation function. The look and feel of the links may be edited under Font Styles on the template edit page.