So I was wandering around the web today and I found a couple of cool little scripts that make the daunting process of making web based forms pretty a little less so.

Now, if you don’t want to develop forms at all (but still want something pretty), you can always use something like Wufoo, Icebrrg, or Jotform.

However, if you want to get your dev on, making a form can be quite a challenge, but nowadays it doesn’t have to be. These two libraries aren’t new, but they are new to me so I thought I would share.

Niceforms
First we have Niceforms from badboy designs. Niceforms was released in January of this year, and is about as simple as it gets really. Just download the files (which basically are a bunch of images, and some js), put them into your site, and installation is done.

To use it, simply give your form a class of “niceform” and *poof* it is pretty. Well…it looks like the default, which is pretty, but probably doesn’t fit with your site. Its a clever implementation, that does not require you to set the class of each form element, but it is heavily reliant on images. This allows the form to look shnazzy, but it makes customizing it a bit more difficult because you will have to change the actual images.

Also, the form has to be designed in a specific way (using label tags for instance), or it will not work. Finally, according to the badboy site:

One of the biggest issues with Niceforms is that the replaced elements are absolutely positioned. What that basically means is that they’re removed from the normal page flow and thus will not support their own width and height, which may lead to layout problems. The solution is to provide a stand-alone supporting layout structure that will keep everything in place. I know this may mean that in real life implementations you’ll end up adding a few divs here and there but at this time it’s the only viable solution.

Bottom Line
If you want a really good looking form that can look like just about anything, then this is a pretty cool little library. However, to get it to look “just right” is gonna take some work on your part. Badboy designs set the groundwork, but you will have to bring it home.

Uni-Form
If you don’t like dealing with images, there is Uni-Form. Uni-Form is designed by Dragan Babić (his site isn’t in English) and there is even a nice little community (that is in English) to support it. The newest version was released in April.

Uni-Form is completely CSS based which means that you can make the forms look as nice as a typesetting and fonts can make a form look without having to do all the work yourself.

To “install” it, just download the library and unzip it to your site. Easy-peezy.

Using Uni-Form is a matter of making each control the correct class just like you would for any CSS based design. Customizing it is basically changing the CSS classes.

Bottom Line
Uni-Form is something that just about any designer could do on their own. However, using the library takes a lot of the grunt work out of it. If you compare the Niceform demo to Uni-Form’s demo, there really isn’t a comparison…the images in Niceform just make the form look really great. However, a lot of times you just don’t need that level of shine, or you don’t have the time to make 100 images to make the Niceform fit your style. A form can be beautiful just by being well designed. If you need a good-looking, no nonsense form, then Uni-Form is a great choice.

DIY
Now, what if you don’t like either of these options or you want to really get in there and do it all yourself? That is always an option. Here are some links that will help you on your way.

A List Apart has a nice article that goes into detail on how to make forms look better with only CSS.

Sitepoint goes deep in their look into making CSS based forms.

And, of course, Smashing Magazine has the mother-load of links on how to build your forms.