Creating Web Forms with Microsoft FrontPage 2002

Forms allow users to interact with a Web page. They can be used to create surveys, collect information from users, or for many other purposes. Microsoft FrontPage 2002 makes it easy to add forms and form objects to your pages. Handling the data from these forms, however, can be much more complicated. This is especially true for servers (like the TRIO ThinkQuest Servers) that do not support the FrontPage extensions. Below we give a brief introduction on how to create a simple form in FrontPage 2002 and send the results to your email address. (FrontPage 2000 users see Creating Forms in FrontPage 2000.)

Insert the Form Field
In FrontPage 2002, open a new or existing page. From the Insert menu choose Form and then Form.

This inserts a form field. Everything within the dotted lines is part of the form. Notice that inserting the form field automatically inserts a Submit and Reset button within the form. You don't need these yet, so let's delete them to make the form easier to work with. Select both buttons and press the <Delete» key to get rid of them. Your form field should now look like this:

Inserting Form Objects
One-Line Text Box
1. First, we will insert a form element that allows the user to input a single line of text. Inside the form field, type "What is your name?" followed by a space. From the Insert menu, choose Form and then Text Box. This will insert a box where users can type their name.

2. Right-click on the text box and choose Form Field Properties from the menu. The Text Box Properties dialog box will appear.

3. In the Name box, type in a unique name for this form object. In the Initial value box, type in the text to be displayed when the page first loads. In the Width in characters box, type in the limit for the maximum number of characters that can be typed into the text box. Leave the Tab order box blank (placing a number in this box would designate the order in which this field object would be selected when the user presses the Tab key). Select No for the Password field option. If you clicked on the Validate button, you would be presented with a new menu which allows you to choose options to require data to be input in a certain format. That option won't be used in this tutorial. Click OK to accept these options for the text box (as shown below).

Text Area Box
1. Next, we will insert a text box that allows the user to input multiple lines of text. Hit <Enter» to create a new line (paragraph) under the first entry. Make sure the cursor is still within the form field (dashed box).

2. Type "What is your address?" followed by a space. From the Insert menu, choose Form and then Text Area.

3. Right-click on the text box and choose Form Field Properties from the menu. The TextArea Box Properties dialog box will appear.

4. Add a unique Name, the desired Initial Value, an appropriate Width in characters and Tab order (if desired) . In the Number of lines box, type in the number of lines needed for the address (see below). Click OK.

Check Box
1. Next we will include a form element that allows users to make multiple selections. Hit <Enter» to create a new line. Make sure the cursor is still within the form field (dashed box).

2. Type "What is(are) your favorite color(s)?" followed by a space. From the Insert menu, choose Form and then Checkbox.

3. Immediately after the box type a space and the name of a color.

4. Right-click on the box and select Form Field Properties from the menu. The Check Box Properties dialog box will appear.

5. Add a unique Name for the color and Tab order (if desired). For Value, enter the value you want to be returned when the box is selected. For example, the check box that selects the color blue will have a Value of "Blue." For the Initial state, Checked will make the box checked by default and Unchecked will make the box unchecked by default (usually preferred). Click OK.

5. Repeat adding check boxes, typing in color names and modifying the box properties until you have added the desired number of colors.

Option Button
1. Next, we will add a form element that will only allow the user to choose one option. Hit <Enter» to create a new line. Type "What is your gender?" followed by a space. From the Insert menu, choose Form and then Option Button.

2. Right after the button, type a space and then "Male." Type another space, insert another button, another space and type "Female" right after it.

3. Right-click on a button and select Form Field Properties from the menu. The Option Button Properties dialog box will appear.

4. In the Group Name box, type in the name of the Option Button group (these are grouped meaning you can only select one of them. Selecting one will deselect the other). For Value, enter the gender that the button will select. Click OK.

5. Modify the Form Field Properties for the other button. Remember to make the Group Name the same.

Drop-Down Box
1. Next, we will insert a form element that will allow users to select an option from a drop-down menu. Hit <Enter» to create a new line. Type "What kind(s) of pet(s) do you have?" followed by a space. From the Insert menu, choose Form and then Drop-Down Box.

2. Right-click on the box and select Form Field Properties from the menu. The Drop-Down Box Properties dialog box will appear.

3. Add a unique Name. Click the Add button. The Add Choice dialog box will appear. For Choice, type in the name of a type of pet. Check the Specify Value box and that name should be entered as the default. Choose an Initial State for the value (Not Selected is preferable). Click OK. Add more entries until the list of pets is complete. For Height, enter the number of lines you would like to be visible at once in the drop-down menu. For Multiple Selections, select Yes to allow users to choose more than one type of pet. Enter a Tab Order (if desired) and click OK.

Push Button
1. Next, we will insert push buttons that will allow users to submit their choices or reset the form. Hit <Enter» to create a new line. Go to the Insert menu and choose Form, then Push Button.

2. Right-click on the button and select Form Field Properties from the menu. The Push Button Properties dialog box will appear.

3. Enter a unique Name and Value/label for the button. After Button type, select Submit. Enter a Tab Order (if desired) and click OK.

4. Next, insert another button as before, giving it a unique Name and Value/label as before, but this time choose Reset for Button Type. This time make the Button type a Reset. This will allow the user to reset all the selections they made to the defaults and start over.

Modifying Form Properties
Having a user input all of this information is useless if there is no way for you to process this data. In this example, we will send this data to a specified email address.

1. Make sure the cursor is still within the form field. From the Insert menu, choose Form and then Form Properties. The Form Properties dialog box comes up.

2. Click the Options button in the lower-left hand corner. The Options for Custom Form Handler dialog box comes up.

3. After Action, enter "mailto:your email address." Make sure Post is entered for Method. Enter "text/plain" for Encoding type (this will make the form information in your email easier to read). Click OK and OK again.

Your form should look like this.