FrontPage Tips by Ward Cameron Enterprises
Take Your Web Site to New Levels

Create Custom Forms Using the Tools Included in Microsoft FrontPage

This tutorial shows you how to create forms with the tools included within Microsoft FrontPage. Forms provide versatile ways for visitors to play an integral role in the site's development.

Introduction
Step 1. Insert the Form
Step 2. Add some Fields to Your Form
Step 3. Set The Form Action

Send Form to An Email Address
Send Form to a Database
Send Form to Another Page for Processing

Hidden Fields
Custom Confirmation Pages
Set the Focus of the Form

Introduction

Forms provide many ways to add functionality to your site.

• Is your website working? Why not use a form to let your site visitors tell you themselves?
• Do you need to collect data? A web form allows your visitors to provide you with an endless variety of data.
• Are you putting together an online catalog? Every online store uses forms to collect sales information.
• Create an online test or survey. A form provides lets you poll your visitors about key issues. If you connect the form to a database, you can analyze trends and create detailed statistical reports.

Are you convinced?

Forms are your friend. They are the first line of communication between you, your website and your clients. We use forms every day and so we are immediately comfortable using them.

So lets get started!

Creating a form is as simple as 1-2-3:

1. Insert a blank form
2. Add some fields to the form
3. Tell the form what you want it to do

Step 1. Insert the Form

Open a blank page in FrontPage, or a page onto which you want to add a form.

Select Insert-Form-Form

You should now see a blank form that looks like the following:

Step 2. Add Some Fields To Your Form

Once you've created your form, you'll want to add a variety of form fields to contain the data you want to collect. These are also added by using the Insert-Form menu. There are several types of fields:

• Text Box. Use this to collect simple text based data. Text boxes can only be used for single line input. Examples include names, dates, addresses, etc.
• Text Area Box. The purpose of the text area box is to allow the collection of longer data sources. You can limit the amount of text allowed in your text box by You might use this for collecting comments on a web site, or opinions on your products and services.
• Check Box. This simple form field allows you to select a simple check box to select one or a number of items. Anything with a yes/no value can be connected with a check box.
• Option Group and Option Buttons. Sometimes you will have several related options, but you want your users to have the option to select only one. This is where option groups shine. Insert a Group Box and then add as many Option Buttons as necessary, one for each selection item. Shipping preference is a good example. You want them to select mail OR courier, but not both. Each option button in the option group must have the same name or your will have problems with your option group. FrontPage automatically does this when you place your cursor within the Group Box and then use Insert-Form-Option Button from the program menu. As a tip, insert your first Option Button, and then double click it to open up the Option Button Properties. Give the field a relevant name to replace the sterile R1 that FrontPage provides. Then, as you add new Option Buttons, they will automatically be given that more useful name.
• Drop-down Box. This common form field is often used to provide a long list of options. One universal example is the long list of countries that you will scroll through on most program registration forms. With most drop-down lists you can select only one item. FrontPage allows you to let users select more than one item. This is not allowed if you plan to send the data to a database though.

Lets add some fields to collect data. The following form shows you how some of the common form fields look when actually used in a form.

Step 3. Set The Form Action

Now that you've created a form, it's time to tell it what you want it to do. There are many possible actions, but the vast majority of forms are used to accomplish three key tasks:

1. Send the form to an email recipient
2. Send the form details to a database
3. Send the form details to another page for processing

You really are limited only by your imagination. Let's look at these three tasks in more detail:

Send the form to an email recipient

Do the following to send the form details to an email recipient:

Right click on the form and select Form Properties.

If you want to send the form to an email address, type the address into the E-mail address field. Then click on Options and the E-mail Results tab.

Here you can set the options for your form. Select the E-mail format, usually formatted text. Also, be sure the "Include Field Names" checkbox is selected.

The "Subject Line" field is what you will see as the email subject when you receive the email. Make sure it is descriptive enough to quickly identify.

Be sure to include a field named Email in your form. On the Reply-to line, type in the field name, in this case Email and select Form field name. This tells the form to use the value of the Email form as the reply to address of the form. This is necessary if you wish to reply to emails that have been sent to you using this method. 

Click on the Confirmation Page tab. Your screen will look like the following:

This screen lets you create custom confirmation pages and custom error pages. At the very least, create a custom confirmation page. Somebody has been spurred by your website to fill in an email form. Reward them with a custom confirmation page that thanks them for their submission, provides menu options to allow them to continue their exploration of your page, and perhaps even provides a reward for taking the time to contact you. This page can be a strong marketing tool, rather than a sterile 'thank you for your feedback' page.

Finally, head to the Saved Fields tab to open the following screen:

Before you can receive an email form, you need to tell it which fields to save. Normally, you want to receive all of the fields. In this case, our sample form had a field called TextBoxField, MemoBoxField, GroupBoxField, and DropDownBoxField. You also see a field called B1. That is the name of the actual submit button that sends the form to the email address and so it can be deleted.

You also have the option of selecting specific date and time formats for your message. Finally, it is handy to select the three options under Additional Information to save. These let you be notified of their Remote computer name (usually an IP address), their Username on that system and the type of browser they use. These can be handy for troubleshooting errors.

Congratulations, your form is now ready to be sent to an email address. Publish the form, open it in your browser and give it a try. 

Send the form to a database

The ability to send form data to a database for long-term storage is one of FrontPage's most useful form features. This subject is so important that we have given it an entire section. We discuss sending forms to a database in in great detail in the FrontPage & Databases section. Click here to learn how to send a form to a database.

Send the form to another page for processing

Forms can also be sent to other web pages. This is done in those situations where you will want to use a form to collect information that will be sent to another web page for processing. A search form is a classic example. Your user fills in the details they wish to find, and another page processes this information to display only the relevant information.

In another example, you may have a simple form with a drop-down box listing customers or products. Selecting a specific customer and clicking the select button will take you to a page that provides more details about that particular customer.

To send your form to another page, you'll need to do two things. First, create the form that will be used to send results to a second page. Second, you'll need to create the page that will be receiving the results.

Once you have created your form, right click on the form and select Form Properties.

Select the Send to Other option button, but DO NOT change the text that appears to the right of it. Now click Options:

In the Action Field, type the name of the page you want to have process the form. For the following example, the form will be sent to SendToOtherPage.asp. This form is populated by a Database Results Wizard that returns a list of all the Customers. Select a customer from the list and click Submit. You will be taken to SendToOtherPage.asp which will show you the details of that customer's record.

Caution. The above example will require you to learn how to send parameters from one page to another. In this case, when you select a customer from the list, it sends a field called CompanyID to the page called SendToOtherPage.asp. This second page will be designed in such a way that it will require that parameter in order to display the appropriate data. Keep in mind that this is an advanced topic and is beyond will be covered in more depth later in the course. If you can't wait, click here to learn how to pass parameters from one database page to another.

Hidden Fields

Some times you need to send a hidden database field. To do this, right click within the form and select Form Properties. Then click the advanced button.

Now click the Add button to open the Name/Value Pair Dialog.

On your website, you may have more than one form designed to collect similar information. A newsletter subscription form is a good example. It is handy to be able to know which page the user submitted the subscription form from. After all, if one subscription form, perhaps the one on your home page is drawing significantly more subscriptions, this can be a useful piece of data.

To do this type a name such as SubscriptionSource as the field name and under Value type: HomePage for the form on your home page. Now, every time the form is submitted to you, you'll see a field called SubscriptionSource with a value of HomePage. Do the same for the other locations of your subscription form.

There are far more complex examples of passing hidden form values, but they will be covered in more depth as we get to the appropriate sections.

Custom Confirmation Pages

Creating a custom confirmation page is not much more difficult than creating any other page. It is even easier than creating a form. Think of your custom confirmation page as a place that you reward your visitor for taking the time to contact you. Create a nice page that thanks them for their feedback and provides useful information that may be relevant. You may also provide a promise of a free download for filling in a feedback form and this is the perfect place to provide them with the download link.

One of the other cool things about confirmation pages is the fact that you can also echo the information they submitted with their form. For instance if they gave you their first name, you can thank them personally. To do this, we use custom confirmation fields. Let's pretend that their name is Jill. It would be nice to have the custom confirmation begin with something like:

"Thank you for your feedback Jill. We appreciate your input...."

To accomplish this, simply type the entire sentence, but leave a space where you would like the name to appear. Now, place your cursor in the location for the name field, and from the program menu select: Insert-Web Component. This will open the following dialog:

In the left column, scroll all the way to the bottom and click on Advanced Controls. After a short pause, you will see the option for Confirmation Field in the right pane. Click on this option and select Finish.

This will open the Confirmation Field Properties window.

Type FirstName and click OK. The field will be entered at your cursor insertion point, in this case, right where we want it in the sentence. It will now look like this.

"Thank you for your feedback . We appreciate your input...."

When your user submits the form, the field name [FirstName] will be replaced by their name.

Now, you can add as many confirmation fields as you have fields in the original form. Have fun with this, but remember to avoid the standard boring form response that you see on most sites. These sites use the custom confirmation page to just mimic the fields that the user entered.

Make this page an integral part of your marketing strategy. They should want to get to this page...and to do so, they have to provide you with some valuable information.

Set the Focus of the Form

How many times have you opened a web page that contains a form, and then been forced to use your mouse to click on the first field before you could begin filling in the form? Why didn't the form open with your cursor ALREADY in the first field, ready for action?

With a little coding, you can help to prevent your forms from performing this cardinal sin. Here's how.

Build your form in the normal way. Now when you're all finished, switch to HTML view and look near the top of the page for the <Body> tag. Enter the following code on the first line after this tag:

<Body OnLoad="javascript:FormName.FieldName.focus();">

Change FormName to the name of your form. by default, FrontPage uses FrontPage_Form1 as the name, but you can change it to anything you want. To find the name, right click on the form and select Form Properties.

Don't forget to change FieldName to the name of the field you would like to have your cursor appear in when the form opens.

Give it a try. Nothing like a little FrontPage Magic.