Creating Forms

---

This web page explains how to create a web form using the FormMail CGI and Dreamweaver MX as an editor. To simplify creating forms, we have created a template. While forms are not hard to create, we strongly recommend you get experience creating and posting other pages before creating forms. These instructions assume you already know how to create and post simple web pages.

Note: You can print this web page and follow along with the tutorial, or navigate through it on-line with the Table of Contents. This tutorial is designed to be worked through in order.

I. Using Forms

Before you create your own form, take a moment to fill out the form we will use as a template in the exercise below. You should find this self-explanatory.

II. Download the Template

Now that you know how this form looks to those who will fill it out, let's work with it as a starting point for creating other forms.

Like any HTML page on the web, you can download this simply by copying the source to your disk. In FireFox 3.0:

1. Open the template as you would any web page
2. From the File menu select Save Page As..
3. Notice the Format option at the bottom of your dialog box. Set that to Web Page, complete.
4. Save the file to the name and location you want.

III. Open the Template in Dreamweaver

You can use any editor you like to create a working form. However, these instructions explain how to edit the form with Dreamweaver.

1. Open Dreamweaver
2. Go to File menu and select Open
3. Navigate to the saved Template and click the Open button.

IV. Set up Your Document Title

Your template is set up with the title "Form Creation Final Exam". Change this to the title you want.

1. Go to the Modify menu and select Page Properties...
2. Change the text in the Title field and click OK.
3. For the purpose of this tutorial, leave everything as it is on this screen. However, normally you will replace "Form Creation Final Exam" with a title which describes your web page. Remember, this is what will appear at the top of your reader's web browser window.
4. While you are here, you can change your default colors, background, and margins to whatever you wish. Again, for the purpose of this tutorial, leave the colors as they are.

V. Specify the FormMail CGI as your Form's Action

FormMail is a CGI (Common Gateway Interface), a program which accepts input from a web page and processes that input. FormMail is already set up on the Haverford web server. All you need to do is access it.

Your template is already set to use the FormMail CGI, so you don't need to do anything at this point. However, just so you know how to access a different CGI, or modify this one if it ever changes location, let's look at how to define this in Dreamweaver.

1. Select the form by clicking the red dotted border around the page.
2. Look at the Properties window for the form. If this is not visible, open it by selecting Properties from the Window menu.
   
3. Note that the Action is set to http://www.students.haverford.edu/cgi-bin/acc/FormMail.pl, with the Method set to POST. (You cannot see the entire address in the above illustration because it runs off the end of the box, but it is there.) This tells your web page to use the FormMail CGI located at the URL "http://www.students.haverford.edu/cgi-bin/acc/FormMail.pl". Should you ever use another CGI you will put the URL of that CGI in the Form Action box, and select POST or GET as required by the specific CGI.

---

VI. Form Fields

Until now you have been setting up the commands FormMail needs to process your data. Of course, the heart of your web form is the places where your readers enter that data--the fields. Before looking at the fields themselves, take a look at the whole web page. The figure below illustrates the template as displayed in your browser.

Notice that fields are mixed in with other text, tables, etc. You can edit a web form as any other page, to get the look and layout you want.

VI.A. Types of Fields

There are several types of fields you can use in a form. Each one has its own purpose.

Hidden Field

A hidden field is not displayed to your readers. Instead, it passes information to the CGI. In our template we have the two hidden fields described in the sections above. Notice that they are not displayed when viewing the form from your browser.

Text Field

A text field is a single line box for short data entry. In the template the fields for name, phone number, and email are all text fields.

Text Area

A text area is like a text field, but allows more than one line of text entry. In the template there is a text area beneath the text "Explain the difference between a text field and a text area in the space below:"

Check Box

A check box allows your readers to select one or more choices from a predetermined list. Your readers can select any of these choices by clicking the appropriate check box. The template has check boxes just below the text area field. However, these are not displayed in the illustration above.

Radio Button

A radio button allows your readers to select one choice only from a predetermined list. Your readers select this by clicking on round buttons. Selecting one button will deselect a second button. The template has radio buttons after the question, "Is this a radio button?"

Pop-up Menu

A pop-up menu allows your readers to select one or more choices from a predetermined list. Each of these choices is available via a pop-up menu. The template has a pop-up menu below the text "When would you use a pop-up menu?". However, this pop-up menu is not displayed in the illustration above.

Submit Button

When your readers have completed the form, they need to click on a submit button to process the data. If they do not click the reset button, you will not receive any information.

Reset Button

The reset button will clear all the data your reader entered. Your reader can then reenter data in the form before submitting.

VI.B. Field Names

All HTML fields have a name. As you will see, some field names have specific meanings to the FormMail CGI. For example, the next section discusses the recipient field and the subject field.

Field names used in this document are green, to help you identify them easily while reading this document.

VI.C. Field Values

In addition to a type and a name, all fields have a value. Some field types, such as radio buttons and check boxes have several values you can set. The user filling out the form will decide the final value, in most cases.

Field values used in this document are red, to help you identify them easily while reading this document.

---

VII. Hidden Fields

FormMail requires you to have two hidden fields--fields that not displayed to your readers. The required fields are already in the template, but you will need to edit them to suit your needs. In the future, if you wish to add your own hidden fields or create a Formmail form from scratch, you can do so by clicking Insert -> Form Objects -> Hidden Field.

VII.A. The "Recipient" Field

The first required field is the recipient field. This field tells FormMail where to send the data of those who fill out your form.

1. Select the first Hidden field by clicking on the first yellow shield with an "H" on it.
2. If you look at the properties window for the hidden field, this is what you will see:
   
3. Replace the Value "compctr@haverford.edu" with your own username@haverford.edu. Now any time someone fills out the form, the data will be emailed to you.

VII.B. The "Subject" Field

The other required field is the subject field. This field tells FormMail what to call the email messages from your form.

1. Select the second Hidden field by clicking on the second yellow shield with an "H" on it.
2. You can replace the Value Form Creation Midterm Exam with your own subject title. Any mail you get from this form will have this subject name. For the purpose of this tutorial, change the this text to Form Creation Final Exam.

---

VIII. Text Fields

A plain text field is one of the most common fields used in forms. To insert a new text field, from the Insert menu select Form Objects and then Text Field.

Let's look at the text fields already in the template.

VIII.A. Realname

In addition to the hidden fields described above (subject and recipient), FormMail has a few other predefined field names. Data entered into a field named Realname is the name you will see in the from header. This makes it easy for you to tell who sent the form.

1. Select the field for "Name:", located in the first table.
2. Look at the properties for this field. Notice the name of the field is set to realname, but don't change anything. You most likely want this field in your form.
   

VIII.B. Email

Now skip ahead to the field requesting an email address. Data entered into a field named email is the email name you will see in the from field, making it easy for you to reply to the person who filled our your form. FormMail uses email as a predefined text field name.

1. Select the field asking for an email address, located in the second row of the first table.
2. Notice in the properties window that the name is set to email, but don't change anything. This field should be in your form. If it is not, form submissions are likely to be filtered into your Message Center email quarantine.
3. Notice also that the initial value (abbreviated init.value) is set to username@haverford.edu. This is not required, but it is something we can do to help users to understand what should be entered in that field

VIII.C. Other Text Fields

In addition to using the predefined text fields, you can make up any text fields you like. For example, the template also asks for the users phone number.

1. Select the field asking for a "Phone:" number, located in the second row of the first table.
2. Notice the name is set to Phone #. This field is not required, and is only useful if you want the phone numbers of your form users.
3. Rename this field to any name you wish. The name should reflect the type of information you are collecting.

---

IX. Text Areas

Text area are much like text fields, but gives your readers more space to write. Let's look at the one in the template.

1. Select the field asking the reader to " Explain the difference between a text field and a text area".
2. Notice in the properties window that this looks similar to the properties of a text field, except that "Multi line" rather than "Single line" is selected. You need to enter the number of lines for the text area in addition to its width. You can change the size of a text area by typing in different values.

   

---

X. Radio Buttons

A radio button lets your readers select one and only one choice only from a predetermined list of your choice. It is just slightly more difficult to set up than a text field or text area. This section examines some existing radio buttons. Later you will see how to create your own.

The template has two radio buttons after the question, "Is this a radio button?" Look at each separately.

1. Find the field asking the reader " Is this a radio button?".
2. Select the button next to Yes
3. View the properties window
   
4. Notice the button name, radio_button. You can change this if you want to have a different button name, but it is important to keep this name consistent for all buttons relating to the same question.
5. Notice the button value, Yes. You can change this, to give your reader an option other than Yes. Note, whatever you type for the value will not automatically appear as a button name on your web form; you will have to enter appropriate text for your readers to understand your buttons.
6. Now select the button next to No
7. Notice the button name is still radio_button, but the button value is No. If desired, change the name or value to what you want, but all radio buttons relating to the same question must be named identically.

---

XI. Check Boxes

A check box is almost the same as a radio button. However, your readers can select more than one of the choices you give them. Below you will examine some check boxes already on the template, and then create your own check boxes. The same process can be used to create radio buttons.

1. Find the field asking the reader "Please check all the reasons you wish to use FormMail (check all that apply):".
2. Select the button next to To create surveys
3. Look at the Button name and value in the properties window.
4. Do the same for all the other check boxes. Notice that the name is always Useful_tool, but the values change.

Now create your own check boxes.

1. Find the section asking the reader "Why would you use a check box versus a radio button?" and place your cursor after the instructions.
2. Do as the instruction (Create check boxes here, with the following choices: "Sometimes you feel like a square", "Let's not go round and round on this", "Checks are prochoice") asks. From the Insert menu, select Form Objects. Then select Check Box. You get the now-familiar check box object. Edit it so the button name is why_a_box and the button value is Sometimes you feel like a square.
3. Label your choice by typing the text, "Sometimes you feel like a square" next to your box.
4. Remember from the section on radio buttons, all the options for one field must have the same button name. The easiest way to do this is to cut and paste your first box or button, and check information as desired. Select the line with your first check box by highlighting it. From the Edit menu, select Copy. Paste the cursor on the line below. From the Edit menu select Paste.
5. You now have two lines stating that "Sometimes you feel like a square. Use the properties window to edit your second check box.
6. Edit the text next to your second check box, "Sometimes you feel like a square" to Let's not go round and round on this.
7. Use the copy, paste, edit process again to create the third check box, with the choice Checks are prochoice. When you are done, your screen will have three different check boxes.
8. Double check your check box objects to see that they all contain the correct button name and button data.

---

XII. Pop-up Menus

There is one more common type of data entry field you can use in your web form — a pop-up menu. With a pop-up menu, your readers can select either one or several choices, depending upon how you set your options. Because it fits all your choices into one neat box, you may wish to use a pop-up menu when you have a large number of choices for your readers.

Our template has a pop-up menu just above the check boxes you created in section X. Let's look at it and add some more options for your readers to select. As you will see, a pop-up menu is easily created with Dreamweaver.

1. Display the field object beneath the text, "When would you use a pop-up menu?"

   Your screen looks as follows:
   

2. Height tells how many rows of choices your reader sees. You can edit this by typing a different number. If you have the type set to "Menu" it allows only one row and greys out the rest of the options.
3. The List Values. button lets you edit the choices you give your readers. Click on this button, and add some more choices for your readers. Use your imagination.
4. The Selections: Allow Multiple option determines if you wish to allow your reader to select just one choice, or several choices. If you allow multiple choices, your readers can select them by holding down the shift or control keys when clicking, just as you can make multiple selections in other programs.

---

XIII. Submit and Reset

In addition to the Form Action, the hidden fields and data entry fields, your web form needs a submit button, and it ought to have a reset button. When your readers complete the form, they will press the submit button. This will send the data to the FormMail CGI. The reset button lets your readers clear the form and start again.

Reset and clear buttons are included at the bottom of the template. If you prefer, you can add them as you would other fields. Changing the button label in the properties window will put alternate text on the face of the button.

---

XIV. Processing the Form

If you followed along with the instructions above, your form should now work as a web page. You are ready to test it.

1. Save your web form.
2. Open it in your browser.
3. Fill it out.
4. Check your email to see if you received the form data.
5. If you have a problem, review the steps above.

---

XV. Posting Your Form on the Web

Once you have your web form completed, and you have tested it, you will want to post it to your web server. See the Web Tour for faculty and students for more information on how to post your page.

---

XVI. Changing the Default Response Page

When you processed the form in step XIII, you got FormMail's default response.You may want to give your readers a different response. For example, if you want your readers to see correct answers to our sample test, rather than just a reiteration of the answers they selected, you can redirect your output to an answer page you have created.

For example, this web page has answers to our FormMail test. If you want your readers to see this page after submitting their forms, you would add the following hidden field to the top of your web form.

1. Go to the top of the template.
2. From the Insert menu, select Form Objects. Then select Hidden Field.
3. In the properties window for the hidden field enter the name redirect in the space beneath the title "HiddenField". ("Redirect" is a predefined field.)
4. Enter http://www.haverford.edu/acc/webdev/forms/form-feedback.html * in the value space.
5. Your properties window now looks as illustrated below:

   

*Note: Even though "form-feedback.html" is in the same folder as the template that calls it, we need to add the full address. If you use a relative link, such as "form-feedback.html", the FormMail CGI will look in its own folder, and not find your web page. Because you cannot use a relative link, you need to post the page to which you are redirecting readers before you test this feature.

---

XVIII. More Information

This tutorial provided an introduction to creating forms using the FormMail CGI. The are many more options you can use in your FormMail web form. For more information, refer to the following sources:

Creating Forms with Dreamweaver

The Dreamweaver Help menu provides more information on creating forms.

Creating Forms with HTML

While Claris Home Page does a good job creating forms, there are HTML commands which can add more features to your web forms. See ACC's web page on writing HTML.

Using the FormMail CGI

For details the features mentioned above, and other features in FormMail, see the documentation from FormMail author, Matt Wright.