FrontPage Web Design banner.

Forms | Email Form Results | Form Results Database | Database Results Page

Forms (click here for further information on text boxes and buttons)

Forms are great to use when you want to query visitors for information or have them register for an event.  To set up a form, select Insert, Form, and Form.  A Form Box with a dotted border and a Submit and Reset Button will appear.

Form box with submit and reset buttons.

Place your cursor before the Submit button and hit the Enter key several times to allow for some vertical spacing, as in the picture above. 

Setting your form information up in table format helps ensure that all objects are aligned evenly.  Insert a table within your form with as many columns and rows as you think you will need.  We will create a one-column table by selecting Table, Insert, Table, and selecting 1 for Columns and 11 for Rows . You can always add additional rows and columns later, if needed. You can also merge rows/cells by highlighting the row/cells and clicking Table, Merge Cells or selecting the Table Merge button.Table merge button.

There are several types of boxes and buttons to choose from when creating your form: Textbox, Text Area Box, a Drop-down Box, and Radio and Option buttons.

Employment Application Form

 
 What is your work preference?   
What shift do you prefer to work?   

In the first row enter the title of your form. In the second row, type the word Name, space once, and then select Insert, Form, and Textbox.

Right-click on the Textbox and select Form Field Properties - a Textbox Properties box will appear and allow you to set the properties for your textbox.  Give your text box a Name and then select Width in Characters to set the width of your text box.  If you need to use more than one word to define your text box name, use all lowercase letters, use an uppercase letter at the beginning of each word, or separate words with a underscore(__) .  Do not use spaces ( fullname, FullName, or Full_Name). You can also set the Tab Order and include an Initial Value in this dialog box. Click OK when you are done.

Each form box or button needs a label to meet accessibility standards.  Highlight the Name and the textbox, Name .  Select Insert, Form, and Label and FrontPage will automatically add a label to your code.

Text Box form field dialog box.

Insert, Form, and Textbox. Right-click on the text box and select Form Field Properties to set the text box properties, Name this field Address.

Row 7 contains a Text Area Box which allows for multiple lines of text, whereas a single Text Box allows for only one line of text. Click Insert, Form, and Text Area. Right-click on the Text Area Box and select Form Field Properties .  Give the Text Area Box a Name and then set the Width in Characters and the Number of Lines. Click OK when you are done.    

Text area form field dialog box.

In rows 7-10 we will insert a Drop-Down Box, Checkbox and Option Button.  To create an Option Button (radio button) and set its Text Box Properties, click Insert, Form, and Option Button. Right-click on the button, select Form Field Properties to set the Option Box Properties. You can select whether the field is to be Selected, you select this option when you want the question to default to a certain answer or item, or Not Selected -- you can also give the button a Value.  You will notice that Option Buttons have a group name instead of just a single name. Be sure to apply the same group name to each option button in the question, but assign a different value for each button. Click OK when you are done.

Form: Option button dialog box.

We will insert an Option Button with "Full-time" as its value. The Initial State will be Selected. Click OK when you are done.

Creating a Checkbox is very similar to creating an Option Button - click Insert, Form and Checkbox.  Right-click on the button and select Form Field Properties. Give the field a name and then set the other Check Box Properties.

Check box properties dialog box.

To create a Drop-Down Box, click Insert, Form, and Drop-Down Box.  Right-click on the Drop-down Box, and select Form Field Properties. When the dialog box opens, give the field a Name

Now we will add our selections.  Click on the Add tab and type a selection in the Add Choice box.  Decide whether the selection will be Selected or Not Selected and click OK.  Continue these steps until you have completed your selections and then select OK.

Drop-down option properties dialog box.

Sending Form Results to an Email Address

To set up Form Properties, you must be on the "Live" site.  Right-click anywhere on the form and select Form Properties. Click the E-mail Address option and type in the email address of the person who will be receiving the form results. Type the name of the form in the Form Name box and then select Options.

Form properties dialog box.     Form properties dialog box.

Next select the File Results tab and, under File Format, select Formatted Text or HTML. Be sure the Include Field Names box is selected.

Select the Email Results tab and be sure the correct email address is in the Email Address to Receive Results box.  Select Formatted Text for the Email Format, check the Include Field Names box, type in a Subject Line for the message, click Form Field Name and type in "Email" in the Reply-to line, if you included an email textbox in your form and want to reply to the sender.

Form propeties email results dialog box.

Next select the Confirmation tab and browse for your Confirmation Page. You should always create a confirmation page so that people know their form results have been submitted successfully. 

Saving results dialog box.     Saving results properties dialog tab.

Last of all, select the Saved Fields tab and be sure that only the fields you want to appear in the results are saved.  Remove all other fields that you do not want to appear in the results. Select any additional information that you want to appear such as Computer Name, Username or Browser Type or Date.

Sending Form Results to a Database

If you want your form results to go directly into a Database, right click anywhere on the form, click Form Properties and when the dialog box opens, select Send to Database.  Remember, you must be on the "Live" site to set the form properties. Now select the Option and the Database Results tab.

Setting up database results form properties.

Click Create a Database under the Database Connection to Use option and FrontPage will automatically create a database for you and put it in a folder called "fpdb", which stands for FrontPage Database. FrontPage automatically names the table Results

  Database form results tab propeties.  

 FrontPage has created a database for you dialog box.

At this point, you should receive a dialog box with a message stating that you will need to change the extension on your form page from .htm to .asp.  Right-click on the form page in the Folder List, click Rename and change only the extension portion of the name to .asp. Example: Form.htm to Form.asp

Change form extension to .asp.

Anytime you make changes to the form, you will need to update the Form Properties.  Click Form Properties, Option, Database Results, Update Database, and OK to save the new changes.

Select the Saved Fields tab and modify or remove any fields you want or don't want to appear in your table.  Select the Additional Fields tab and select any additional information that you want to appear in the table.

Creating a Database Results Page

You can view your table results by creating a Database Results Page or by opening the  table in the "fpdb" folder.  You can also create queries and reports from table information just as you would if you were working with Access on your local machine.  You can also export the information to your local computer or another database.

To create a Results Page, select File, New, and Page. When your new page appears, right-click on the page to select the Page Properties. Once you have set your Page Properties, select Insert, Database, and Results. A database results wizard box will appear -- the Use an Existing Database Connection should be selected on the first screen.  Select Next and click Record Source, if it is not already selected. Select Next, again, and modify the fields that you want to see appear in the table.  If you do not need to modify the fields just click Next . Set the Table Options and click Next.  Select Display All Records Together on this screen and click Finish.

Database results wizard dialog box.

The Results Table will appear on your page. Save the page with the extension .asp. To view the table results, you must use a browser.  Click File, Preview in Browser, Browser Type, and PreviewRemember you can not preview the table results without a browser.  A shorter way of viewing the results is to go to the Web and type in the directory address including the database results page.  Ex.  http://www.umaine.edu/phoebe/Results.asp

Database results table. 

Database results display table.   
 

back to top


Web Design Tips | ADA Standards | Design Tools | Local & Live Sites | Browser Compatibility | Creating a Home Page | Text | Tables | Hyperlinks | Pictures | Spell Checking | Forms | Search Forms | Discussion Webs | Meta Tags | Resource Links | Lesson 1 | Lesson 2 | FrontPage Booklet | Home |