Creating the Questionnaire

If you want to create a questionnaire that is available to people via the World Wide Web, you will need to create a Web form. Forms are created in HTML. You can use a Web page development application such as DreamWeaver or Microsoft FrontPage to create a form or you can follow TeamWeb's instructions in the Web Forms site.

The information gathered by the form is processed by a CGI script or some other scripting method. This tutorial (in the Data Collection Method section) will discuss the use of CGI and ColdFusion scripts.

Forms consist of three parts:

1. The opening and closing form tags, which include 'Method' and 'Action' attributes. The 'Method' attribute directs how the form data gets to the server and the 'Action' attribute contains the URL of the script that will process the form data.
2. Form fields, which include text fields, menus, checkboxes, or radio buttons.
3. A Submit button, which sends the data to the script on the server.

For more information on forms or to create an online form in HTML, visit TeamWeb's Web Forms site. For assistance with creating forms, contact TeamWeb's consulting desk.

Creating a form with DreamWeaver

This tutorial addresses using DreamWeaver to create a form and assumes you know the basics of DreamWeaver.

Choose Window/Objects to view the Objects panel. In the Objects panel, click on "Common" and select Forms. The Forms panel contains buttons that allow you to insert a form and form elements.

Type the text for your questionnaire and include the form elements you want to use. The basic form elements are:

• text box
• radio button
• checkbox
• menu or list

Each form element has a Properties box where you define the properties of that form element. Text Fields provide the respondent with an opportunity to type a response. They should have the following properties defined:

• name, a unique name for the Text Field.
• character width or Char Width, the width of the Test Field as it appears in the form,
• maximum character length or Max Chars, the maximum number of characters available for input in the Text Field, and
• type, whether the Text Field is Single line or Multi-line.
  

Radio buttons and checkboxes provide the respondent with pre-set choices. The difference between the two is that radio buttons operate in an on/off method with only one choice possible. Checkboxes allow multiple possibilities.

Radio buttons and Checkboxes should have a unique names and values. Choose "Checked" for Initial State if you want an option to appear selected when the forms first loads in the browser.

Menus and Lists provide the respondent with many choices in a limited space. Properties you need to define include a descriptive name for each menu or list, the Type of each (whether it's a pop-up menu or a scrolling list), and List Values, where you assign a label to each choice or option in the list.

Somewhere on the form (usually at the bottom) you will include a Submit button and a Reset button. The Submit and Reset buttons are created with an INPUT tag. (see Action Buttons section of Web Forms). The Submit button sends the form data to the server for processing and the Reset button allows respondents to correct any mistakes they might have made when filling out the form. Button Name assigns a name to the button. (Submit and Reset are reserved names.) Label defines the text that appears on the button and Action defines what happens when the button is clicked. See "SUBMIT" later in this document.

Creating a form with FrontPage

This tutorial addresses using FrontPage to create a form and assumes you know the basics of FrontPage.

Choose Form/Form from the Insert menu. This will insert the main form tags and Submit and Reset buttons. Type the text of your questionnaire and wherever you want to include a form element, click an insertion point and choose Form/form element from the Insert menu. Each element in the form has a name property and a value. The name identifies the input field and the value reflects the respondents' choice.

Choices for the form elements are:

• One-Line Text Box
• Scrolling Text Box (or Text Area)
• Check Box
• Radio (or Option) Button
• Drop-Down Menu (or Box)
• Push Button (or Advanced Button)

Two ways to set the properties of form elements are:

1. double-click on the element or
2. right-click on the element and then select Form Field Properties from the drop-down menu.

Text Boxes, both One-Line and Scrolling, provide the respondent an opportunity to type a response. They should have the following properties defined:

• Name (each text box should have a unique name),
• Width in characters sets the width of the Text Box as it appears in the form,
  The Validate button opens the Text Box Validation dialog box which allows you to set more specific constraints on the data allowed in the field.

Radio (or Option) Buttons and Check Boxes provide the respondent with preset choices. The difference between the two is that Radio Buttons operate in an on/off method with only one choice possible. Check Boxes allow multiple possibilities.

Check Boxes should have unique names and values. Choose "Checked" for Initial State if you want an option to appear selected when the form first appears in the browser.

A group of Radio Buttons should have the same Group name. Each button within the group, however, should have a unique value. Another property that can be set is Initial State to indicate if that button should be on or off when the form is first displayed or when reset.

Drop-Down Menus provide the respondent with many choices in a limited space. Assign a unique descriptive name to each menu. Click Add to create the different options that will appear in the drop-down menu. Initial State determines whether or not the current choice is selected when the form is first displayed or upon being reset. (Note: To make a drop-down menu display as a scrollable list, change the Height to greater than one in the Drop-down properties box.)

Is your questionnaire "accessible"?

Make sure your questionnaire is accessible to all of your respondents, including those with disabilities. To accomplish this, include <label> tags within the form. The <label> tags are used with the text that identifies the information being requested and that shows up on the Web page (typically the question you are asking).. Include the "id=" attribute to the "input" information identifying the appropriate label. For example, the code for this name text box would be:

<form name="example" method="post" action="">
<label for="name1">Name</label>
<input type="text" name="name" size="50" id="name1" >
</form>

Bobby is a Web-based application that will identify accessibility problems that exist in your survey and show you how to fix them. Simply type in the URL of your questionnaire and Bobby will evaluate the page and return a report indicating errors found and ways to correct the errors. Bobby is available at http://www.cast.org/bobby/.