fuzzyness

Forms, the Universe and Everything

15·Apr·07

I’ve got a bee in my bonnet about forms. They’re a pain in the arse and I want to make them as easy as possible.

At Definition we’ve got our basic form code pretty much sorted I’d say. We’ve worked hard to develop a basic form codebase that’s semantic, clean, accessible, pretty flexible, and that tastes of a nice mature cheddar (but not too sharp on the old tastebuds there like, say, a ripe brie might be). Or something.

When it comes to form-building time (11am already??!!) we can grab our basic set of example form fields and plug in a stock set of CSS we can use to style that same form code in umpteen different ways – vertical, horizontal, upside-down, pea-green and sky-blue, etc. Nice and easy does it.

Wishlist

However, if I had an ultimate wishlist for forms, here’s what it would be (note I say “if“ – I’d have to be a bit sad to have such a list, don’t you think?)…

1. Quick and easy: a system which makes it easy and quick to create semantically-coded forms and form fields.
2. Hints: a nice way of having little helper hints appear on focus (and/or hover).
3. Validation: both client-side and server-side validation would be nice, with lots of options, and which looks great and very user-friendly when throwing up an error. And lashings of ginger beer.
4. Effects: not spurious effects, mind. Just lovely feedback on hover and focus, to aid usability. Honestly, no whooshing.
5. Processing: really, I’d like server-side processing just generally, you know, sorted. Whether it be to submit to a mailing-list; or send a basic contact form to email; or gather a brochure request; or a poll a survey which collects responses, collates data, draws pretty pie charts, etc.

So we don’t need much…

So where are we now?

• Now for #1 we’ve got our form code stuff. Still requires a fair bit of the old copy-and-paste but still gets us done in time for lunch.
• For #2, I’ve been looking at this great technique which I think we could integrate pretty easily into our default codebase.
• For #3, I’ve no idea about PHP validation so we can’t do server-side validation out of the box anyway. Every single one of the client-side javascript methods I’ve found totally suck big sweaty rocks, frankly. Either their functionality is based on the form code being jam full of nasty tables, or the extra overhead required runs into hundreds of extra megabytes, or they don’t work in Safari, or error reporting back to the user is crap, or the javascript is obtrusive to the point of it sitting in your lap and blocking your view of your monitor, or…. You get the idea.
• For #4, these are easily done in CSS, and is something we have in most forms as default. I wouldn’t want to start getting into javascript solutions for this kind of thing anyway.
• For #5, form processing is something we have handed to us most times, which obviously has its good and bad points. We sometimes handle processing with off-the-peg PHP form mailers (such as this one), but these can be pretty heavy-going to implement. If we build a site in Expression Engine, we can access the free Freeform module to process forms. This works pretty well, though file uploading is out. Ah. Submitting to the mailing-list managers we use is easy enough, though submitting to those, and checking if the person said they actually wanted to join the list, and maybe also routing the form elsewhere for other processing, is a bit tricky. We’re not natively programmers.

Wufoo. Wufoo to you too!

A while ago, on a whim, I opened a basic account with Wufoo, a, frankly, awesome form creation service. I wanted to get a quick online client survey and had it done in minutes.

After drawing up the little wishlist from the start of this post, I’ve been having a look at Wufoo again and I must say, I’m even more impressed than I was before:

• The output form code has improved massively, and is now clean, lean, semantically correct and highly attractive to the opposite sex.
• They’ve brought several new features to the table, and look to be listening keenly to users. For instance, from next week, if a form takes a file upload, the client will be sent a link to download the file as part of the email response.
• You can now embed a form’s statistics report into a standalone page on your own site, giving the client a full reporting system for their forms. Madness, truly.
• The visual ‘effects’ are ace. Nothing fancy, just highly usable. I do love the way it’s done on the Definition online survey form. It only requires each field to be wrapped as a list item (fairly semantic still) and, even better, IE6 can’t handle it. Whupppa!! Only joking.
• Server-side processing is done for you, and validation and error reporting are both spot on.
• The speed of form-creation is amazing. I’ve started to use the interface to quickly hack together fast-and-dirty prototype forms, far faster than ever possible with copy-and-paste (with no amount of fancy Command-C keyboard shortcut wizardry)
• Form hints are handled beautifully, and easily added to any form field.
• You can style the form however you please, either via a handy theme template editor, or with your own CSS file, which I prefer.
• Although until recently you had to generally use an iframe to call in your working form to a page on your own site (which doesn’t validate under our chosen HTML 4.01 Strict DOCTYPE), they’ve released an API which allows you to do whatever you want with your form, AND still have them do most of the processing for you. Sweet.

I’m seriously thinking of using Wufoo for most forms I create from now on. At the very least, you can create or prototype a quick form ultra-fast, which saves copying and pasting input fields, etc. Just slap the form code onto your page. At best, it allows you to create highly functional forms that do all sorts of complicated stuff that often adds up to become a time-consuming, royal pain in the arse. Hey, I’ll give it a go!

Back to home page »