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
47 Responses to “Wufoo Style jQuery form Tutorial with focus / active state”
Leave a Reply
I am a web developer based in Austin, TX. FUCK YA! 
Social comments and analytics for this post…
This post was mentioned on Twitter by jquerybuzz: jQuery Wufoo Form Style with HTML and CSS Tutorial | Wes Ray http://bit.ly/aVBoSZ…
[...] jQuery Wufoo Form Style with HTML and CSS Tutorial [...]
Very cool, I really enjoyed it. Do you know of somewhere I can read more about it?
casino en ligne…
[...] spinpalace. [...]…
[...] [...]
[...] [...]
Demonstrate the spirit of free style…
My site is about the freestyle culture website, welcome to interested friends to visit!…
Demonstrate the spirit of free style…
My site is about the freestyle culture website, welcome to interested friends to visit!…
New Car Financing rates…
New Car Financing,car financing rates.A blog about car finance rates and auto loan financing,show your the most useful infomation about new car financing….
Demonstrate the spirit of free style…
My site is about the freestyle culture website, welcome to interested friends to visit!…
Priori Beauty Review – MLM is a good chance priori Beauty Shop? You can achieve success priori? …
……
Weight Loss Diet…
Fast Easy Health Weight Loss and good Ideas for Diet….
Demonstrate the spirit of free style…
My site is about the freestyle culture website, welcome to interested friends to visit!…
Radio frequency welding of plastics | Best and Free tips on the ……
RF welding is a technology enabling and the basic equipment necessary to affect these joints changed since the inception of this process. Today, as in 1942, ……
Rokkutoyotaabenshisu of built-in GPS DVD TV, FM radio receiver AM ……
Qualir Recommendation: Key Features: Go to this document Go 301 Go 301. Detailed specification Built-in GPS DVD player Fencing Bluetooth TV ……
mesothelioma symptoms…
I saw this really great post today……
Health Weight Loss Diet…
My blog about Fast Easy Health Weight Loss and good Ideas for Diet….
PillSpot.org. Canadian Health&Care.No prescription online pharmacy.Special Internet Prices.Pillspot.org. Vitamins@buy.online” rel=”nofollow”>.…
Categories: Antibiotics.Pain Relief.Anti-allergic/Asthma.Stomach.Eye Care.Antidepressants.Stop SmokingVitamins/Herbal Supplements.Womens Health.Mens Health.Antiviral.Mental HealthWeight Loss.Antidiabetic.Anxiety/Sleep Aid.Skin Care.Blood Pressure/…
five diets for losing weight…
permanent fat loss…
beyonce diet healthy…
the loss of weight the most important strategy…
how to start a raw food diet…
total lost 86 pounds and i feel like hell…
SECRETS OF YOGA…
SECRETS OF Yoga Awakening Meditation Collection 21-day Trial Now!!!…
Proactol For Easy Weight Loss…
Proactol like a healthy way of making it easier to take charge of your easy weight loss and eating habits. …
starcraft 2 cd key|video|demo…
Newest starcraft 2 cd key for free,fresh starcraft 2 demo and video to view….
beating the freshman fifteen…
are you considering a tummy tuck…
kindle case|accessories|leather cover…
Great kindle case, kindle leather cover,kindle accessories for your choices….
starcraft 2 cd key|video|demo…
Newest starcraft 2 cd key for free,fresh starcraft 2 demo and video to view….
2009 top 10 diet review…
10 simple ways to increase fiber in your diet…
Free and Fast Easy Health Weight Loss Diet Ideas…
How To Fast Easy Health Weight Loss and good Ideas for Diet,Let’s Go Start Losing Weight Now!…
Live TV Online – Watch TV Online – Watch Live TV Online…
Watch Live TV Online For Free, Discover how you can instantly watch satellite TV on PC without expensive monthly subscriptions….
How to lose weight fast in a week – best healthy weight loss tips…
Can’t lose weight? Learn how to lose weight fast in a week in the best easy quick ways with healthy weight loss tips and diets…
nonstick cookware…
desired to hop in and say I am diggin what you are sayin’! You have built some valid things and though I will not like every little thing you have mentioned I believe you create a very good argument. Retain up the fine perform ‘cus I’ll be checkin’…
…
You guys have a great website proceeding here, KIU!…
Why Some Rapid Weight Loss Diets Are Ok When You Need to Get in Shape Fast…
[……]I am reading your blog post,I want to link it[……]…
Purchase mp3 music online…
Have you ever considered adding more videos to your blog posts to keep the readers more entertained? I mean I just read through the entire article of yours and it was quite good but since I’m more of a visual learner,I found that to be more helpful. Ju…
…
I wants to thank you for your endeavors you could have produced in publishing this posting. I’m trusting the same finest function from you in the future as well. In fact your fanciful writing abilities has inspired me to begin my own weblog now. Hones…
10 http://04FORDPARTS.US/tag/DVD-RW 10 : 10…
00a rw NEC/…
Dragons And The Blade Of Light Shadow DS/ http://copious-systems.com/tag/Emblem : Dragons And The Blade Of Light Shadow DS/…
Dragons And The Blade Of Light Shadow DS/…
light http://wplasticmrb.AUTOTECHGUIDE.INFO/tag/third light battery/ : third…
light…
professional http://tamandatlze3g.ABABYCLOTHES.INFO/tag/best+chef+professional+knife/ : professional…
best…
review http://gharmonibh4d.AUTOPARTSTHAI.INFO/tag/review+kardon+play/ : play…
kardon…
Rolling http://sglasslessiyeizu.AUTOPARTSTHAI.INFO/tag/Rolling+dance+Glassless/ : Rolling…
Rolling…
Wood http://utvgary41.AUTOPARTSVILLE.INFO/tag/Wood+Speaker+tv/ : tv…
Speaker…
complete blood count test results…
Evaluation of complete blood count results from a new, on-site hemocytometer compared with a laboratory-based hemocytometer. Everyone should understand the complete blood count test (CBC) results….
Purchase mp3 music online…
Very creative,I like it….
Purchase mp3 music online…
There are some really great ideas here. Can’t wait to put some of these into action. Its really going to bring good vibrations where the vibrations should be…
…
How’s it heading? I loved reading through this write-up. My husband and I have been researching for this type of content with the longest time and We realize that your facts for the problem at hand is spot on. I will be certain to introduce this post t…