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:

  1. Obtain a copy of jQuery.
  2. 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>
    				...
  3. Add the css file needed for that theme.
    <style type="text/css" media="screen">@import url("niceforms.css")</style>
  4. Add class "niceform" to the form you wish to be customized. For example:
    <form action="vars.php" method="POST" class="niceform">
  5. Finally, call the javascript, at the bottom of the page:
    <script type="text/javascript">
    $(document).ready( function() { $.NiceJForms.build(); } );
    </script>
  6. 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:

keywordmeaning
(integer) selectRightSideWidthwidth of the image to be add at the left of the custom select
(integer) selectLeftSideWidthwidth of the image to be added at the right of the custom select
(integer) selectAreaHeightheight of the custom select area
(integer) selectAreaOptionsOverlapdimension of the overlap between custom select's options
(string) imagesPathfolder 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!

Changelog

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.