Nice Forms

Make your forms look, well nice! This is an easy one, simply include the javascript into your xhtml form and voila! Your forms look neat! Niceforms is fully compatible with most modern browsers: IE7+, Firefox2+, Safari3+, Opera9+, Chrome0.3+, Mozilla1.5+, Camino1.6+, but NOT IE6. Which, we don’t care about anyway. In IE6 Niceforms will simply not load, reverting back to the original CSS-styled form. Another nice thing is that it doesn’t make use of any existing javascript libraries out there, such as jQuery or Prototype.

Nice Forms used on R4d.US

Nice Forms used on R4d.US

Check it out live on http://r4d.us I recently used Nice forms on my URL shortener, and now Image Host, http://R4D.us It’s slowly coming together nicely, and I think it added a nice touch, don’t you?

You can grab nice forms from here.

Niceforms is magically applied to any form that has the “niceform” class. 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 to remember is that this script requires a correctly coded form, including properly declared labels and values. There’s not much room for error and, if anything, it will force you to code your forms correctly.

Get your Includes on:

Correctly coded forms look like this:

<form method="post" action="" >
	<fieldset>
 		<dl>
 			<dt><label for="url">URL:</label></dt>
			<dd><input type="text" name="url" value="http://" size="48" tabindex="1" ></dd>
  		</dl>
  		<dl>
  			<dt><label for="keyword">Optional custom keyword:</label></dt>
  			<dd><input type="text" name="keyword" size="20" tabindex="2" ></dd>
  		</dl>
  		<input type="submit" value="Shorten" tabindex="3" >
  	</fieldset>
</form>

And if you want to change some folder locations, find line #10 in niceforms.js and adjust accordingly.
This is also where you would make adjustments when making your own theme…

/*#############################################################
Name: Niceforms
Version: 2.0
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/projects/niceforms/

Feel free to use and modify but please keep this copyright intact.
#################################################################*/

//Theme Variables - edit these to match your theme
var imagesPath = "img/";
var selectRightWidthSimple = 19;
var selectRightWidthScroll = 2;
var selectMaxHeight = 200;
var textareaTopPadding = 10;
var textareaSidePadding = 10;

We will be happy to hear your thoughts

Leave a reply

Skip to toolbar