Making Your FrontPage 2003 Web Forms Work
with the New (2009) Form Handler on Tiger

Introduction

Most web forms created with Microsoft FrontPage 2003 on the student web server Tiger relied on the FrontPage Server Extensions (FPSE) to function properly. The FPSE included a “form handler” that would email form submissions to a specified address and/or add submissions to a text file.

Microsoft retired FrontPage in 2007 and no longer supports the FPSE running on Tiger. Consequently, the university will remove (or already has removed, depending on when you read this) the FPSE from Tiger immediately following the Fall 2008 semester. Existing web forms on Tiger that rely on the FPSE handler will no longer function after December 2008.

However, OTS has developed a new form handler on Tiger that will both support your existing forms and allow you to create new forms using Microsoft SharePoint Designer or almost any other web page editor.

This document will help you “fix” your existing forms so that they will work with the new handler. A separate page—Creating Web Forms on Tiger—is available to guide you through creating new forms. As you continue, you can copy and paste source code directly from this document into your web page editor. 

The Ugly Truth and the Silver Lining

For most users, the task of creating and maintaining web forms (or web sites, for that matter) will not be as easy as it was with FrontPage. But, that is direction in which web site development is heading. As the Web continues to mature, those who wish to develop custom web sites from scratch will have to acquire more advanced technical skills to do so. Those who are chiefly interested in posting content—rather than in developing sites—will likely be served best by user-friendly tools built on Web 2.0 technologies (e.g., Facebook, WordPress, Google Sites, etc.). And don’t forget, help is always as close as Student Computing Services (SCS).

As a case in point, those who have (or acquire) a free Google Gmail account can create web forms within Google Docs. This solution is remarkably user-friendly and yields forms that may be accessed via web browser or sent as e-mail to targeted respondents. Google Docs adds form submissions to a spreadsheet in your account; you can then download the spreadsheet and open it in Excel to process the data. As the Web continues to evolve, it is certain include more user-friendly solutions like this.

A Bit on SharePoint Designer

In place of FrontPage, Microsoft is now promoting two, nearly-identical applications: Expression Web and SharePoint Designer (SPD). This document describes the use of SharePoint Designer (the adopted standard at many USM schools), but with a little re-orientation, these steps can also be carried out in a basic text editor—such as the editor built into WebDisk (https://webdisk.towson.edu).

This document assumes that you have at least one form in your Tiger web site that you created within FrontPage 2003. If that is not the case, Creating Web Forms on Tiger will likely be more helpful.

Opening Your Tiger Site in SharePoint Designer

In order to proceed, open your Tiger site in SharePoint Designer; for step-by-step instructions, see Opening Your Tiger Web Site for Direct Editing....

Associating Your Web Form with the New Form Handler
(Associating a Form with the New Form Handler )

1. Locate your form file within the Folder List pane, and double-click to open it in Design mode.
2. Right-click anywhere within your form and select Form Properties from the context menu.
3. Select Send to other and set the dropdown box to “Custom ISAPA, NSAPI, CGI, or ASP Script”.
4. Click the Options button.
5. In the Action box, enter (or paste) /formsubmit/tuformsubmit.php
6. If necessary, set the Method field to "post".
7. Leave the Encoding type field blank.
8. Click OK, then click OK again to return to your form.
9. Save the web page.

At this point, you have "told" the form what handler to use, but not what to do with the submitted data. Next, we will configure the form submission options.

General Information on Form Configuration 

There are two different ways of “telling” the form handler what to do with the form submission:

• Use the form configuration file in your home directory on Tiger (next section)
• Specify submission options within the form source code itself

If both options are in place, the configuration settings in the form's source code will override the configuration file in your directory.

A form can include one, two, or all three of the following “action” settings:

• confirm
  When the user submits, Tiger will redirect the user to a web page you specify—
  perhaps a confirmation page or your homepage.
  
• writefile
  When the user submits, Tiger will add (append) the form data to a CSV (Comma
  Separate Values) text file in your home directory. CSV can be opened and
  processed in Microsoft Excel and other spreadsheet applications.
  
• email
  When the user submits, Tiger sends the form data to an e-mail address (or
  addresses) that you specify.

 
Using the Form Configuration File in Your Tiger Home Directory

In this scenario, your form gets its submission information from a hidden file (named ".formconfig") in your home directory on Tiger. If you wish for most or all of your web forms to process submissions in the same way—to send you an email message, for example—this “universal” configuration represents the simpler approach.

Your Tiger home directory already includes a .formconfig file preset with your e-mail address. In other words, if you associate your form with the new handler (as described above) and do nothing else, you will receive submitted data in the form of email messages.

But, let's say that you also want form submissions to be added to a text file in your home directory and that you want users to be redirected to your home page after submitting. For that, you will need to edit your .formconfig file.

To edit your .formconfig file using WebDisk: 
(Edit .formconfig with WebDisk)

1. Open webdisk.towson.edu in your browser.
2. Log in using your Towson NetID and password. WebDisk will display some of the folders and files in your home directory.
3. Select the Show hidden files and Single page checkboxes in the upper right corner of your screen to display all of your files.
4. Locate the file .formconfig and click the [Edit] link to the right of the filename. WebDisk will display the contents in a new Edit File window.
5. Carefully edit the text. You can specify the same three submission options we explored in the previous section.
   
   To the right of email=, revise the email address as desired. To add an additional address, insert a comma after the first address, then type the new address.
   
   To the right of writefile=, enter the name of the CSV (comma separated values) file to which you want to append form submissions. This can be useful if you plan to eventually analyze or process your form data; most spreadsheet and statistics applications will open CSV files.
   
   To the right of confirm=, enter the address (URL) of the web page to which your visitor should be redirected after submitting—perhaps a custom confirmation page or your home page. If you leave this blank, the form handler will display a default confirmation page
   (Figure 1: Default Confirmation Page). 
    
6. Click OK at the bottom of the window to save your changes and return to your directory display.
7. Click the Log Out button on the WebDisk toolbar to close your session.

Configuring Submission Options Within a Particular Page Using Hidden Form Tags

If you want to configure a particular form to "behave" differently than the others—to not use the settings in the .formconfig file—you can specify your submission options in the form itself following the steps below. You will start by inserting a few lines of PHP code at the top of the web page on which the form will reside; this lets the form handler know that the form submission originated from Tiger, and not a spammer’s website.
(Inserting PHP Code Into Form )

1. With your form open in SharePoint Designer (or another application that supports source code editing), click the Code button at the bottom of your screen to display the page in code view.
2. Scroll to the top of the page and type (or copy and paste) the following code on Line 1. The code must be added exactly as it appears here above the <html> tag.

3. Save the page.

Next, you'll need to add the code for one or more submission options so that the form handler will know what to do with the form submission. You'll do this by adding hidden fields to your form—the user won’t see them in the form, but they’ll be silently passed to the handler. Make sure you don’t reuse these field names elsewhere in your form!

Figure 2 (Source Code for Entire Form ) shows the source code for a simple, but complete form page, including the necessary PHP code, the reference to the new form handler, and configuration options (shown in red). 

To configure your form... (Inserting Code for Submission Options )

1. to send submissions to one or more email addresses, add the following line to the source code of your page (also shown on Line 14 in Figure 2). Be sure to insert the code below that representing the form fields and substitute you own email address(es) where noted.
    

   <input type="hidden" name="email" value="yourusername@students.towson.edu,anotherusername@gmail.com"/>

   
   
2. to append submissions to a CSV file in your home directory, add the following line to the source code of your page (also shown on Line 15 in Figure 2). Be sure to insert the code below that representing the form fields and substitute a file name of your choice for “myfile.csv”.
    
   

   <input type="hidden" name="writefile" value="myfile.csv"/>

    
   
3.  to redirect the user to a specific web page upon submission, add the following line to the source code of your page (also shown on Line 17 in Figure 2). Be sure to insert the code below that representing the form fields and substitute the URL of your choice for http://www.towson.edu.
    
   

   <input type="hidden" name="confirm" value="http://www.towson.edu"/>

   
   

When you have finished adding the configuration code, double-check for accuracy and save the page.