Chapter 18

Adding Interactivity-Forms the Easy Way

• Setting the Groundwork
• Examining the Form Page Wizard
  • Introducing the Form Page Wizard
• Naming a Form Page
• Adding, Modifying, Removing, and Arranging Questions
• Choosing a Question Type
• Choosing Options for the Question's Form Fields
  • Contact Information
  • Account Information
  • Product Information
  • Ordering Information
  • Personal Information
  • One of Several Options
  • Any of Several Options
  • Boolean
  • Date
  • Time
  • Range
  • Number
  • String
  • Paragraph
• Presenting Your Questions
• Storing Your Responses
• There's More
• Workshop Wrap-Up
  • Chapter Summary
  • Next Steps
  • Q&A

Everyone has filled out countless forms-order forms, registration forms, personal information forms, surveys, and so on. Even when you enter a message or article in a discussion, you are using a form. Essentially, whenever information is exchanged, it is done through a form.

Designing a form can be tedious, especially if you want to ask many questions. Suppose, for example, that you want to design an online IQ test of 50 questions. Each question has a multiple choice answer. That is a lot of form fields to place on a page. Laying the form out and aligning the fields is a task in itself. It could take you hours to complete the form.

Have no fear. In FrontPage, creating forms is a breeze. The Form Page wizard does much of the work for you. It takes care of the layout and enables you to present questions in several different categories. You think of a question, pick the category that best handles how you want to present it, assign a few variables, and away you go. You can design your IQ test in a matter of minutes.

Setting the Groundwork

Always create a form on a new page. After you complete the form, you can add additional content to it or copy its contents to the clipboard to paste into another page. To create a form with the Form Page wizard, use FrontPage Editor's File | New command. From the New Page dialog box, choose the Form Page wizard and click OK.

Examining the Form Page Wizard

The Form Page wizard is a gem. You use it to design just about any type of form you can think of. If you know the type of form you want to design and the questions or responses you need, the rest is absolutely simple. After you choose the wizard, its introductory screen appears.

Introducing the Form Page Wizard

The first screen of the Form Page wizard is an introductory screen. It explains what the Form Page wizard does. You navigate forward and backward through the wizard by using the navigation buttons at the bottom of each dialog box.

Click the Cancel button to leave the Form Page wizard without creating the page. Click the Back button to review the questions or choices that you made in previous screens. Click the Finish button to generate the page with the content you have chosen up to that point. Click the Next button to proceed to the next step.

Naming a Form Page

On the second screen of the Form Page wizard, shown in Figure 18.1, you enter a URL for the page and a page title.

Figure 18.1:Enter a page URL and a page title.

In the Page URL field, enter the filename of the page. Filenames are restricted to eight characters plus the .htm extension. For example, if you are designing a survey form, you might enter

survey.htm

In the Page Title field, enter the title for the page. This title appears in browsers. The title for the survey form might be

Web Site Survey

After you enter the URL and title, click Next to continue.

Adding, Modifying, Removing, and Arranging Questions

The third screen of the Form Page wizard, shown in Figure 18.2, appears next. You use it to

Figure 18.2:You can add, modify, remove, or rearrange questions.

• Add a question to your form
• Modify a question while designing it
• Remove a question from the question list
• Rearrange the order in which the questions appear in the form

To add a question to a form:

1. Click the Add button shown in Figure 18.2. The screen shown in Figure 18.3 appears.
   Figure 18.3:Choose the type of question you want to ask and enter a question in this screen.
2. Choose a category for the question. In the lower portion of the screen, type the question or prompt that you want to include on the form. Click the Next button. A screen that is applicable to the type of question that you are asking appears.
3. Choose the options for the question's form fields. Click Next to return to the screen shown in Figure 18.2.
4. To enter another question, repeat steps 1 through 3.
5. Click Next to continue with the Form Page wizard after you have added all your questions to the list.

To modify a question:

1. From the screen shown in Figure 18.2, highlight the question that you want to modify.
2. Click the Modify button. The question's option screen appears, and you can modify the question.

To remove a question from the list:

1. From the screen shown in Figure 18.2, highlight the question that you want to remove.
2. Click the Remove button. The question is removed from the list.

To rearrange the order of the questions in the list:

1. Highlight the question that you want to move.
2. Click the Move Up or Move Down button to change its location in the list.

Choosing a Question Type

You can choose from fourteen categories for your question. They are

• Contact information
• Account information
• Product information
• Ordering information
• Personal information
• One of several options
• Many of several options
• Boolean
• Date
• Time
• Range
• Number
• String
• Paragraph

Choosing Options for the Question's Form Fields

Based on the type of question that you select, one of fourteen screens appears. The following sections discuss options for each type of question.

Contact Information

Use a contact information question when you need to know how to contact the person filling out your form. Information request forms often ask for contact information. A typical prompt is Please let us know how we can contact you. Figure 18.4 shows examples of the fields available for contact information.

Figure 18.4:You can request different types of contact information.

To complete a contact information question:

1. Select how you want to receive name information. The options are
2. Full. The user enters his name in a single field, as in Example 1 of Figure 18.4.
3. First, last. The user enters his name in two separate fields, as in Example 2 of Figure 18.4.
4. First, last, middle option. The user enters his first name, last name, and middle initial in three separate fields, as in Example 3 of Figure 18.4.
5. Check or uncheck the boxes to include the contact information that you want to obtain. The choices are title, organization, postal address, work phone, home phone, fax number, e-mail address, and URL. (See Figure 18.4.)

   TIP

   It is most efficient-for you and for the person filling out the form-to ask for no more information than you need in response to a question.

6. Enter a base name for the variables. This name is used as a reference in the information retrieved from the form and as bookmark names in the form's table of contents if one exists. Give it a descriptive name. The default name is Contact.
7. Click Next to return to the screen shown in Figure 18.2.

Account Information

Use an account information question to obtain a user name and password. Account information questions are often used on registration forms, such as those used to gain access to a protected web. A typical prompt is Please enter your name and password in the following fields. Figure 18.5 shows examples of the options available for account information.

Figure 18.5:Account information questions ask for a user's name and password.

To complete an account information question:

1. Select how to include user name information on your form. If you do not want to include a user name, uncheck the option.
2. As separate field. The user types his full name, as in Example 1 of Figure 18.5.
3. As first and last names concatenated. Choose this option when you use the registration bot to create a registration form for a protected web. This option is shown in Example 2 of Figure 18.5.
4. Choose how you want to receive password information. If you do not want to include password information, uncheck the option. If you require confirmation, the user confirms his password in a separate field, as in Example 1 of Figure 18.5. If you do not require confirmation, the user enters his password once, as in Example 2 of Figure 18.5.
5. Type a descriptive name for this set of variables. The default name is Account.
6. Click Next to return to the screen shown in Figure 18.2.

Product Information

Use a product information question to obtain warranty or registration information on a product. A form for this type of question might be a software registration form or a warranty service request. A typical prompt is Please enter the following information on the product for which you are requesting warranty service. Figure 18.6 shows the options available.

Figure 18.6:Use product information questions to register software or to request warranty service information.

To complete a product information question:

1. Choose how you want to receive the product name. Users can select from list products in a dropdown menu, as in Example 1 of Figure 18.6. They also can type the name of the product, as in Example 2 of Figure 18.6.
2. Check or uncheck the information that you want to request on the product. The choices are model, platform and version (for software products), product code, and serial number.
3. Type a descriptive base name for this set of variables. The default name is Product.
4. Click Next to return to the screen shown in Figure 18.2.

Ordering Information

Use an ordering information question when you want users to order products online. You can create order forms easily. A typical prompt is Order your products and provide method of payment and delivery information below. Figure 18.7 shows examples of the fields for this type of question.

Figure 18.7:Use ordering information in an online order form.

To complete an ordering information question:

1. Check the List of products and quantities checkbox to include an order form in your question. By default, the order form has five entries, as in Figure 18.7. You can specify more or fewer entries in the Maximum Number field.
2. Check Billing Information to ask for the method of payment, and choose the type of field for billing information. If you choose the Credit Card option, the user specifies his credit card type from a dropdown menu. The name of the cardholder and the card's number and expiration date are entered in text fields, as in Example 1 of Figure 18.7. If you choose the Purchase Order option, the user enters a purchase order number and account name in text boxes, as in Example 2 of Figure 18.7.
3. Check whether you want to request a shipping address, as in Example 1 of Figure 18.7.
4. Type a descriptive base name for this set of variables. The default name is Ordering.
5. Click Next to return to the screen shown in Figure 18.2.

Personal Information

You can ask for personal information in your forms, including age, sex, height, weight, ID number, and hair and eye color. A typical prompt is Enter optional personal information below. Figure 18.8 shows examples of the fields.

Figure 18.8:You can request several types of personal information.

To complete a personal information question:

1. Select how to request name information on the form. If you do not want to request a name in this section of the form, uncheck the option. The options are
2. Full. The user enters his name in a single text field, as in Example 1 of Figure 18.8.
3. First, last. The user enters his first and last names in individual fields, as in Example 2 of Figure 18.8.
4. First, last, middle. The user enters his first name, last name, and middle initial in individual fields, as in Example 3 of Figure 18.8.
5. Select how you want the user to enter his age:
6. Years old. The user enters his age in years, as in Example 1 of
   Figure 18.8.
7. Date of birth. The user enters his date of birth, as in Example 2 of Figure 18.8.
8. Check or uncheck the additional types of information that you want to request. The choices are sex, height, weight, ID number, hair color, and eye color. Examples are shown in Example 1 of Figure 18.8.
9. Type a descriptive base name for this set of variables. The default name is Personal.
10. Click Next to return to the screen shown in Figure 18.2.

One of Several Options

Ask a one of several options question when you want to obtain a single response from a list of choices. An example of a question in this category is What is your favorite color?. Figure 18.9 shows examples of the options for this question.

Figure 18.9:A one of several options question enables you to obtain responses through drop-down menus, a series of radio buttons, or a scrollable menu list.

To complete a one of several options question:

1. Enter the choices from which the user chooses in the scrolling text box at the upper portion of the screen. Enter each item on an individual line.
2. Select how you want to display the list:
3. Drop-down menu. The list is displayed in a drop-down menu, as in Example 1 of Figure 18.9.
4. Radio buttons. The list is displayed in a series of radio buttons, as in Example 2 of Figure 18.9.
5. List. The list is displayed in a scrollable menu list, as in Example 3 of Figure 18.9.
6. Type a descriptive base name for this set of variables. There is no default name for this question.
7. Click Next to return to the screen shown in Figure 18.2.

Any of Several Options

Ask an any of several options question when you want to provide one or more choices from a list of several. A typical question in this category is What other peripherals do you have in your computer?. Figure 18.10 shows an example of the output that you receive.

Figure 18.10:An any of several options question enables the user to make multiple choices. The checkboxes can be displayed in a single column or in multiple columns as shown here.

To complete an any of several options question:

1. Enter the labels for the choices that you want to include in the scrolling text box on the form. Put one option on each line. If you want to display the questions in multiple columns, as in Figure 18.10, keep the descriptions fairly short.
2. Check the box that reads "Use multiple columns to present the options" if you want to arrange the list in multiple columns. If you do not check the box, the choices are arranged in a single column.
3. Type a descriptive base name for this set of variables as a reference for the report. The default name is AnyOfSeveral.
4. Click Next to return to the screen shown in Figure 18.2.

Boolean

Use a Boolean question when you want to ask a question that requires an either/or response. A typical question is Do you want express delivery? (Additional charges apply). Figure 18.11 shows other examples.

Figure 18.11:Boolean questions can be answered with checkboxes or radio buttons.

To complete a Boolean question:

1. Select the type of response area that you want to include in the form. The options are as checkboxes (see Example 1 of Figure 18.11), as Yes/No radio buttons (see Example 2 of Figure 18.11), and as True/False radio buttons (see Example 3 of Figure 18.11).

   NOTE

   The True/False radio buttons are labeled Yes and No. You can easily change their labels to True and False if you want.

2. Type a descriptive name for this variable. There is no default name.
3. Click Next to return to the screen shown in Figure 18.2.

Date

A date question asks the user for a date-a calendar date, not the romantic kind. The user can enter a date response in one of three ways. A typical question is On what date was this product purchased?. Figure 18.12 shows some examples.

Figure 18.12:Users can enter dates in three ways.

To complete a date question:

1. Select how you want the date to appear on the form. The options are mm/dd/yy (see Example 1 of Figure 18.12), dd/mm/yy (see Example 2 of Figure 18.12), and free format (see Example 3 of Figure 18.12).
2. Type a descriptive name for this variable. There is no default name.
3. Click Next to return to the screen shown in Figure 18.2.

Time

A time question asks the user for a specific time. A typical question is After what time can we contact you at this number?. Figure 18.13 shows other examples.

Figure 18.13:Time can be entered in 12-hour, 24-hour, or free format.

To complete a time question:

1. Select how you want the time to appear on the form. The options are 12-hour format (see Example 1 of Figure 18.13), 24-hour format (see Example 2 of Figure 18.13), and free format (see Example 3 of Figure 18.13).
2. Type a descriptive name for this variable. There is no default name.
3. Click Next to return to the screen shown in Figure 18.2.

Range

Use a range question when you want the user to rate satisfaction or to provide an opinion on something. A typical question is How do you rate our customer service department?. Figure 18.14 shows other examples.

Figure 18.14:Range questions show a scale of 1 to 5, bad to good, or strongly disagree to strongly agree. Radio buttons or drop-down menus can be used.

To complete a range question:

1. Select the type of scale. You can use on a scale of 1 to 5 (see Example 1 of Figure 18.14), bad to good (see Example 2 of Figure 18.14), or disagree strongly to agree strongly (see Example 3 of Figure 18.14).
2. Select the presentation option:
3. Mid-range choice is default. If you choose this option, the number 3, Average, and Neutral are the default values.
4. Use drop-down menu instead of radio buttons. If you choose this option, the list is displayed in a drop-down menu list, as in Example 3 of Figure 8.14. The default is radio buttons.
5. Enter a descriptive base name for this set of variables. There is no default name.
6. Click Next to return to the screen shown in Figure 18.2.

Number

Use a number question when you need numerical input from the user. A typical question is How many fingers are on your right hand?. Figure 18.15 shows other examples.

Figure 18.15:You can specify the length of a numerical response. You also can specify a currency symbol.

To complete a number question:

1. Enter the maximum number of digits that you want for the response. The default value is five.
2. Check the set currency prefix box if you want to allow additional space for a currency symbol. Enter the currency symbol in the designated field.
3. Type a descriptive name for this variable. There is no default name.
4. Click Next to return to the screen shown in Figure 18.2.

String

Ask for a string response when you need a single line of text input from the user. A typical question is What is the name of your pet?. Figure 18.16 shows an example.

Figure 18.16:Use a string question when a single-line text response is sufficient.

To complete a string question:

1. Specify the length of the text field. The default length is 50 characters. To specify a different length, check the Set Maximum Length checkbox. Enter the maximum number of characters that you want in the text field.

   TIP

   Make sure that the field is long enough to handle anything that your user might enter. This type of question is intended for short responses. If the length of the textbox is too long, it will not be displayed fully in the window of the user's browser. If you think you need a long response, use a paragraph question.

2. Type a descriptive name for this variable. There is no default value.
3. Click Next to return to the screen shown in Figure 18.2.

Paragraph

Use a paragraph question when you need a multiline response. A typical question for this category is What is the nature of the problem you are having?. Figure 18.17 shows an example.

Figure 18.17:Use a paragraph question when several lines of text are required for a response.

To complete a paragraph question, simply type a descriptive name for the variable. Then click Next to return to the screen shown in Figure 18.2.

Presenting Your Questions

After you complete your question list, select how you want to present it. You use the screen shown in Figure 18.18 to do this.

Figure 18.18:Choose how you want to present your questions.

To present your questions:

1. Select a format for displaying your questions:
2. Normal Paragraphs format displays the questions without any preceding numbers or bullets.
3. Numbered List format displays the questions in a numbered list.
4. Bulleted List format displays the questions with a bullet preceding them.
5. Definition List format displays the questions as terms. You can place additional text and instructions beneath each question as definitions.

   NOTE

   You must edit the table of contents manually to reflect the questions on your form.

6. Select Yes if you want the questions to be listed in a table of contents. If your form is lengthy, you should choose Yes. The table of contents provides links to the questions, which are bookmarked on the page.
7. Click Next to proceed to the next screen.

Storing Your Responses

The screen shown in Figure 18.19 asks how you want to retrieve the information from the form. The options are

Figure 18.19:Choose the output option.

• Save results to a web page
• Save results to a text file
• Use a custom CGI script

Click Finish to create your form. Your page appears in the FrontPage Editor window. At this point, you can save it to your web, or you can copy it to the clipboard and paste it into another page in your web.

There's More

Your form is now designed correctly, but you still need to tell your server how to handle it. The form cannot function unless you assign a form handler to it. Some of FrontPage's bots-such as the Save Results bot and the Registration bot-act as form handlers. For you to use these types of bots, your Internet Service Provider or target server must have the FrontPage Server Extensions installed. If that is not possible, you can assign a custom CGI script to process the form for you.

Workshop Wrap-Up

You can design forms quickly and easily with the Form Page wizard. Start with a list of questions, and decide how you want to display them. The wizard does the rest.

Chapter Summary

In this chapter, you learned how to design a customized, interactive form using the FrontPage Form Page wizard to ask a variety of questions. Based on your selections, the wizard tailors your form so that you can gather information from visitors to your site.

Next Steps

The next two chapters help you edit your form fields and assign form handlers to them. To learn more about the fields in your form, refer to Chapter 19, "Fields-The Building Blocks of Forms." To learn how to assign a form handler to your form, refer to Chapter 20, "Runtime Bots: The Heartbeat of FrontPage Forms."

Q&A