Niceforms 1.0 - Make forms with design…
More than a year after the initial preview of this script, I am finally able to present its final version. Many of the bugs initially reported were solved and more scalability features have been added.
What is it?
Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can develop your own look. You can read more about Niceforms in my initial article or take a look at an example to see it in action.
Features
Niceforms works just like your regular web form while adding a few usability improvements as well. One of these improvements would be the possibility of selecting a radio or check box by clicking its adjacent label, which is not possible on Safari browsers, for some weird reason. Niceforms also highlights the labels of the selected boxes to make the selections even clearer.
The form fields and the buttons created via Niceforms are fully scalable. You can specify their width (and height for textareas) through regular HTML properties such as size, cols and rows. For the select field, you can specify its width by simply adding a CSS class. Buttons will automatically expand to accommodate the amount of text present.
Keyboard-only navigation works although it hasn’t been tested thoroughly on Macs yet. Opera has a slight problem with this and keyboard navigation won’t work on the select fields.
Compatibility
The script is fully compatible with most major browsers, including Firefox, IE6+, Safari and Opera. Since Safari insists on styling input fields and buttons the Mac-way no matter what, Niceforms isn’t applied on these elements for this browser, leaving the default styling in place.
Themes
You can basically customize the look of your forms any way you want by creating your own themes. Since Niceforms replaces the form elements with images, it’s just a matter of slicing these images up correctly and creating the CSS that holds them all together. More themes are on the way and you’re more than welcome to contribute as well. A short guide on how to properly create themes is in progress and should be available soon.
Using Niceforms
Niceforms is applied to all forms that have the class “niceform”. You can have other classes in there as well but one of them has to be “niceform” in order for the script to work. One of the important aspects of the script is that it requires a correctly coded form, including properly declared labels and values. There’s not much room for error and, if nothing else, it will force you to code your forms correctly.
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.
If you’ve just set up Niceforms on your server and are using IE6, you’ll notice an ugly flicker, especially on the textareas, as you move in and out of them. This can be fixed by adding a couple of lines to your Apache .htaccess file. A sample file is provided with the script but for more information on the subject you should check Dean Edward’s solution.
Acknowledgements
A lot of work has been put into creating the Niceforms script and all this would not have been possible without the support of certain people. A huge thanks goes out to Peter-Paul Koch and his awesome javascript resources. I’ve taken quite a few examples from his coding in creating Niceforms.
Another big thanks goes to all those that helped me test the script and provided excellent feedback on the initial preview. There are too many to mention them all here but needless to say, I probably couldn’t have done it without them.
The future
Past progress on the script has been tremendously slow. Hopefully things will pick up in the future. There’s still so much that can be done with this technology that I feel I’ve only began to scratch the surface. Support for multiple rows select fields and file input fields is planned for the next release. Full keyboard support for the select fields is also something I’m looking into. Many other usability improvements can be addressed as well.
into this:
Download it
Okay, I think I’ve said enough. Now it’s your turn and I would love to hear your comments, opinions and testing results on this.
