Wufoo Style jQuery form Tutorial with focus / active state

So you like how Wufoo looks do you? Well you can make your form look just like their’s. I have a DEMO you can check out to test the functionality of what the hell I’m talking about in this tutorial. But I would much rather show you in code than ramble about something that doesn’t need much explaining. SO, here is the breakdown of this tutorial on how to focus a form field state with jQuery . GO!

jQuery

This is the jQuery, which is a javascript framework that makes coding this crap SO much easier. and it must be included on the page for this to work. You can view the source of the DEMO and get an idea about exactly what is going on. Its commented for your understanding.

	//Wesified.
		$(document).ready(function() {
	//On input focus (tabbed or clicked)..it will..
			$("input,textarea,select").focus(function () {
	//grab the parent nested LI of that input and add the bg color
		        	$(this).parents('li').css('background-color','#FFFFDD');
				}).blur(function() {
	//Then get rid of it
			$(this).parents('li').css('background-color','#FFFFFF');
	});
});

HTML

So this is the structure of the form. nuff’ said

<form id="contact_form" class="contact_form">
  <div>
    <ul>
      <li> <span class="left_half">
        <label for="first_name">First Name <span class="required"> *</span></label>
        <input class="required" type='text' name='first_name' value=''>
        </span> <span class="right_half">
        <label for="last_name">Last Name <span class="required"> *</span></label>
        <input class="required" type='text' name='last_name' value=''>
        </span> </li>
      <li> <span class="left_half">
        <label for="other_stuff">Other Stuff<span class="required"> *</span></label>
        <input class="required" type='text' name='other_stuff' value=''>
        </span> <span class="right_half">
        <label for="expand_more">Expand More <span class="required"> *</span></label>
        <input class="required" type='text' name='expand_mores' value=''>
        </span> </li>
      <li> <span class="full">
        <label for="company">Company <span class="required"> *</span></label>
        <input class="required" type='text' name='company' value=''>
        </span> </li>
      <li class="button">
        <button type="submit">Submit Form</button>
      </li>
    </ul>
  </div>
</form>

CSS

This is what makes it look badass.

form ul {
	list-style-type:none;
	width: 450px;
}
form li {
	clear:both;
	display:block;
	margin:0;
	padding:6px 9px 9px 9px;
	font-size: small;
	width:500px;
	overflow: hidden;
}
form li input, textarea {
	border-color:#7C7C7C #C3C3C3 #DDDDDD;
	border-style:solid;
	border-width:1px;
	color:#333333;
	margin:0;
	padding:2px 0;
	font-family:Tahoma, Arial, sans-serif;
	width:100%;
}
form li label {
	border:medium none;
	color:#222222;
	display:block;
	font-size:95%;
	font-weight:bold;
	line-height:150%;
	margin:0;
	padding:0 0 3px;
	font-family:Tahoma, Arial, sans-serif;
}
form li span label.sub {
	padding-bottom:0px;
	font-weight:normal;
}
form li label, form li span label {
	clear:both;
	color:#444444;
	display:block;
	font-size:85%;
	margin:0;
	padding-top:6px;
}
.left_half {
	float:left;
	width:250px;
}
.right_half {
	float:right;
	width:230px;
}
.full {
	width:460px;
}
li.left_half {
	clear:left !important;
	float:left;
}
form li:hover {
	background-color:#FFFFDD;
}
form li.section {
	border-top:1px dotted #CCCCCC;
}
form li.button:hover {
	background-color:#FFFFFF;
}
label.error, span.required {
	color:#DF0000;
}
h2.form_title {
	border-bottom:1px dotted #CCCCCC;
	width:460px;
	margin-bottom:10px;
}

All in all, this is a pretty easy concept and I hope it helps a few of you out there. If you have any questions just leave a comment and I’ll do my best to help you out.

Cheers,

Wes

2 Responses to “Wufoo Style jQuery form Tutorial with focus / active state”

1. car guide says:

   November 24, 2010 at 1:13 pm

   New Car Guide, Reviews & Pricing, Auto News for New Models…

   This is one technology that I would love to be able to use for myself. It’s definitely a cut above the rest and I can’t wait until my provider has it. Your insight was what I needed. Thanks…
2. 50 jQuery Form Plugins, Tutorials and Resources | webdesign14.com says:

   January 20, 2011 at 12:04 am

   [...] 21. Wufoo Style Jquery Form Focus Active State [...]