Chapter 10. Gathering User Input Using Forms
What You’ll Do
Use a Custom Confirmation Page
Save Form Results to a Custom Form Handler
Save Form Results to a Database
Introduction
In this chapter, you’re going to create Web page forms using Microsoft Expression Web. Forms that appear on Web pages are similar to paper forms. Web page forms share the same purpose (gathering information about your users) and use many of the same devices (check boxes, information fields, etc.) as paper forms. The most popular types of forms include:
- Request
- Registration
- Feedback
- Contact information
- Survey
- Guest book
- Order (shipping and billing information)
- Log On (prompts users to enter name and password)
- Search (enables users to search your site)
After some initial design and thought for your form page, you can get started by adding it to your Web site, and then you can design and display all the various information that you want to gather using text boxes, check boxes, option buttons, labels, list menus, and push buttons. You can also further customize your form by adding pictures, and setting certain rules for entering the data in certain fields.
If you’re using an ASP.NET page, you can insert ASP.NET controls into an ASP.NET page and configure them in the same way you insert form controls.
Creating Forms
Expression Web offers numerous types of forms so that you can collect information from users to your site. You can start from scratch and create the form by adding information fields to a blank form, or you can use one of the wizard templates. When you first create a form, Expression Web inserts a rectangular box with a perforated line-dash perimeter. Inside this box, you can add everything from check boxes and text fields to list boxes and submit buttons. To help with the layout of the form, you can insert a table. If you no longer need a form or form field, you can select and then delete it.
Create a Form
Open and display the Web page you want to use.
Click to place the insertion point where you want to insert a form.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Form button.
A form appears on the page with a dashed outline around the border.
Insert a table or press Enter to add space between form elements, and then type any text you want.
To resize the form, click the edge of the form to select it, and then drag a resize handle to the desired size.
Did You Know?
Expression Web helps you out. When inserting a form field before you’ve created the form, Expression Web automatically creates a form area and places it within the form. While editing the page, the form border appears as a perforated line.
Insert a Table in a Form
Open and display the Web page with the form you want to insert.
Click in the form where you want to create a table.
Click the Insert Table button on the Standard toolbar.
Drag to choose how many rows and columns you want.
Delete a Form or Form Field
Open and display the Web page with the form you want to delete.
Click the form or the field you want to delete to select it.
Press Delete.
Setting Form Properties
After you create a form, you can set form properties to name the form, specify a target frame and save the form results to a file or database, or send the form results in an e-mail message. When a site visitor fills out a form and submits it, Expression Web enters the data directly into a database or file, or sends an e-mail message. The form name you specify identifies the form in scripts. If you are using frames, you can specify a target frame.
Set Form Properties
Open and display the Web page with the form you want to set properties.
Right-click the form, and then click Form Properties.
Type a name to identify the form.
If you are using frames, type the target frame, or click the Browse button, select a target, and then click OK.
Click OK.
See Also
See “Saving Form Results to a File” on page 258, “Sending Form Results as E-mail” on page 260, “Saving Form Results to a Database” on page 264, or “Saving Form Results to a Custom Form Handler” on page 262 for information on saving form results to different locations.
Understanding Form Fields
One of the keys to creating a form is the creation of fields. There are many different types of fields, including text boxes, text areas, option buttons, list menus, and push buttons. In addition to these fields, there are also Advanced Buttons, which you can customize through font and color selection, and Group Boxes, which you can use to segregate clusters of related controls into one group. Password fields are basically one-line text boxes used to add passwords to your site so that you can restrict access (to charge for membership, for example). When a site user enters their password, it appears on screen as a collection of dots or asterisks to secure confidentiality.
After you’ve decided what types of fields to add to the form, you can define what you want them to do and how you want them to look. You can even set properties for each field, such as the length of a text field, or the available options on a list menu. You can insert form fields using the Form submenu on the Insert menu. If an item on the Form submenu is grayed out, the command is not available. You need a Web server equipped with FrontPage Server Extensions to activate the commands. After you create a form, you have to determine how to collect and display the user data.
Setting Form Tab Order
When you fill out a form, many times it is easier for users to move from field to field using the Tab key instead of clicking the mouse each time. Many form elements have a Tab Order field. Tab order determines which fields in a form receive the focus (active where you can enter data) when the user presses the Tab key. A form field with lower tab values receives the focus before any fields with higher values.
Set Tab Order
Open and display the Web page you want to use.
Double-click the form field in which you want to change the tab order field value.
Type the tab order value you want (lower numbers appear before higher numbers).
Click OK.
Inserting Labels
After you type a label next to a check box or option button, you can specify whether Web site users select the check box or option button by clicking the box or button, or its label. If you want your users to click the label, you need to active the label.
Insert a Label
Open and display the Web page you want to use.
Click in the form where you want to place the label.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Label button.
The text label appears surrounded by a perforated border, which indicates the label is active.
Type the text you want in the label.
Inserting Text Boxes
You can insert two types of text boxes in a form, Text Box and Text Area. Text boxes ask for information and provide a field where a user can type an answer. Text boxes are used for collecting relatively small quantities of information, such as the user’s online name. Text areas are small text windows best suited for brief text entries. This window scrolls vertically and horizontally to maximize its available space. They are ideal for use as guest books.
Insert a Text Box or Text Area
Open and display the Web page you want to use.
Click in the form where you want to place the text box or text area.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Text) button, Input (Password) button, or Input (Text Area) button.
- The Input (Text) and Input (Password) buttons both create a text box. The only difference is an option in the Text Properties dialog box.
A text box or text area appears in the form with an insertion point next to it. You can click to place the insertion point before or after the text box.
To resize a form field, click to select it, and then drag the sizing handles to the desired size.
Change Text Properties
Open and display the Web page you want to use.
Double-click the text box or text area.
- You can also right-click the text box or text area, and then click Form Field Properties.
The Text Box or Text Area Properties dialog box opens.
Enter a name that will identify the text box.
Enter the text to be displayed in the text box when a site user first opens the form. As you type, the characters will be counted in the Width in characters box.
Specify the field specific options for text boxes or text areas.
- For text boxes, click the Yes option to create a password to your Web site so that you can restrict access. When a Web site user enters their password, it appears as asterisks for confidentiality.
- For text areas, type the number of lines in which you want the area.
Click OK.
Inserting Drop-Down Boxes
The drop-down box allows users to choose one option from a scrollable list of choices. For example, you can create a list of all 50 states from which the user can choose one. The advantage of using a drop-down box is that the users are forced to select an option from the list, which prevents data input errors.
Insert a Drop-Down Box
Open and display the Web page you want to use.
Click in the form where you want to place the drop-down box.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Drop-Down Box) button.
Double-click the drop-down box.
Type a name for the drop-down box.
Click Add.
Type the name of the list item you want to list.
To have the item selected initially, click the Selected option.
Click OK.
Perform Steps 7 through 10 for each item you want to include in the list.
Enter a height for the drop-down box.
Click the Yes or No option to allow multiple selections.
Click OK.
Inserting Group Boxes
A Group box allows you to group related form elements into a separate area on the form, which provides some organization for the form elements and avoids confusion for the user. The Group box is useful for check boxes and option buttons. A Group box is a separate container on the form, so you can easily move it along with its contents.
Insert a Group Box
Open and display the Web page you want to use.
Click in the form where you want to place the Group box.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Group Box button.
To resize the Group box field, click the edge of the field to select it, and then drag a resize handle to the desired size.
Right-click the Group box field, and then click Group Box Properties.
Type the label you want to appear at the top of the Group box.
Click the Align list arrow, and then select an alignment option.
Click OK.
Insert Radio Buttons
Radio buttons (also known as Option buttons) are used when asking a user a question with more than one possible answer. Only one option button in a group can be selected at a time. Expression Web groups option buttons within a form with the same name. Typically assigning the same name to fields creates errors, but not with the option button. You need to assign option buttons in the same group with the same name to function properly.
Insert a Radio Button
Open and display the Web page you want to use.
Click in the form where you want to place the option button.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Radio) button.
Click next to the option, and then type a label.
Double-click an option button within the group.
Type a group name (the same one for each option button in the group).
Enter a value to associate with the option.
This value is returned with the form results and is displayed on the default confirmation page.
Click the Selected option or the Not selected option to set up the default state when a user opens the form.
Click OK.
Repeat steps 6 through 10 for each option button in the group.
Inserting Check Boxes
Check boxes are provided to allow users multiple choices from a list or series of options. Check boxes are just what they sound like—a statement which you can either confirm, by checking the box, or decline by leaving the box blank.
Insert a Check Box
Open and display the Web page you want to use.
Click in the form where you want to place the check box.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Checkbox) button.
Click next to the check box, and then type a label.
Double-click the check box you want to change.
Enter a name that identifies the check box in the form results.
The name is not displayed on the form.
Enter a value to associate with the check box.
This value is returned with the form results and is displayed on the default confirmation page.
Click the Checked option or the Not checked option to set up the default state when a user opens the form.
Click OK.
Inserting Buttons
Push buttons are functional components that are used when the user needs to do something. When you insert a form field, two buttons appear, Submit and Reset. The Submit button is a command that a user has to click to submit the form when completed, while the Reset button is a command that a user has to click to reset the form and start over. You can create a push button to perform an action.
Insert a Push Button
Open and display the Web page you want to use.
Position the insertion point in the form where you want to place the push button.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Button), Input (Submit), or Input (Reset) button.
A push button appears in the form.
Double-click the button.
Enter a name that identifies the push button in the form results.
The name is not displayed on the form.
Type the label that appears on the button.
Click the button type you want (Normal is the standard button, Submit is a button that submits the completed form, or Reset is a button that clears the form so the user can start over).
Click OK.
Insert an Advanced Button
Open and display the Web page you want to use.
Position the insertion point in the form where you want to place the advanced button.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Advanced Button button.
An Advanced button appears in the form with selected default button text.
Select the button text, and then type a name for the button.
Right-click the advanced button, and then click Advanced Button Properties.
Click the Button Type list arrow, and then select a button type.
Type a name to identify the button.
Click OK.
Creating Picture Buttons
You can insert a picture in a form, which you can use as a button. If you want, you can use a picture button, like a push button, to perform an operation. You can insert a picture in a form in a similar way you insert a picture in a Web page.
Insert a Picture Button
Open and display the Web page you want to use.
Position the insertion point in the form where you want to place the picture.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (Image) button.
Resize the pictures field, and then double-click the picture field you want to insert a picture.
The Picture Properties dialog box opens, displaying the Form Field tab.
Type a name to identify the picture.
Click the General tab.
Click Browse, locate and select the picture you want to use, and then click Open.
Select the Alternate Text check box, and then enter descriptive text to display accessibility information.
Click the Appearance tab.
Select the wrapping style, layout, and size options you want.
Click OK.
Inserting File Uploads
If you need to receive files from co-workers or users to your Web site, you can add a File Upload field to your form. When you add the File Upload field to a form, a text box and push button entitled Browse appear on the page. Users can use the text box to enter a path and file name or the Browse button to select a file to upload to your Web site. The file is transferred when you submit the form. If there is a problem, users can reset the form, and then try again.
Insert a File Upload Field
Open and display the Web page you want to use.
Click in the form where you want to place the file upload field.
In the Toolbox task pane, click the plus sign (+) to expand Form Controls.
In the Toolbox task pane, double-click the Input (File) button.
Double-click the file upload field.
Type an internal name for the field.
Specify the width of the field.
Click OK.
Saving Form Results to a File
Once you create a form and collect information from users on the Web, you can save the form results to a text or HTML file. When a site user fills out a form and submits it, Expression Web enters the data directly into a file. The File Results tab provides options for saving results to a file. If you want to save results to two different file formats, you have the option of selecting a second file. By default, form results are saved to a text file. In order to save results to a file Expression Web requires FrontPage Extensions, both on the Web server you use to develop the site and the one users use.
Save Form Results to a File
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to option.
Click Options.
Click the File Results tab.
Enter the location and name of a new file, or click Browse, locate and select the file to which you want to save the results, and then click Open.
Click the File format list arrow, and then select a file format.
- XML. Select to export as XML data.
- HTML. Select to create a definition list or bulleted list.
- Formatted Text. Select to create with or without HTML.
- Text database. Select a separator type, which you can import into a database.
To pair the values of each form field with it’s name, select the Include field names check box.
Click OK.
Click OK.
Using a Custom Confirmation Page
A confirmation page provides information to your users submit a form. When a user submits data in a form, Expression Web displays a default confirmation page. If you prefer to use a confirmation page of your own (which needs to be a static page), you can specify one on the Confirmation tab in the Options dialog box for some form handlers. You can specify two different confirmation pages: one for when a user successfully submits a form and another for when a user’s input fails a validation script. Confirmation pages are optional. However, they provide good feedback for users and provide a way to thank them for submitting information.
Use a Custom Confirmation Page
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to option.
Click Options.
Click the Confirmation Page tab.
Enter the URL of the confirmation page, or click Browse, locate and select the page, and then click Open.
Enter the URL of the validation failure page, or click Browse, locate and select the page, and then click Open.
Click OK.
Click OK.
Sending Form Results as E-Mail
Once you create a form and collect information from users on the Web, you can send the form results in an e-mail message. As you send the results in an e-mail, you can also save the results to a file at the same time, so you have two records of the form results. To help automate part of the process, you can set e-mail settings and insert form field information in the e-mail message. In order to send results in an e-mail message Expression Web requires FrontPage Extensions, both on the Web server you use to develop the site and the one users use.
Send Form Results as E-Mail
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to option.
Type the e-mail address to which you are sending the form results.
If you want, specify a file to save the results in a file as well as being sent via e-mail.
Click Options.
The Saving Results dialog box opens, displaying the File Results tab.
Perform one or more of the following steps:
- In the E-Mail format box, select the text format you want from the list menu.
- In the Subject line box, type the text that you want in the subject line of the e-mail (the default subject line in the e-mail is Form Results).
- If you want the subject line of the e-mail to contain the results of one field from the form, select the Form Field Name check box, and then type the name of the field in the Subject line box.
- In the Reply-to line box, a specific e-mail address can appear as the sender of the e-mail (the From or Reply To line in the e-mail). Enter the address.
- If the form contains a field that collects the site user’s e-mail address, that address can be used as the sender’s address. Select the Form Field Name check box, and then type the name of the form field in the Reply-to line box.
Click OK.
Click OK to close the Form Properties dialog box.
Saving Form Results to a Custom Form Handler
You can also set up a form to save results using a custom form handler. A form handler is a program on a server that is executed when a site user submits a form. You can use your custom script (ISAPI, NSAPI, CGI, or ASP Script) as a form handler. These custom scripts require scripting knowledge, which is beyond the scope of this book. In addition to the custom scripts, Expression Web also provides custom form handlers to work with a registration or discussion page. These form handlers require FrontPage Extensions, both on the Web server you use to develop the site and the one users use.
Create a Custom Form Handler
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to other option, click the list arrow, and then click Custom ISAPI, NSAPI, CGI, or ASP Script.
Click Options.
Type the URL where you stored your script.
Click the Method list arrow, and then select one of the following formats for submitting data to the form handler:
- Post. Passes the name-value pair to the form handler as input.
- Get. Encodes the form’s name-value pair and assigns the data to a server variable named Query_String.
- Default. Leaves the Encoding type text box empty.
Click OK.
Click OK.
Create a Discussion Form Handler
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to other option, click the list arrow, and then click Discussion Form Handler.
Click Options.
Fill in the information you want in the Discussion, Article, and Confirmation Page tabs.
Click OK.
Click OK.
Create a Registration Form Handler
Open and display the Web page you want to use.
Right-click the form, and then click Form Properties.
Click the Send to other option, click the list arrow, and then click Registration Form Handler.
Click Options.
Fill in the information you want in the Registration, File Results, Confirmation Page, and Saved Results tabs.
Click OK.
Click OK.
Saving Form Results to a Database
Once you create a form and collect information from users on the Web, you can also save the form results to a database. You can save the results to an ODBC-compliant database, which includes Microsoft Access. When a site user fills out a form and submits it, Expression Web enters the data directly into a database. You can save the information in a form to a database by using a database connection. A database connection is a connection that specifies the name, location, and type of database you want to access. You can create a new database or connect to an existing one. The Web site enables you to view, update, delete, or add records. To view the data once you set up the connection, your Web site must be hosted or published on a Web server configured with FrontPage Server Extensions and Active Server Pages (ASP), if necessary. For example, a confirmation page must be an ASP page, other page types will not work with databases.
Save Form Results to a Database
Open and display the Web page you want to use.
Right-click the form you want to save the results from, and then click Form Properties.
Click the Send to database option.
Click Options.
Click the Database Connection to Use list arrow, and then select an existing database connection.
- If you don’t have a connection, click Add Connection to create a new one, or click Create Database to have the FrontPage Extensions create a Microsoft Access 2002 database along with a connection for you.
Important If you convert the Access 2002 database to an Access 2007 database, it will not work with your forms.
Click the Table to hold form results list arrow, and then select the table where you want to place the form results data from.
The fields in the form are listed. For each field, you must specify the database column in which you want to save the data.
- If FrontPage Extension created the database, the form fields are mapped to the appropriate fields in the database.
Click the form field you want to modify.
Click Modify.
Click the Save To Database Column list arrow, select the column where you want to save the form field data, and then click OK.
Repeat steps 8 through 10 for each form field, and then click OK.
To view and modify additional fields provided by Expression Web, click the Additional Fields tab, and then change the fields you want.
Click OK.
Click OK.
Did You Know?
You can update a database with new fields. If you add new fields to a form after you created the database, you need to update the database with the new fields. Add the new fields to the form, right-click the form, click Form Properties, click Options, and then click Update Database.
Using ASP.NET Controls
ASP.NET Controls
Expression Web supports ASP.NET 2.0 and provides controls you can use directly from the Toolbox. You can insert ASP.NET controls into an ASP.NET page and configure them in the same way you insert form controls. For information and instructions on creating an ASP.NET page, see “Creating an ASP.NET page” on page 45.
The Toolbox in Expression Web provides six different categories of ASP.NET controls: Standard, Data, Validation, Navigation, Login, and WebParts.
- Standard. This category provides common controls—Button, CheckBox, DropDownList, and ListBox—as well as uncommon ones—Calendar, AdRotator, Localize, and Wizard (for data collection).
- Data. This category provides controls for retrieving and displaying data on an ASP.NET Web form.
- Validation. This category provides controls for configuring form field data validation on an ASP.NET Web form.
- Navigation. This category provides controls—Menu, SiteMapPath, and TreeView—for navigating in a Web site.
- Login. This category provides controls for creating a membership login with username and password for an ASP.NET Web site.
- WebParts. This category provides controls that allow users of the Web site to customize the appearance and layout of pages. After you insert the WebPartZone control, you can add other individual WebPart controls, which work similar to HTML form pages.
Data Access
Using ASP.NET data controls, Expression Web allows you to create a data-driven Web site without writing any code. You can create data connections using the Data Source Library task pane. You can connect to data in a database, an XML file, or even a sitemap file.
