NiceJForms by Lucian Lature

About NiceJForms

NiceJForms represents a solution to get form elements with beautiful shapes using custom design, which utilizes the lightweight JavaScript library jQuery, and is nothing more than a translation of Niceforms into jQuery library.
NicejForms is in fact a jQuery plugin to make forms look better. You can check the demo or download it. This is not a final release, I know that the code can be refactored or improved in many ways, but at least it's stable and ready to be used.
So, big thanks and respect goes to Lucian Slatineanu for releasing NiceForms. You can get extra information about NiceForms from his blog.
Tested only on IE 6, IE 7 and Firefox 2.0.

How to use NiceJForms

To use NiceJForms you need to:

Obtain a copy of jQuery.

Copy jquery.js and nicejforms.js to your website directory and link to them inside your HTML page. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Page title</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nicejforms.js"></script>
</head>
<body>
				...

Add the css file needed for that theme.

<style type="text/css" media="screen">@import url("niceforms.css")</style>

Add class "niceform" to the form you wish to be customized. For example:
```
<form action="vars.php" method="POST" class="niceform">
```

Finally, call the javascript, at the bottom of the page:

<script type="text/javascript">

$(document).ready( function() { $.NiceJForms.build(); } );

</script>

Extra information: you can use NiceJForms as a standalone plugin for Interface
for that you will need to add interface.js file into you code, and also use "nicejforms-interface.js" instead of "nicejforms.js":
```
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="nicejforms-interface.js"></script>
</head>
<body>
...
```

The options

They're identified by keywords and they can be specified in any order and number. Let's see them:

keyword	meaning
(integer) selectRightSideWidth	width of the image to be add at the left of the custom select
(integer) selectLeftSideWidth	width of the image to be added at the right of the custom select
(integer) selectAreaHeight	height of the custom select area
(integer) selectAreaOptionsOverlap	dimension of the overlap between custom select's options
(string) imagesPath	folder where custom images are stored

Example of options usage:

<script type="text/javascript">
$(document).ready(function(){
$.NiceJForms.build({
		imagesPath:"images/redtheme/"
	})
});
</script>

Themes

I've released NiceJForms with two extra css styles, red and green, but I'm pretty sure that new themes will appear in short time.

Download it!

View the demo
Download NiceJForms as .zip
Download NiceJForms as an jQuery Interface standalone plugin in .zip format. For that you will also need to add interface.js in your code.

Changelog

22th February 2007 - fix so that when they are no radio buttons, the checkboxes get corectly rendered with NiceJForms.
13th February 2007 - fix so that when they are more than one form on page, only those with "niceform" class get rendered with NiceJForms.
8th February 2007 - fix so that when the images are disabled, the script degrades gracefully.

About the author

Hi! My name is Lucian Lature, I'm a web developer, and sometimes designer, trully passionate about my work. I'm not owning yet a blog or a website, maybe in the few weeks I'll solve this little "problem".
If you like this plugin and you wish to be "translated" also into Prototype javascript library, drop me an email at lucian.lature@gmail.com and then I'll write a version for Prototype in short time.

NiceJForms