XForms: The 'Other' New Forms in CFMX 7

Jul 01, 2005

by Matt Woodward

By now everyone in the ColdFusion community has no doubt seen and discussed the new features in ColdFusion MX 7. Big on the list of favorites in CFMX 7 is the Flex-based Flash Forms technology that allows ColdFusion developers to build highly interactive, complex Flash forms quickly and easily. The hype surrounding Flash Forms is well-deserved, because this is a fantastic feature that will vastly improve the user experience in many situations.

What may have gotten lost in the shuffle, however, is XForms, the "other" new form capability in CFMX 7. Flash isn't the only choice for the "format" attribute in cfform! By specifying format="xml" in the completely-revamped cfform tag, CFMX 7 can now produce powerful, flexible, and darn-good-looking XForms that can be served to your users without the need for a browser plugin. If you don't want to use Flash Forms but still want to take advantage of the new capabilities of the cfform tag, XForms may be just what you're looking for. XForms allow for a complete separation of form elements and the form layout, making your form development tasks a lot simpler and leaving your forms highly flexible and reusable.

The New cfform

If you're already cringing at the mere site of the cfform tag, fear not; this isn't the cfform of the old days. Like many ColdFusion developers, I avoided cfform in previous versions of ColdFusion because I found it to be of limited use and it often caused more problems than it solved. In CFMX 7, I no longer have these concerns. The cfform tag has literally been rewritten from the ground up and offers amazing new capabilities that will have you loving cfform all over again. For details on the engineering behind the new cfform tag, please see Mike Nimer's excellent article, "Creating Better Forms Faster with ColdFusion MX 7", on Macromedia's DevNet site.

For starters, with CFMX 7 there is finally a "CF" version of all the HTML form input types. No more switching back and forth between cfinput and input! There is even a new cftextarea tag available for use with cfform. There are also great new validation options available, and you can indicate within cfform where you want your data validation to occur: on the client, either when the form is submitted or onBlur (in other words, when the user moves to another form field and the current field loses focus); or on the server in the case of text and text area input types.

The new cfform also provides additional validation types that ColdFusion developers have been requesting. Validation types such as URL and e-mail are now built right into CFMX 7, and if the built-in types don't suit your needs, you can specify a type of "regex" and write your own validation regular expression right into your cfinput tags. Combine this with the new IsValid() function and new cfparam types, and cfform is now a validation powerhouse that you no longer have to be ashamed of using.

XForms: A Brief History

If you've been following the various XML projects that have been cropping up over the last few years, you've probably heard of XForms. XForms is actually a World Wide Web Consortium (W3C) specification, the goal of which is to "make forms more portable and easier to work with" (http://www.w3.org/2002/Forms/Activity.html). Similar to the continual mandate to programmers to separate logic from presentation, the XForms specification looks to tie form fields more to a specific data model and less to the form presentation itself. Another goal of XForms is to "reduce the need for scripting, and to make forms design simple without the need to nest tables." I'm sure we've all created the standard two- or three-column table-based forms thousands of times, so XForms probably already sound like a great idea to most of us.

While these are certainly admirable and lofty goals, the issue with the adoption of XForms to date has been that many browsers don't support XForms without the use of a plugin, and the XForms plugins unfortunately aren't ubiquitous by any means. In fact, XForms plugins for Internet Explorer 6 are still in beta for the most part, and the Mozilla Foundation just announced the beta version of built-in XForms support for Mozilla/Firefox on February 2, 2005. (This feature is still in beta as of the date of this article. You can keep track of their progress toward a full release at http://www.mozilla.org/projects/xforms/. Clearly, native support for XForms within the browser has a long way to go before we developers can rely on them working for the majority of our users.

So why would I spend all this time and effort describing the advantages of XForms only to then turn around and tell you that you can't use them? Is this some sort of cruel joke I'm playing? Of course not! In typical fashion, ColdFusion cuts through all the complexities involved with XForms and provides a framework that allows developers to take advantage of the capabilities of XForms right now, today, with very few worries of browser incompatibility.

XForms in ColdFusion MX 7

The way in which CFMX 7 works its magic with XForms is ingenious. Using cfform tags in conjunction with some form tags that are new to CFMX 7, you simply type in the cfform and cfinput tags without including any HTML or CSS layout information. Then you include the format="xml" attribute in your cfform tag, which tells ColdFusion to generate XForms-compliant XML and place it into a variable with the same name as your form. If the process stopped at this point you would already have XML form data that would work with an XForms browser plugin, and at a minimum you just saved yourself a whole lot of typing.

But true to form, ColdFusion takes what would already be a good thing two steps further. Another new attribute of the cfform tag is the "skin" attribute, and this is where you tell CFMX 7 which XSLT skin you want to apply to your form. (CFMX 7 ships with nine skins, but you can create your own as well.) ColdFusion uses the XSLT skin to transform the XForms XML into something that's a bit more browser-friendly, which usually means an HTML layout of some sort. The XSLT skins that ship with CFMX 7 also each have a corresponding CSS stylesheet to give your forms a little extra style. In case you missed it, we just went from basic cfform tags to nicely formatted HTML forms that will work in virtually any browser, and CFMX 7 did most of the work for you.

Why Use XForms?

At this point you may be thinking, "So what? I don't mind building my forms by hand." (If you actually are thinking this you're probably in the minority of web developers!) The main advantages this new approach to form building provides are two-fold: first, you save a lot of time over the old way of doing things; and second, because the form components are separated from the presentation, your forms remain flexible. If you want to change the look and feel of your form, just apply a different skin. If you want to use the same form to service multiple devices like a web browser, PDA, and cell phone, no problem! Again, just apply a different skin.

Hopefully the time savings and flexibility of XForms have you sufficiently intrigued by now, so let's take a look at a specific example of how XForms are created in CFMX 7.

A Simple Contact Form

For this example we'll create a standard contact form that we've all built 1000 or more times. Building a contact form the traditional way usually starts like this:

<form name="contactForm" action="process.cfm" method="post">
   <table width="500" cellpadding="2" cellspacing="1">
      <tr>
         <td align="right"><strong>First Name:</strong>
         </td>
         <td>
         <input type="text" name="firstName" size="50" >
         </td>
      </tr>
      
   </table>
</form>

Then you add more and more rows to the HTML table until the form is complete. By contrast, here is the complete XForms contact form we'll be investigating:

<cfform name="contactForm" format="xml" skin="lightgray" width="500">
   <cfformgroup type="vertical" label="Your Contact Information">
      <cfinput name="firstName" type="text" maxlength="50" label="First Name"
        required="yes" validate="noblanks">
      <cfinput name="lastName" type="text" maxlength="50"
        label="Last Name" required="yes" validate="noblanks">
      <cfinput name="email" type="text" maxlength="100" label="E-Mail"
        required="yes" validate="email" >
      <cfinput name="phone" type="text" maxlength="14" label="Phone"
        required="yes" validate="telephone" >
   </cfformgroup>
   <cfformgroup type="vertical" label="Reason for Contact">
       <cfselect name="reason" label="I have a" required="yes">
         <option value="question">Question</option>
         <option value="complaint">Complaint</option>
         <option value="compliment">Compliment</option>
      </cfselect>
   <cfformgroup type="horizontal" label="I wish to be contacted: ">
      <cfinput type="radio" name="contact" label="Yes" value="yes" required="yes" >
      <cfinput type="radio" name="contact" label="No" value="no" >
   </cfformgroup>
   </cfformgroup>
   <cfformgroup type="vertical" label="Additional Details">
      <cftextarea name="details" cols="70" rows="6" required="yes"
        label="Your Question or Comment" validate="noblanks">
       </cftextarea>
      <cfinput name="submit" type="submit" value="Submit" />
    </cfformgroup>
</cfform>

This is obviously pure CFML code, but here's what the user sees:

Amazing that so much comes from so little! There's lots of great stuff in here, so let's walk through it.

The first thing you'll notice is the complete absence of any HTML layout code. Don't panic; this is by design and you'll soon realize that this is a very good thing. The next thing you'll notice is some of the new cfform attributes and tags, specifically format="xml", skin="lightgray", cfformgroup, and cftextarea. Space prevents me from addressing validation in much detail, but also take notice of the new "email" and "noblanks" validation options.

As mentioned previously, when you specify XML as the format for cfform this tells ColdFusion you want to generate an XForm. ColdFusion shields you from the inner-workings of this so you won't need to know more unless you want to deal with the XForms XML yourself. The "skin" attribute tells ColdFusion which XSLT skin you want to apply. In this example, we're using the "lightgray" skin that ships with CFMX 7. The XSLT and the accompanying CSS stylesheet tell ColdFusion how to format the form, and they even automatically include the red asterisks you see beside the required form fields.

The cfformgroup tag tells ColdFusion to group sections of the form. Usually, you indicate either a horizontal or vertical grouping. If you've ever worked with a layout manager in software development or done any Flex work this will seem vaguely familiar. A "label" attribute has also been included for some of the form groups. As you can see from the screenshot, the XSLT skin divides our form into clearly-labeled sections.

Extreme Flexibility

The time saved when developing with XForms is definitely nice, but the ability to separate the form's elements from its layout is really the most powerful feature of XForms in CFMX 7. The look and feel of XForms can be completely altered with a simple change to the "skin" attribute of the cfform tag. Getting into the details of building your own XSLT skins is beyond the scope of this article, but you can use the skins that are included with CFMX 7 as a starting point. You'll find them under your ColdFusion webroot in the CFIDE/scripts/xsl directory, and the related CSS stylesheets are in the CFIDE/scripts/css directory.

For now, let's just take a gander at what a simple change to the skin attribute can do to our form. In this case we'll switch from the "lightgray" to the "blue" skin that comes with CFMX 7.

Even from this very simple example, you can see that the ability to quickly and easily change the look and feel of a form without touching the form code itself is an extremely powerful feature. For example, standard skins could be created for a corporate web site that would enforce a consistent look and feel for all the forms, and when a design change occurs in the future, you would simply change the XSLT skin to update the forms. Or if you're creating an application that targets multiple devices such as a web browser, PDA, and cell phone, you could easily create a skin that would adjust the form properly for each of these devices.

Conclusion

I hope this has provided you with a good introduction to the power of XForms. Using CFMX 7, you can now easily create XForms with pure CFML code and leave the layout and presentation details to the XSLT skins and CSS stylesheets. This not only saves a lot of time and effort over the old methods of building forms, it also leaves your forms far more flexible for future changes. Flash Forms are great but in your investigation of the new capabilities of cfform in CFMX 7, don't forget to try out XForms too!

Matt Woodward is a web application developer for i2 Technologies in Dallas, Texas, and also works as a consultant through his company Sixth Floor Software. He is a Macromedia Certified ColdFusion Developer, a member of Team Macromedia, and has been using ColdFusion since 1996. In addition to his ColdFusion work, Matt also develops in Flex, Java, and PHP.