Lesson #18
Creating Forms for Assignments
Forms are one way to let your students communicate with you. You provide the boxes for answers, comments, complaints, compliments, and when they click on the submit button, all the information they've typed in is sent to you in the form of an email message. The two boxes below are crucial. You can fill them in now:

 

There are several ways to use forms:

These are the extra tags you'll need to make forms on your page:

<form action="http://www.gavilan.edu/cgi-bin/generic" method=post>
<input type="hidden" name="emailto" value="aromasca@yahoo.com">
<input type="hidden" name="nextpage" value="http://gavilan.edu/tlc/ic/thanks.html">
<input type="hidden" name="subject" value="groups #9">

All of these lines should go right below the <body> tag, near the top of your web page. In either Front Page or Dreamweaver, leave your cursor at the top of the page, then click into the source code.

In FrontPage, the source code button is at the bottom right corner of your screen:
In Dreamweaver, the source code button is at the top right corner:

At the top of the page, your coding should start out something like this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>California Dreams</title>
</head>
<body>

And this is where you'll add your lines for the creation of forms, right after the <body> tag. You can copy the four lines from the top of this tutorial and paste them into the code source here.

Let's look at the each of the four lines and make changes that will send you the information you want.

The first line: <form action="http://www.gavilan.edu/cgi-bin/generic" method=post>
needs no changes. This sends the information to a specific script on our server that will look for all your hidden commands (in the remaining 3 lines), interpret them and send them to your email box.

The second line: <input type="hidden" name="emailto" value="aromasca@yahoo.com">
tells the server what email address to use in sending the submitted information. Right now this line is going to send any submitted information to my Yahoo account. You need to change the address to your own.

value="yourname@gavilan.edu">

Don't forget the quotation marks around the entire email address.

The third line: <input type="hidden" name="nextpage" value="http://gavilan.edu/tlc/ic/thanks.html">
tells the server what page to load after the information has been submitted. This is a very simple page telling the student that their information has been submitted, and that the instructor will get back to them as soon as possible. There is usually a link back to the class website.

You can look at Karen Warren's thank you page, or Jen Ferro's thank you page.

The part that you have to change is the URL in the value= part of the line. Once again, don't forget the quotation marks around the entire URL. At the bottom this page is a link to a simple template for a thank you page.

The final line: <input type="hidden" name="subject" value="groups #9">
tells the server what words should be in the subject line of your email message. In this case, the subject line will be groups #9. Yours could be "assignment 1" or "opinions" or whatever will help you identify what messages are coming from your students from this particular web assignment.

Once again, change the value= part of the line to the subject you want. Don't forget the quotation marks.

Now comes the fun part of adding text fields. Directions for FrontPage are here. Skip this next part and go directly to the Dreamweaver directions, if you're using that webpage editor.

 

In FrontPage, pull down the Insert option from the menu bar across the top of the screen. Highlight Form and you'll get a list of available forms. The One-Line Text Box and the Scrolling Text Box will be the most common types you'll want.

We used a One-Line Text Box for your name and email address at the start of this tutorial. For longer paragraphs or even complete essays, use the Scrolling Text Box.

When you click on either of these, FrontPage will put in a generic form, which may not be exactly the size you want. Right click on the form, and from the list of options, choose Form Field Properties. This will give you a place to name the field, depending on what question is being answered. For my two that I used at the beginning of this tutorial, I used "name" and "email".

If you had a question and box like the one below, you might name the field color.

What is your favorite color?

The idea is to name your fields with labels that will give you a clue about which question is being answered. Remember, these submissions will come to you in an email, with only the field name and the answer typed in by the student.

In the Form Field Properties box, there is also a place to set the width of your box, in number of characters. The color box above is set at 40 characters.

Everything in your form (questions and answer boxes) will be outlined by a broadstroke broken line. The final step is to add a submit button, something that your students can click on when they have completed the questions.

Make sure that you are still within the form (the broken line), then click on Insert from the options across the top of the screen. From the list of options listed, highlight Form, and from the next list, choose Push Button. When the button appears, click on it to select it, then right click on it. From the list that appears, choose Form Field Properties again.

The button type, designated by radio buttons on the 3rd line, will be set at the Normal option. Click in front of Submit, and then rename the value/label box. This is usually something like SUBMIT or SEND. Or you can put in an entire sentence: Send this information to the instructor.

And now you've finished your assignment. You might add a sentence to the students reminding them to put in their name and email addresses, or you won't know who the submission is from. Here is a sample email message from this page:

 

 

 

Address of this page:
http://hhh.gavilan.edu/kwarren/eval.htm
Please contact Karen Warren for questions or comments.

Gavilan logo - link back to the class website Return to the class website