Welcome!
Starter Pages
Links
Images
Sound
Animation
JavaScript Quiz
Newsletter
Online Community
Privacy Statement
 
Web Weaving Kit for parishes of the Archdiocese of Denver

Feedback Form

One of the greatest advantages of a web page is that your communication doesn't have to be one-way. You offer "stuff" to your site's visitors, and if you let them, they communicate to with you.

One simple means of collecting information from your users is through the use of forms. This section of the site offers you a parish registration form that may be used by families who want to join your parish. Just click here to download it to your site.

The form might work like this: The user would log onto your site, fill out the information and press the "Submit" button. The information contained in the form would go to the server. Then some software on the server would receive the information, and send the parish secretary an e-mail with the information submitted by the new parishioner. Pretty handy, huh?

To use a form, however, you need to do a little communicating yourself -- with whomever hosts your site. That's because the forms you create in your HTML editor only do half the job. If they're set up properly, they send the information to your server. But your server needs instructions on what to do with it.

Intrigued? ... Well, stick around anyway. A well-placed form may someday save you hours of annoying paperwork. And it will also help move your site from a source for information to a hub of communication.

 

1. Building your form
2. Receiving and submitting information

 

Building your form

Today's handy-dandy HTML editors help you create your very own forms quite easily. Follow the instructions for your software. But to understand what a form does, you really have to know what's going on "under the hood."

Like everything in HTML, forms begin and end with tags. Predictably in this case, the tags look like this:

<form> This tag begins the form.
</form> This tag ends the form.

What goes between the form tags are various form "objects" -- think of them as containers -- that allow for the collection of information. Those information collection containers include text fields, drop-down menus, lists, check boxes and buttons for submitting the information.

For example:
This is
a text field
This is a
drop-down menu
         
These are "radio buttons"
Choice 1  
This is a list; similar to a menu, but it can collect multiple choices
Choice 2
This is a checkbox
 
This is a
Submit Button

Since you've already learned how to make tables, we won't dwell on how to make a table which holds your form. However, you can be pretty sure that in order to make your forms clean and consistent, you will want to put each question and corresponding form collection container in its own cell. You can then align them within the cells to create a consistent design.

Receiving and submitting information

Each form collection container has a name. If your form has three text fields in it, each field has a name. Take, for example, a text field which will collect a parishioner's address. The form element might look like this:

Your Address
Your Phone Number
Your Email

Part of the code within the form tags might look like this:

<input type="text" name="address">

The code is saying "There's an input collection container here that's a text field. Its name is 'address.' "

Remember: The name of the text field is not "Your Address." That's just what the user sees. What becomes important when the user submits the form is the container's name, "address," and the corresponding value.

When the user types in "6464 Poplar St.", it be the value of the text field "address."

Here's where the server comes in. Then when the user clicks submit, the value in the text field container will be transferred to the server. There a piece of software, usually what's known as a CGI program, will receive the value and do something with it.

A file on the server awaits the information. It will replace the name of the form container, in brackets below, with the value stuck into the container. The file might look like this:

The New Parishioner's Address is: [address]
The New Parishioner's Phone is: [phone]
The New Parishioner's Email Address is: [email]

In our example, the server then sends out an e-mail to the parish secretary, remember? The e-mail might look something like this:

name: Smith
address: 6464 Poplar St.
email: joesmith@rst.net

If this seems abstract, here's an analogy.

Think of each form collection container as a Colorado Rockies fielder, waiting to catch a ball. Each fielder has a unique name, right? Each baseball is a different color, representing a unique value which will come from the user.

When the ball -- the value -- arrives, the fielder is ready to throw it into the dugout, the server. But he has to wait for the instruction from his coach, the Submit button.

When coach gives his OK -- that is, the submit button is clicked -- all the unique values are tossed to the server. There the batboy, the CGI program, has a place in his scorebook to record the color of each ball:

first base threw: [firstbase]
second base threw: [secondbase]
third base threw: [thirdbase]

Then the scorebook is copied and sent out to fans, who for some odd reason are interested in what color ball each fielder threw. The scorebook page -- the e-mail -- looks like this:

first base threw: purple
second base threw: red
third base threw: green

If that didn't work for you, don't be discouraged. Visit us at The Upper Room online community Parish Web Development forum and we'll get you straightened out!

If that didn't melt your mind, let's explore how to add sound files to your web site.

Back
Forward
©Gregory L. Kail/Archdiocese of Denver, 2001
303.715.3123