Rich Media Flash Forms


One of the most important aspects of developing reports is the form that specifies what criteria should be retrieved from the database. In the past, web developers have had to rely on HTML forms to create an interface that enables the user to select report criteria. The problem with HTML forms, however, is that they are very limited in their capabilities and aren't really suited for selections that require multiple steps.

For instance, suppose that Retro's Cycles decided to add eCommerce to their website and that they want their customers to be able to create a profile that stores their shipping information and payment information so that they don't have to fill in their information every time they return to the site. Using traditional HTML forms to accomplish this, several forms would be necessary. The first, shown in Figure 19.1, enables the user to input user information and shipping information.

Figure 19.1. A traditional HTML form that collects customer information.


Next, a second form would be necessary to collect information about payment information, similar to the one shown in Figure 19.2.

Figure 19.2. This form collects payment information.


Finally, a third form would be necessary that enables the customer to enter details about the current order, such as the one in Figure 19.3.

Figure 19.3. This form collects order information.


As a result, there are now three forms on three different pages, which increases the possibility that something could go wrong on one of the pages.

Note

Although you could group all these form fields into one long form, this makes the interface difficult to use for your visitors. Think of what would happen if they completed all the information and then, while completing the last field, something happened such as a browser crash. All the time they spent filling in the long form is now wasted because they have to start over from scratch.

For this reason, it's a wise idea to create forms that are short and save segments of data prior to moving on to the next step. That way, if something happens, customers can return and pick up where they left off, having only lost a small portion of their data.


So what's the solution to the problems presented with traditional HTML forms? Flash forms! ColdFusion now allows you to develop forms in the Flash format that enable you to create tabbed views of forms, enable your visitors to save their progress while filling out a form, and give you much more flexibility in controlling how your forms look to your customers.

Using the <CFFORM> tag and the Flash format, you can create a single rich media form that provides the same functionality as the HTML forms I previously mentioned, using a tabbed layout. These forms can be created within Dreamweaver's code view or with a simple text editor. As shown in Figure 19.4, the first tab of the form allows the visitor to enter personal information.

Figure 19.4. This rich media tab collects personal information.


Notice that the form allows users to save their customer information before moving on to the next tab if they choose. The second tab (see Figure 19.5) allows customers to enter their payment information and again, allows them to save their information.

Figure 19.5. This tab collects payment information.


Finally, the third tab (see Figure 19.6) enables them to review any orders they have submitted and the status of those orders.

Figure 19.6. This tab displays orders and their status.


As you can see, the Flash-formatted form offers a wider variety of options and functionality over the traditional HTML forms. So how do you create Flash forms in ColdFusion? It's easy because the Flash content is generated automatically, without requiring you to write complex code.

Creating a Basic Flash Form

The first step in creating a Flash form is to use the <CFFORM> tag to create a ColdFusion form, as shown in Figure 19.7.

Figure 19.7. Use the <CFFORM> tag to create a form.


Next, add any input types that you want, such as first name, last name, address, and so on, using the <CFINPUT> tag. The fields in Figure 19.8 are all text fields and are named tfFirstName, tfLastName, tfAddress, tfCity, tfState, and tfZip. There is also a single input button.

Figure 19.8. Add text fields and assign types and names.


Next, change the format of the form to the Flash format, as shown in Figure 19.9 and presto! you have a Flash form.

Figure 19.9. A simple Flash form has been created.


Adding Tabs to a Flash Form

Suppose that you wanted to follow the example discussed earlier and provide additional functionality with tabs. Adding a tab to your form is as simple as adding the form fields you want to display on the second tab, creating a tabNavigator group, and then creating form groups with the <cfformgroup> tag.

As shown in Figure 19.10, ColdFusion MX 7 enables you to group form elements into groups. The first group you need to establish is the tabNavigator group. This group type establishes that you are going to use multiple tabs in your form.

Figure 19.10. The tabNavigator group type specifies that your form will be tabbed.


Next, you need to create additional groups that contain the specific inputs for each tab (see Figure 19.11). For each group you create with the <cfformgroup> tag, a new tab is created. In addition, the label assigned to the group is what is displayed in the tab.

Figure 19.11. The different groups define the various tabs.


Tip

Remember to add an input button on any tab that you want to allow the user to submit.


With the basic form in place, you can then add functionality such as adding the information to a database, sending emails to administrators or staff, or retrieving and displaying content in a report format.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net