Sending Form Results to a File and Email

FrontPage forms have remained fairly unchanged for several versions, yet they remain one of the most widely used functions in FrontPage. The reason is simple. Any Web site worth its salt uses forms in one way or another, whether as a form of communication with the Web site owner or as a way to dig into the site to get more information. Forms are prevalent on the Internet, and FrontPage makes using them in your site straightforward and simple.

FrontPage form components can save data into a file, save data in to a database, or send email using the data entered in to a form. All these components are browse-time components, which means that they only work on Web servers running the FrontPage Server Extensions. Collectively, these components are referred to as the FrontPage Save Results component.

The most common use of FrontPage form components is to save form information in to a file or an email address. This is done using the Save Results component. As you will soon see, FrontPage offers a wide range of options for saving form results that should meet just about any need.

To insert a FrontPage Save Results component, select Insert, Form and choose any form field such as Textbox. FrontPage inserts a simple form as seen in Figure 18.1. The simplicity of this form is deceiving. There is a lot of power in this component.

Figure 18.1. A FrontPage form looks simple enough, but it is hiding some significant functionality.

The easiest way to learn how to get the most out of this component is to use it, so let's create a Web page that will teach you how to exploit the power of the Save Results component.

Creating a Basic Form

First, you need to create a new form that you can configure to save your information:

1. Create a new Web site or open an existing Web site.

2. Create a new page.

3. Select Insert, Form, Textbox to insert a single text box onto a form.

4. Press Enter twice to move the Submit and Reset buttons to the bottom of the form.

5. Press the up arrow once to move the insertion point to the line directly under the text box.

6. Select Insert, Form, Text Area to insert a multiline text box.

7. Type the text Enter your name: above the text box.

8. Type the text Enter your comments: above the text area.

9. Double-click on the text area to display the TextArea Box Properties dialog box as shown in Figure 18.2.

   Figure 18.2. Configuring Text Area properties with the TextArea Box Properties dialog box.

   

10. Change the Width in Characters to 50 and the Number of Lines to 8.

11. Click OK.

Save the page as comment.htm. Your form should look like the page in Figure 18.3.

Figure 18.3. The Comment form will be used to save guest comments to a file.

Now that you have a form, you need to configure it to save information to a file. Before you do that, you will want to change the name of your form fields. When you save the results of a form to a file, FrontPage uses the form Field Names to identify the form fields. The text box you inserted is called T1 by default, and the text area is called S1. Those aren't very descriptive names, and once you add several more form fields, you will completely lose track of them unless you give them descriptive names.

Double-click on the text box to display the Form Field Properties dialog box and change the name to txtName. Do the same for the text area and change the name to txtComments. After you've made that change, save the page again so that you won't lose your changes.

Configuring Form Properties for Saving Results

Now it's time to configure the form to save the results to a file. Right-click the Submit button and select Form Properties to display the Form Properties dialog box as shown in Figure 18.4.

Figure 18.4. The Form Properties dialog box configures how the form is handled.

Note that the form is configured by default to save results to the _private/form_results.csv file. This file will contain the data from your form fields with each field's data separated by a comma. This type of file is called a comma delimited file. The file will be written to the _private folder by the Server Extensions when a user submits your form. For now, keep the filename as it is and click the Options button to configure the rest of the form.

If only the Send to Other option is enabled in your Form Properties dialog box, see "Form Properties Are Disabled" in the "Troubleshooting" section of this chapter.

When you click the Options button, you are taken to the Saving Results dialog box (shown in Figure 18.5), where you can configure all the settings for the Save Results component. On the first tab, File Results, you can configure the name and format of the file to which form results are saved. If you want to save your form results into an existing file, click Browse to select the file.

Figure 18.5. The Saving Results dialog box configures the component, file results in this case.

The following file formats are available:

• XML Saves your results into an Extensible Markup Language (XML) file. XML files can be used in many ways, including as a data source for a FrontPage Data View.

  For more information on using a Data View, see "The Data Source Catalog," p. 736.

  
  

• HTML Saves the form results into an HTML page using the Form Insert Here FrontPage component.

  For more information on the Form Insert Here FrontPage component, see "using Web Components, Shared Borders, and Link Bars," p. 167.

  
  

• HTML definition list Saves the form results in HTML format using an HTML definition list.

• HTML bulleted list Saves the form results in HTML format using an HTML bulleted list.

• Formatted text within HTML Saves the form results in HTML format using the <pre> HTML tag.

• Formatted text Saves the form results as text in a .txt file.

• Text database using comma as a separator This is the default setting. It saves the form results in a .csv file (comma delimited file) with a comma between each value.

• Text databases using tab as a separator Saves the form results in a .txt file with tabs separating values.

• Text database using space as a separator Saves the form results in a .txt file with spaces separating values.

The File format dropdown provides you with the ability to save your results as XML, HTML, or text. The comma separated file, the default setting, is most often used when you anticipate that you might want to import the data in to a database at a later time. If your purpose is to collect data for a database, you might want to consider using the Send to Database component instead. Leave the File format dropdown set to a comma separated text database.

For more information on the Send to Database component, see "Sending Form Results to a Database," p. 376.

The Include Field Names check box stipulates whether your Field Names are included as a header row. If you don't check this box, the file will only contain the data and not the fields names. Field names are only written to the file on the first submission of the form. After that, only the data in the form is saved.

The Latest Results at End box is only available if you choose an XML or HTML format for your file. If you check this box, the results are saved from top to bottom. If this box is not checked, new results are written to the top of the file.

If you choose, you can have form results saved to a second file by entering a second filename in the Optional Second File section. This file can be a different format than the first file, but you cannot save different form fields in this file.

The E-mail Results tab (see Figure 18.6) allows you to configure an email address and format. You can only enter one address here. If you enter multiple addresses, FrontPage will not complain, but your mail will not be sent. The E-mail format dropdown contains the same options as the File format dropdown on the File Results tab.

Figure 18.6. The E-mail Results tab settings determine where emails are sent and how they are formatted.

The E-mail Message Header section of the dialog box provides you with text boxes to enter the subject line and the reply-to address for the email. You can hard-code these values, or you can check the Form Field Name check box and enter the name of a form field. For example, if you wanted the subject line of the email message to be the name of the person filling out the form on your comment.htm page, you would check the Form Field Name check box and type txtName in the Subject Line text box.

By using a form field for the Reply-to line text box, you can have the user of your form fill in her email address and use that form field for the reply-to address. By default, the mail that you receive will have a reply-to address set to whatever the server administrator of the Web server configured for the Server Extensions. By using a form field to collect the user's email address and using that as the reply-to address for your form, you can ensure that emails you reply to will be sent to the person who filled out the form and not the email address the server administrator configured.

When a form is submitted, a confirmation page (see Figure 18.7) is displayed to the user of the form that recaps the information she entered and provides a link back to the form. If you'd like to present a more professional look, you can create your own confirmation page and configure your form to use it by configuring the fields on the Confirmation Page tab shown in Figure 18.8. You can also configure a validation failure page for cases in which form field validation fails and the server extensions are managing validation.

Figure 18.7. The default confirmation page doesn't look pretty, but it works.

Figure 18.8. The Confirmation Page tab lets you configure your own confirmation page for a better appearance.

NOTE

In most cases, you want form field validation to be handled by the browser and not the server so that users are presented with instant feedback if they enter incorrect information. However, in cases in which scripting is turned off in the browser, FrontPage Server Extensions will handle form field validation on the Web server.

For more information on form field validation, see "Form Field Validation," p. 370.

The Saved Fields tab is used to configure which form fields are saved when a form is submitted. As you can see in Figure 18.9, the B1 field is being saved in the comment.htm file. This represents the Submit button, a field that you wouldn't normally want to save. FrontPage will always save button fields as well as data fields. If you don't want to save the button fields, remove them from the list and click OK.

Figure 18.9. The Saved Fields tab lists form fields that are saved as well as other information.

You also have the option of saving the date and time that the form was submitted via the Date Format and Time Format dropdowns. By default, both of these are set to (none), which means that the date and time are not saved. By selecting a date and time format from the dropdowns, you can save this information along with your data.

If you click the Time format dropdown, you will notice that some of the time formats contain the letters TZ at the end. These formats display the time offset from UTC time, also known as Greenwich Mean Time. The time displayed is the time on the Web server, not on the user's machine.

At the bottom of the Saved Fields tab are three check boxes for saving the remote computer name, the browser type being used, and the username of the user. Unless you have password protected the Web site, the username will not be populated by the Server Extensions.

For more information on password protecting a Web site, see "Site Administration," p. 330.

Test your form now by browsing to comment.htm in your Web browser. Fill in the form with your name and whatever comments you choose and click Submit. After submitting the form, close your Web browser and open the form_results.csv file in the _private folder in FrontPage to see your information.

If you see a page with FrontPage Run-time Component Page across the top of it when submitting your form, see "Form Returns Run-Time Component Page" in the "Troubleshooting" section of this chapter.

Creating a Custom Confirmation Page

Now let's create a confirmation page that is a bit more functional and presentable. Create a new page and save it as confirm.htm. Now you need to customize this page so that it will be more personal and reflect the information entered in to the form:

1. Type the text Thank you for your submission, at the top of the page.

2. Leave the insertion point at the end of the line and select Insert, Web Component.

3. In the Component Type list, scroll down to Advanced Controls at the bottom of the list.

4. In the Choose a Control list, select Confirmation Field as shown in Figure 18.10 and click Finish. The Confirmation Field Properties dialog box appears.

   Figure 18.10. The Confirmation Field component is used to personalize confirmation pages.

   

5. Enter txtName as shown in Figure 18.11 and click OK. This is the name of the text box on your form in which your users enter their names.

   Figure 18.11. Enter the name of a form field in the Confirmation Field Properties dialog box.

   

6. Enter a period after [txtName] that was just inserted by the Confirmation Field component as shown in Figure 18.12.

   Figure 18.12. The Confirmation Field component configured to display the user's name in the confirmation page.

   

7. Format this line as an H2 style by selecting Heading 2 from the Style dropdown.

8. Press Enter to go to the next line.

9. Type the text Your comments were: and press Shift+Enter.

10. Insert another Confirmation Field component (see steps 2 4) and enter txtComments for the name of the confirmation field and click OK to insert it.

11. Click once on the [txtComments] Confirmation Field component to select it and click the I button on the toolbar to format it as italic.

12. Save the page.

Your confirm.htm page should now look like the one shown in Figure 18.13.

Figure 18.13. The finished confirmation page.

Now you will connect your form to the confirmation page that you just finished:

1. Open comment.htm.

2. Right-click the Submit button and select Form Properties.

3. Click the Options button to display the Saving Results dialog box.

4. Click the Confirmation Page tab.

5. Click the Browse button next to the URL of Confirmation Page box.

6. Browse to the confirm.htm file you just created and click OK.

7. Click OK in the Saving Results dialog box.

8. Click OK in the Form Properties dialog box.

9. Save the page.

Now preview your form in the browser and fill it out. Click Submit and you should see the confirmation page shown in Figure 18.14.

Figure 18.14. Your custom confirmation page. A much more professional look.

Everything is working great, but what if you user doesn't enter her name? Your confirmation form will then look pretty unprofessional. The solution to that problem is form field validation.