Creating Forms in Microsoft FrontPage 2003

 

In this tutorial, we will cover how to create forms on your website.  Forms create an easy way to collect and organize information from your Website’s visitors.

 

1) Open your Website in FrontPage, and open the page you wish to add a form to (this example will use a new page).

 

2) Click Insert -> Form -> Form.

 

 

FrontPage creates a form region (indicated by the dotted line). All elements of your form must be within this region, or they will not be properly recognized.

A Submit and Reset button are also created.  The Submit button will send data in the form, while the Reset button will clear information currently in the form.

 

 

 

 

3) To create an input box, click inside the form region and click Insert -> Form ->, and then select the type of input you would like.

FrontPage allows for the creation of several different input “fields” on your form.  The Textbox, Text Area, Checkbox, Option Button, and Drop-Down Box fields are discussed below in the “Types of Input Fields” section of this tutorial.

 

Note: All input fields should be preceded by what is supposed to be entered in that field.

 

 

 

 

4) For each added field, Right-Click on the field in the design area, and select Form Field Properties…

 

 

5) Configure the necessary properties for each field.

Note: Each field type will have a unique set of properties, these are discussed in the “Types of Input fields” section of this tutorial.

 

6) Right-Click anywhere in the form region, and select Form Properties…

 

 

 

7) In the Form Properties box, change the File name.  FrontPage defaults to “form_results.csv”  However, if you have multiple forms, FrontPage will have all of the results with this same name, so change this to something unique for your form.

It is advisable (although not necessary) to leave the directory (the “../_private” part in this example) so that the results are not publicly accessible.

 

 

This stores the results of the form in a “comma separated values” file, which can be opened in Excel

 

8) Entering your E-mail address in the second textbox will allow you to have form submissions mailed to you.

 

 

Note: If you editing your page using a local copy (stored on your hard drive) you will most likely receive this message.  Click No.

 

 

 

When the form is submitted, the Website will generate an email and send it to you.

 

9) Click the Options button.

 

 

 

10) Copy the File name from the first box into the File name textbox under Optional second file, and change the file type to .html

 

 

This will store the results of the form in an HTML file.

 

11) Right-Click on the Submit button, and select Form Field Properties.

 

 

 

12) Delete the B1 from the Name textbox, leave it blank, and click OK.  If this is not done, the confirmation and results pages will include a line of “B1: Submit”

Removing the name will remove this line, and avoid possible confusion.

 

 

 

13) Publish the form to your website (see our publishing tutorial if you need help with this).  FrontPage automatically creates a confirmation page.  When the user submits the form, they are given a results page that displays their input for each field.

 

                                       

 

 

14) To access the results, in FrontPage, click View -> Remote Web Site. Enter your connection information (see our publishing tutorial if you need help with this).

Open the _private folder on the right side of the screen.

 

 

 

15) Select the form result files, and click the left arrow button (the Publish Selected Files from Remote Web site to Local Web site button).  This will get the most recent set of results from your Website.

 

 

16) The HTML file can be opened in FrontPage like any other page.  To open the CSV file in Excel, Right-Click on the CSV file, select Open With -> Microsoft Office Excel.

 

 

 

 

 

 

Example Result Views:

 

HTML:

 

 

The HTML file places entries one after another, with the newest files at the bottom.

Note: If you open the HTML file in FrontPage, you will see an extra line at the bottom that will not appear if opened in another way.

 

 

 

CSV:

 

 

Note: If you have a large amount of text in a field (for example, the Summary field above), Excel will not be the best choice for viewing it.

 

 

E-Mail:

 

 

 

 

 

 

Types of Input fields:

 

Textbox:

 

Description:

 

The textbox is the most common input field for forms.  The user clicks inside the textbox, and types the information required. Use these for text input that will not require multiple lines.

 

 

 

The length of the textbox can be changed by clicking on the textbox, and using the resize handles

 

 

Properties:

 

 

A) The Name field is a title for the textbox.  If I entered “Apple” into textbox T1 on the form, the results page will display  “T1: Apple”.  Change the Name to something descriptive of the expected input.

 

B) The Initial Value, which by default is blank, is a string of text that is displayed when the user first views the page.

 

C) The Width in characters can be used to adjust the width of the textbox numerically.  This is updated automatically if you resize the textbox in the design view.

 

D) Password field indicates if you would like entered text to display as asterisks as opposed to letters.  Password fields will not be displayed on the confirmation page, but will be displayed on your results page.

 

 

Text Area:

 

Description:

 

The text area is similar to the textbox, except that it is used for large amounts of text that will need multiple lines.  While the textbox can only be one line in height, the text area can be any number of lines.  As well, if more lines are required than are given on screen, the text area can be scrolled up and down for any number of lines.

 

 

Properties:

 

 

A) The Name field is a title for the textbox.  If I entered “Apple” into text area S1 on the form, the results page would display “S1: Apple”.  Change the Name to something descriptive of the expected input.

 

B) The Initial Value, which by default is blank, is a string of text that is displayed when the user first views the page.

 

C) The Width in characters can be used to adjust the width of the text area numerically.  This is updated automatically if you resize the text area in the design view.

 

D) The Number of lines determines how many rows of text are displayed at one time (you can scroll for additional lines). This is updated automatically if you resize the text area in the design view.

 

 

Check Box:

 

Description:

 

A check box is used for options of a yes/no variety.  The user clicks on the box to either select, or deselect the item.

 

 

Properties:

 

 

A) The Name field is a title for the checkbox.

B) The Value field is the positive description of the checkbox status. 

 

These are used to generate the result message.  For example, with Name C1 and Value ON, if the checkbox is selected, the results page will read “C1: ON” while if the checkbox is deselected, the results page will read “C1: “ with no value.

Change the Name and Value fields to something descriptive of the input.

 

C) The Initial State is the status of the checkbox when the form is first loaded.  Checked means the box is selected by default (opt-out options). Not checked means the box is deselected by default (opt-in options).

 

 

Option Button:

 

Description:

 

Option buttons are used for options which can be any of a set of options, but can not be multiple.  The user clicks on the option button to select it, and any other option button in that “group” will be automatically deselected.  These are also frequently referred to as “radio buttons.”

 

 

Properties:

 

 

A) The Group Name field is a title for a set of option buttons.

B) The Value is the description of a specific button.

 

Using the example above, there are three option buttons. To only allow one of these three to be selected, the Group name must be identical between all three buttons.  The Value should be something that distinguishes the button from the others in the group.  In this case, the values should be changed to SCC, PRC, and CPC.

 

C) The Initial state is the status of the option button when the form is first loaded.  Only one option button in each group can have initial state selected.

Changing the Initial state of second option button in the same group to selected will cause the first one to be set to not selected.

 

 

Drop-Down Box:

 

Description:

 

A drop-down box is used for selecting from a large number of choices, or selecting multiple choices from a list.  The user clicks on the drop-down box’s arrow, and the correct option from the list.

 

 

Properties:

 

 

A) The Name field is a title for the Drop-Down Box. Change the Name to something descriptive of the options.

 

B) The Add button allows you to create a choice to be displayed in the Drop-Down Box.  This is covered in more detail below.

 

C) The Height is the number of rows of the Drop-Down Box that are displayed on screen.  If you enter a height larger than 1, instead of a drop-down box, the user will select from a scrolling list of choices.

 

D) Allow multiple selections enables multiple choices of the Drop-Down Box to be selected by holding down the Control button while clicking.  Instead of a drop-down box, the user will select from a scrolling list of choices.

 

Adding Choices:

 

1) To add a choice, click Add.

 

 

 

2) A) Enter the text description of the Choice.

    B) Check the Specify Value checkbox and enter a value if you wish to use something different than the Choice text as the submission value.

    C) The Initial state allows you to specify which choice is selected when the form is first loaded.

 

 

3) A) This is the list of choices you have currently added.

    B) The Modify button will allow you to edit the selected choice.

    C) The Remove button deletes the selected choice.

    D) The Move Up and Move Down buttons move the selected choice up and down in the Drop-Down Box order.