CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/","20100918013746","https://web.archive.org/","web","/_static/", "1284773866"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like ..."/> <meta name="keywords" content="bit,browser,color,css,custom,default,Default Theme,dfc,drop,Elements,example,file,form,Job,jqTransform,jquery,List,Little Bit,Luckily,Mouse Click,Scripts,Style,"/> <title>8 jQuery Plugins to Improve the Way your Forms Look | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20100918013746cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.6" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 8 jQuery Plugins to Improve the Way your Forms Look Comments Feed" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100918013746js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Quick Function to Shorten the Post Title in WordPress" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/quick-function-shorten-post-title-wordpress/"/> <link rel="next" title="A Slightly New Design for Themes by bavotasan.com" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/articles/slightly-new-design-for-themes-by-bavotasan-com/"/> <link rel="canonical" href="https://web.archive.org/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/"/> <link rel="shortlink" href="https://web.archive.org/web/20100918013746/http://bit.ly/a2MLlX"/> <script type="text/javascript" src="https://web.archive.org/web/20100918013746js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="8 jQuery Plugins to Improve the Way your Forms Look"/> <meta property="og:description" content="When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like radio buttons and checkboxes are determined by the browser. Luckily, there are some cool jQuery plugins available that help you add a little bit more style to your forms. Here [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/niceform-sml.jpg"/> </head> <body class="single single-post postid-1887"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20100918013746/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100918013746/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100918013746/http://support.bavotasan.com/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100918013746/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20100918013746/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266" class="current-menu-item"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Apr</div><div class="day">13</div><div class="year">2010</div></div> <h1>8 jQuery Plugins to Improve the Way your Forms Look</h1> <br class="clear"/> <p>When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like radio buttons and checkboxes are determined by the browser. Luckily, there are some cool jQuery plugins available that help you add a little bit more style to your forms.<br/> <span id="more-1887"></span><br/> Here are a list of jQuery plugins that can help get your forms looking a bit more impressive:</p> <div class="lists"> <div class="sections"> <h2>jqTransform</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/jqtransform.jpg" alt="" title="jqtransform" width="560" height="163" class="alignleft size-full wp-image-1888"/><br/> jqTransform allows you to skin form elements with color changes on both mouse rollover and mouse click event.<br/> <a href="https://web.archive.org/web/20100918013746/http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/jqtransform_example.jpg" alt="" title="jqtransform_example" width="520" height="580" class="aligncenter size-full wp-image-1889"/> </div> <div class="sections"> <h2>Niceforms</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/niceform.jpg" alt="" title="niceform" width="560" height="163" class="alignleft size-full wp-image-1895"/><br/> 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 even develop your own look with minimal effort.<br/> <a href="https://web.archive.org/web/20100918013746/http://www.emblematiq.com/lab/niceforms/">http://www.emblematiq.com/lab/niceforms/</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/niceforms_examples.jpg" alt="" title="niceforms_examples" width="560" height="651" class="alignleft size-full wp-image-1896"/> </div> <div class="sections"> <h2>Uniform</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/uniform.jpg" alt="" title="uniform" width="560" height="163" class="alignleft size-full wp-image-1919"/><br/> Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.<br/> <a href="https://web.archive.org/web/20100918013746/http://pixelmatrixdesign.com/uniform/">http://pixelmatrixdesign.com/uniform/</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/uniform_example.jpg" alt="" title="uniform_example" width="453" height="179" class="alignleft size-full wp-image-1920"/> </div> <div class="sections"> <h2>jNice</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/jnice.jpg" alt="" title="jnice" width="560" height="163" class="alignleft size-full wp-image-1900"/><br/> jNice helps you create custom looking form elements that function like normal form elements using jQuery and CSS.<br/> <a href="https://web.archive.org/web/20100918013746/http://plugins.jquery.com/project/jNice">http://plugins.jquery.com/project/jNice</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/jnice_example.jpg" alt="" title="jnice_example" width="392" height="270" class="alignleft size-full wp-image-1901"/> </div> <div class="sections"> <h2>jQuery FormOne</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/formone.jpg" alt="" title="formone" width="560" height="163" class="alignleft size-full wp-image-1934"/><br/> jQuery FormOne (aka JQF1) claims to be the most complete form styling plugin and it does seem to cover all the bases.<br/> <a href="https://web.archive.org/web/20100918013746/http://www.azurem.com/jqf1/">http://www.azurem.com/jqf1/</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/formone_example.jpg" alt="" title="formone_example" width="560" height="978" class="alignleft size-full wp-image-1936"/> </div> <div class="sections"> <h2>CRIR</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/crir.jpg" alt="" title="crir" width="560" height="163" class="alignleft size-full wp-image-1908"/><br/> CRIR styles only radio buttons and checkboxes. It does a cool job of it but you will still need to use CSS to style other elements of your form.<br/> <a href="https://web.archive.org/web/20100918013746/http://www.chriserwin.com/scripts/crir/index.php">http://www.chriserwin.com/scripts/crir/index.php</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/crir_example.jpg" alt="" title="crir_example" width="404" height="363" class="alignleft size-full wp-image-1905"/> </div> <div class="sections"> <h2>jQuery Checkbox</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/checkbox.jpg" alt="" title="checkbox" width="560" height="163" class="alignleft size-full wp-image-1911"/><br/> jQuery Checkbox was designed to replace the default checkboxes with super awesome switches. It also works with radio buttons.<br/> <a href="https://web.archive.org/web/20100918013746/http://widowmaker.kiev.ua/checkbox/">http://widowmaker.kiev.ua/checkbox/</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/checkbox_example.jpg" alt="" title="checkbox_example" width="349" height="98" class="alignleft size-full wp-image-1912"/> </div> <div class="sections"> <h2>File Style</h2> <p><img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/filestyle.jpg" alt="" title="filestyle" width="560" height="163" class="alignleft size-full wp-image-1938"/><br/> File Style allows you to choose an image to replace the default browse button when using a file input field.<br/> <a href="https://web.archive.org/web/20100918013746/http://www.appelsiini.net/projects/filestyle">http://www.appelsiini.net/projects/filestyle</a></p> <p><strong>Example</strong>:<br/> <img src="https://web.archive.org/web/20100918013746im_/http://bavotasan.com/wp-content/uploads/2010/04/filestyle_example.jpg" alt="" title="filestyle_example" width="560" height="138" class="alignleft size-full wp-image-1939"/> </div> </div> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20100918013746/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Fa2MLlX&counturl=http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20100918013746js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20100918013746/http://www.facebook.com/sharer.php?u=http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/&t=8 jQuery Plugins to Improve the Way your Forms Look" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20100918013746/http://digg.com/submit?phase=2&url=http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/&title=8 jQuery Plugins to Improve the Way your Forms Look&bodytext=When it comes to forms, every browser displays inputs, select drop downs and buttons differently. You can style certain elements using CSS but things like radio buttons and checkboxes are determined by the browser. Luckily, there are some cool jQuery plugins available that help you add a little bit more style to your forms. Here [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20100918013746/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20100918013746/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/')+'&title='+encodeURIComponent('8 jQuery Plugins to Improve the Way your Forms Look'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20100918013746/http://www.stumbleupon.com/submit?url=http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/&title=8 jQuery Plugins to Improve the Way your Forms Look" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20100918013746if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Farticles%2F8-jquery-plugins-improve-forms-look%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/bit/" rel="tag">bit</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/browser/" rel="tag">browser</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/color/" rel="tag">color</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/css/" rel="tag">css</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/custom/" rel="tag">custom</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/default/" rel="tag">default</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/default-theme/" rel="tag">Default Theme</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/dfc/" rel="tag">dfc</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/drop/" rel="tag">drop</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/elements/" rel="tag">Elements</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/example/" rel="tag">example</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/file/" rel="tag">file</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/form/" rel="tag">form</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/job/" rel="tag">Job</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/jqtransform/" rel="tag">jqTransform</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/list/" rel="tag">List</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/little-bit/" rel="tag">Little Bit</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/luckily/" rel="tag">Luckily</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/mouse-click/" rel="tag">Mouse Click</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/scripts/" rel="tag">Scripts</a>, <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tag/style/" rel="tag">Style</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20100918013746/http://bit.ly/a2MLlX" title="8 jQuery Plugins to Improve the Way your Forms Look">http://bit.ly/a2MLlX</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/text-rotation-css3/" rel="bookmark" title="Permanent Link to Text Rotation with CSS3">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/" rel="bookmark" title="Permanent Link to Optimization Tips to Speed Up Your Site">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/" rel="bookmark" title="Permanent Link to A Simple CSS Trick to Vertically Align Text">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/using-ajax-with-wordpress/" rel="bookmark" title="Permanent Link to Using Ajax with WordPress">Using Ajax with WordPress</a></li> </ul> </div> <a href="https://web.archive.org/web/20100918013746/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20100918013746im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20100918013746im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 4 Comments</small> </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-8783"> <div id="comment-8783"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918013746im_/http://1.gravatar.com/avatar/3e8e51493df90229712ca629b524b76c?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918013746/http://www.webmasterpligg.com/" rel="external " class="url">paul</a></span> <span class="commentdate"> on April 15, 2010 at 10:01 am</span> </div> <div class="comment-text"> <p>jQuery Plugins very nice plugin and very nice article.<br/> Thank you.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/?replytocom=8783#respond" onclick="return addComment.moveForm("comment-8783", "8783", "respond", "1887")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-9184"> <div id="comment-9184"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918013746im_/http://0.gravatar.com/avatar/6397517d1b934ba940c457073a06e15f?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918013746/http://www.candelainteriors.com/" rel="external " class="url">Mark Wilson</a></span> <span class="commentdate"> on May 2, 2010 at 8:35 am</span> </div> <div class="comment-text"> <p>Very useful article, well written. Great review! I will checkout some of these plugins you suggest.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/?replytocom=9184#respond" onclick="return addComment.moveForm("comment-9184", "9184", "respond", "1887")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-9536"> <div id="comment-9536"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918013746im_/http://0.gravatar.com/avatar/65a0b6ac212e038d70e7b3f43031e87a?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918013746/http://www.crazytimescandles.com/" rel="external " class="url">Candleshoe</a></span> <span class="commentdate"> on May 21, 2010 at 10:39 pm</span> </div> <div class="comment-text"> <p>I so enjoyed every bit of this site and I’ve bookmarked your blog to check out the new topics you will post in the future.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/?replytocom=9536#respond" onclick="return addComment.moveForm("comment-9536", "9536", "respond", "1887")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-12435"> <div id="comment-12435"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918013746im_/http://1.gravatar.com/avatar/9c0ba3103cf270f2576ef7df87a6066f?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918013746/http://wanarif.com/" rel="external " class="url">Wanarif</a></span> <span class="commentdate"> on July 8, 2010 at 3:36 am</span> </div> <div class="comment-text"> <p>Very useful article, One of your article i already tested, and its so amazing… thank provide this topics</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/?replytocom=12435#respond" onclick="return addComment.moveForm("comment-12435", "12435", "respond", "1887")">Reply</a> </div> </div> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100918013746/http://bavotasan.com/articles/8-jquery-plugins-improve-forms-look/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20100918013746/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="1887" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20100918013746/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/gradient-buttons-with-css3/" title="Gradient Buttons with CSS3">Gradient Buttons with CSS3</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20100918013746/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100918013746/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20100918013746/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100918013746/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100918013746/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100918013746/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100918013746/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/developing-themes-for-wordpress-the-loop/">Developing Themes for WordPress: Part 3</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/developing-themes-for-wordpress-template-file/">Developing Themes for WordPress: Part 2</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/developing-themes-for-wordpress-part-1/">Developing Themes for WordPress: Part 1</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/">Create bit.ly Short URLs for your Posts in WordPress</a></li> <li><a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/tutorials/optimizing-your-mysql-database/">Optimizing your MySQL Database</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100918013746/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100918013746/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20100918013746js_/http://stats.wordpress.com/e-201037.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'1887'}); var load_cmc = function(){linktracker_init(5317602,1887,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20100918013746js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20100918013746/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>