Part I: Collect Data with Gather--Create the Web Form

Version 515

The Web provides you with an easy way to collect information from many people. Whether you want to survey Haverford faculty members about their opinions on a particular topic, or conduct research with subjects all over the world, you can use web forms to gather the data so that you can analyze it. A commonly available CGI tool called FormMail can be used to transmit contents of a completed form to any email address. However, this typically only works well for small amounts of data.

The Gather tool was developed by Matthew Nocifore, Director of Networking and Systems at Haverford College, to work in a similar fashion to the FormMail tool, except that data submitted via Gather is stored in a database on a central server. This allows the data to be downloaded at any time and analyzed using a variety of statistical and data analysis packages.

This presentation will show you how to use DreamWeaver to create web based surveys to utilize this tool, and how to extract the results of the surveys for analysis.

The Gather Tool

There are four basic steps for using the Gather tool:

• Create a web based survey form : we will use Dreamweaver (an HTML editor) to show you how to use all the form elements in designing a survey. You do not need to know HTML or have any prior experience to use this program.
• Post the form on the web (personal web space/college web server - see separate instructions)
• Distribute the URL or web address to those who will need to take the survey
• Access the data from your survey forms. The Gather program is quite flexible in terms of the formats in which you can access your data. (e.g. excel spreadsheet) and you can access it in various standard formats that can be read by any database or statistical package. The data is available to you using your Haverford email username and password, or using a special web account that you will create. You can also set a special sharing password that will allow anyone who knows the password to access the data, or provide some criterion before a data form is accepted.

Creating a Survey Form

The first step is to create a web based survey form for your users to fill out. We use the software package Dreamweaver to do this.

Dreamweaver is available on all computers in the public computing labs, on the second tier of the library and the public computers in the INSC. It is also site licensed to the college and available to download from the ACC software page (http://www.haverford.edu/acc/software).

We have created a template to use to make a basic web form.

1. Go to http://www.haverford.edu/acc/webdev/gather/course_eval.html
2. Save the form to your computer by choosing Save As... from the File menu. Name the file username.htm, using your email username. Save it as"Source" or "HTML" format (not as text), in a local storage folder where you can easily find it.
3. Open the file you just saved in Dreamweaver.

Create a Form Area

The Form Area contains all the questions and potential responses for your survey. All the questions and interactive elements will need to be in this "area". Please use each of the types of form elements we show you so you can see how they work with the Gather program.

1. Click the mouse just before the number for question #1 in the survey, to place the cursor.
2. From the Objects palette (see figure below) switch to Forms and click on the Insert Form icon. You will be using this palette to select the various form elements that we will be using in our survey. You can also go to the Insert menu and choose Form from the submenu.
   (If the Objects palette is not open, go to the Window menu and select Insert.)

3. In the properties dialog box for Action type in: http://cgi.haverford.edu/acc/gather/gather515.
   For Method, verify that "Post" is selected. This step ensures that the form will be processed by the Gather program. Ignore Form Name, leave the default entry.

 

4. Highlight all of the questions, from before the #1 to the end of question #6, and drag all the questions inside the red box that appears before them. Only information contained in the red Form Area will be sent to the Gather CGI for processing.

Identifying the Form (Hidden Fields)

The Gather program needs certain essential information as to who owns the form and what the name of the form is in order for you for you to be able to retrieve your data. Since this is information that Gather needs but your users need not know about, you will place this information in hidden fields that will not be visible on the finished form that your users fill out.

1. Click before question #1, but inside the red box. From the Form Objects palette select the Insert Hidden Field icon.
   Under Hidden Field type in FORM_OWNER (all caps). For Value, type in your full username, e.g. juser@haverford.edu

You will see a small icon labeled H in the red form area. If you need to change the contents of this hidden field, you can click on the hidden icon.

2. Now create a second hidden field the same way you did the first. Name this hidden field FORM_NAME and make the value survey. This is the name under which the data will be saved on the Gather server. Gather will only know about the FORM_NAME, not the filename. (Gather will not recognize the name inserted in the properties palette).

 

Pop-up List/Menus

Create a pop-up menu for the answers to question #1. Pop-up menus allow the respondent to select one answer from a drop down list of specified answers.

1. Highlight the answers to question #1 (2000, 2001 ...) and delete them. These will be the options in the pop-up menu, but you will need to enter them manually.
2. After the question mark, click on List/Menu from the Form Objects palette.
3. Under List/Menu in the properties palette, change select to 01class. 01 identifies the question number, while class identifies the subject of the question. Since Gather sorts data alphabetically by field name, you can control how the data appears in Gather by using this identifier. Spaces are not permitted in field names, but you can use underscores.
4. Next, click on the List Values tab to enter the options for your pop-up menu. You need to enter the value you want the respondent to see under the Item Label, and the numerical value representing the response that you will see under Value. Click on the plus sign (+) to add new items.



The Value is the data that is sent to the Gather program. The Item Label and values could be different. For example, if the user selects "Yes" from a pop-up menu, you would most likely want the value "1" to be recorded, and "0" when "No" is selected, to allow for easier numerical analysis once the data is collected.

You can also add a first option that tells the user what to do, e.g., "Select your class year" and give it a value of "0". That way, you will be able to distinguish between people who selected a specific answer versus those who failed to answer a question.


5. Save your form, then preview it in the browser. If you want to make any changes, you can go back to your form and click on the List/Menu menu object to return to the properties box.

Radio buttons

You will next use radio buttons for question #2. Radio buttons allow you to select one from among several choices. Each radio button is created separately. In order to allow only one radio button to be selected at a time, we give them the same field name but with different values. It is the buttons themselves that have names and values; the labels that the user sees are just text.

1. With your cursor after the question mark and before the "0", click on the Insert Radio Button icon from the Form Objects palette. Leave the answers to the questions where they are.
2. Type in "02meetings" as the name of this field and "0" as the Checked Value. This is the data that will be sent to the Gather program if someone selects this button. If you want this selection to be the default, set Initial State to Checked.

   
   
   
3. Insert a second radio button between the "0" and "1". Again name it "02meetings" to prevent more than one button being selected, but make the Checked Value "1". Leave Initial State unchecked.
4. Add buttons for the values "2" and "3" next to the appropriate text labels. Use the same field name, "02meetings", each time, but change the value. Field names must be identical for the buttons to work together. Also, verify that the text labels correspond to the button values to avoid getting invalid data from the respondent.

Text fields

For question #3, we will use a text field, which allows for short text answers.

1. Insert a Text Field from the Form Objects palette after the question mark.
2. Change the text field name to "03homework". Char Width specifies the size of the box that will be displayed. Enter "50" here . Max Chars allows you to put a limit on the total allowed (leaving this field blank will allow unlimited text). Under Type select Single Line.
3. Look at the form in a browser. If you find the text field is too small, you can select it to edit the size from the properties palette.

Check boxes

Check boxes allow the user to select multiple answers to a single question. We will use them for question #4.

1. Place the cursor just before the "B" in "Biology 100" and from the Form Objects palette select Insert Checkbox.
2. Change the field name to "04bio100".
3. Change the Checked Value (the data you will receive if a user checks this box) to "1".
4. Now select "Biology 115", insert another checkbox, and change the name to "04bio115" and the value to "1"
5. Continue this with "Chemistry 101" and "Earth Science 110", changing the field names to "04chem101" and "04earth110" and their values to "1".
6. If you want one of the boxes to be the default answer, you can set the Initial State on that selection to Checked.


When a box is not checked, no data is returned for that entry, which appears as a blank for that field in Excel. We do this to avoid having multiple values end up in the same cell when you extract the data (which would occur if you had the same field name with different values), as this would be difficult to deal with.

Copying and Modifying Form Elements

Copying and modifying form elements allows you to save time by duplicating the elements you create and using them elsewhere in your form. We are going to create a single pop-up list/menu for the first section of question #5 and then duplicate it for the rest. We want the user to be able to select ratings that are verbal, but we will set our values to send only numerical data to Gather for analysis.

1. Highlight the responses "Excellent Good, etc." for the first item and delete them.
2. Insert a pop-up list/menu as we did for question #1.
3. Type "05reading" into the name field.
4. Click the List Values button in the properties palette and under Item Label type in "Excellent" with the value 4, "Good" with a value "3", "Fair" with a value "2" and "Poor" with value "1". Click OK. The user will select from among the verbal ratings, but the corresponding numerical value will be transmitted to Gather.
   
   
   
   
   
5. Copy the list/menu (by selecting the object on the form and choosing Copy from the Edit menu) and paste it in place of the answers to the next question.
6. Click on the new list/menu and change the name to "05writing". You do not need to edit the titles/values.
7. Paste the pop-up menu again in place of the answers to the next question.
8. Rename the new list/menu "05discussion".

Text Areas

We will use a text area for the last question to allow for a longer response.

1. Press return after question #6 to create a blank line inside the red box which designates the form area.
2. Insert a Text Field as we did for question #3.
3. Type in "06comments" for the name.
4. Make Char Width "60" and select Multi line. Instead of a character limit, with Multi Line you set a line limit. Limit Num Lines to "8". This determines the size of the area that will appear in the form, but the text area will scroll to allow a much greater amount of text to be entered. Set Wrap to Virtual (click on the down arrow to display more options). This will make text appear to wrap at the end of a line in the display area, but will not actually insert line breaks into the data.

Submit/Reset buttons

The last item you need is a way for the user to submit the form when it is completed. You should also provide the user with a way to clear the form and start over again.

1. Add some space to the form below the text box.
2. From the Form Objects palette, click on Insert Button.
3. The default creates a Submit button. You don't need to change anything. A button labeled Submit will appear on the form. When a user clicks on this button, the data will be sent to the Gather program you specified in Form Action. You can change the label on the submit button without affecting its function. Highlight the label on the button and type Click Here to Submit Form.
4. Insert a second button adjacent to the submit button. In the properties palette, select reset instead of submit.
5. Change the label of the Reset button to Clear the Form and Start Over.
6. Click on the centering button in the basic properties palette to center the two buttons on the form.

You are done creating your form! You can compare your form to the finished form linked from the Gather home page. Now we need to test our forms!

Test your Web Form

It is important to test your form for several reasons. You want to verify that

• All form elements -- buttons, menus, text areas -- behave as you expect.
• Radio buttons work together, allowing only one option at a time.
• The text fields are large enough to enter text you expect users to enter, and the text wraps at the end of the line as you expect.
• The reset button clears the form

We will fill out the forms several times, trying different combinations of answers for each question, to make sure that the responses given don't appear one way when you enter them on the form, and different when transmitted.

1. Open your saved form in Dreamweaver. Selecting the Preview button to see how the form will appear on the web.
2. Fill out the form and click the submit button. Make sure all of the form elements work as you expect.
3. Go back to your form and click the Clear the Form... button. Now fill the form out again with different responses. Repeat this a few times to make sure that everything works correctly on the form.

This documentation introduces the basic steps to conducting a web-based survey using the Gather tool. New features will be added as this tool evolves. Check back on the Gather home page for future updates. Support for use of this tool is provided to Haverford College faculty, students and staff by the Academic Computing Center.

Part II: Collect Data with Gather--View and Manage the Data shows how to view your data and use the advanced features of Gather to authenticate and validate the data.

---

Gather version 515.