Forms  

Form Page Wizard

Forms allow you to receive information from the visitors to your web site. The forms can be created manually or by FrontPage's Form Page Wizard. To use the wizard, select File|New|Page from the menu bar.

[New Page window]

  1. Click Next > on the the first explanatory wizard window.
  2. The second window will allow you to add the questions that will appear on the form. Click the Add button to insert new questions into the form.
    [Form Page Wizard]
    Select an input type from the scrolling menu and edit the prompt for the question in the text box below if necessary. Click Next > when finished.
    [Form Page Wizard]
    Select the input type for the question you entered in the previous window. The contents of this window will vary depending on the type of question that was entered. Click Next > when the selections have been made.
    [Form Page Wizard]
    The question will now appear in the question listing. Click Add to add more elements to the form. If a question should be changed, highlight the title in the list and click Modify or Remove to delete the question. Reorder the questions using the Move Up and Move Down buttons. Click Next > to proceed to the next step after the questions have been added.
    [Form Page Wizard]
  3. Presentation Options - On this window, determine the layout of the form from several options and click Next >.
    [Form Page Wizard]
  4. Output Options - Now that the form elements are in place, you need to designate a way to view the results of the form. You will want to save them either as a web page or text file and enter the base name for the file where results will be stored. Click Next > when finished.
    [Form Page Wizard]
  5. The form is now complete. Click Finish to add the form to the web page.

Forms Toolbar

Activate the Form toolbar by selecting Insert|Form and dragging the menu off the menu bar.

[forms toolbar]

First, click the Form button. A dotted area with Submit and Reset buttons inside will appear.

Click the Form Properties button.

[Form Properties window]

Select the storage location for the form contents and name the form after Form name. Click Options... to specify text results page options, e-mail options and a confirmation page.

On the form, place the cursor before the Submit button and press the ENTER key several times to add room in the form above the existing buttons.

[form example]

Text Box [Text Box button]

Text boxes allow the user to enter one line of text. Click the button on the form toolbar to add a text box to the form. Activate the text box and select Format|Properties from the menu bar.

[Text Box Properties window]

Name - Enter a name for the text box with no spaces.
Initial Value - This text will initially appear in the text box.
Width in characters - Determines the width of the text box. The width can also be changed by clicking and dragging the handles on the element.
Tab order - It will be easiest to set the tab order when all the form elements are on the page. Use numbers 1,2,3... to determine the order the user will encounter each form element when the TAB key is used.
Password field - Select Yes if the entry into the text box should be treated as a password and asterisks will be used as the text is typed.

Validate... - Click this button to enter optional validation criteria.

[Text Box Validation window]

Set the text box to only accept a certain data type, a minimum or maximum length, and other options.

Text Area [Text Area button]

Text boxes allow the user to enter multiple lines of text. Click the button on the form toolbar to add a text area to the form. Activate the text area and select Format|Properties from the menu bar.

[Scrolling Text Box Properties window]

Set these properties just as in a text box. The width and number of lines in the text area can also be changed by clicking and dragging the handles of the text area.

Check Box [Check Box button]

Check boxes allow the user to make multiple selections from a list. Add check boxes by clicking the button on the form toolbar, enter value, and press ENTER or SHIFT+ENTER after each one.

[check box example]

Select Format|Properties to change the checkbox properties.

[Check Box Properties window]

Name - All checkboxes in the same list should be given the same name. In the example above, the three checkboxes all have the name "colleges".
Value - The values of each checkbox must be different. "COB" is being used as the value for the "College of Business" checkbox.
Initial state - If it is likely that the user will check a certain checkbox, the box can be set to be checked initially.

Radio Button [Radio Button]

Radio buttons allow the user to make only a single selection from a list. Add a list of radio buttons by clicking the button on the form toolbar, enter value, and press ENTER or SHIFT+ENTER after each one.

[radio button example]

Select Format|Properties to change the radio button properties. These properties are similar to those for checkboxes.

Drop-Down Menu [Drop-Down Menu button]

If a check box or radio button is too long, a better choice may be a drop-down menu. The menu will consolidate the choices and take up less vertical space on the page. Add a drop-down menu to the form by clicking its button on the form toolbar. Add values to the menu by double-clicking on the menu. First, name the drop-down menu in the first field. Add choices to the menu by clicking the Add... button.

[Add Choice window]

Choice - This is the text that will appear in the menu
Specify value - Unless another value is specified, the text entered in the Choice line will be the value for the selection. If you want the value to be different, check this box and enter a new value.
Initial state - One choice in the drop-down menu can be chosen initially.

[Drop-Down Menu Properties window]

To change a choice, highlight it in the listing and click the Modify... button or click Remove to delete the choice. Use the Move Up and Move Down buttons to change the order of the list.

Height - Change this value to indicate the number of selections that should be visible without clicking to view more.

Height=1

Height=3

Allow multiple selections - The user would be able to select multiple items from the list by holding down the CTRL key while clicking the names.