DesignLuv

Beginners guide to a beautiful jQuery Form Pt. 1/2

By Jon Bergan (@jonbergan) in Input/Output » Tutorials

Ahh, the Internet. It’s a massive jungle of web sites that are crammed tight with links, navigation bars, images, tables, animations and forms. In fact, if we have a good think about it, web forms are really one of the most important elements to a web page as they start a conversation between the site visitor and the site owner – which is the goal of most websites. If they’re so damn important, then why don’t we spend more time focusing on them and getting them right?

One way to do this is to make them extremely usable and attractive. Users like things that are self explanatory and if we can make them look pretty in the process, then we’re onto something. At least that’s what I think.

As I was designing DesignLuv, I knew I’d need to come up with a contact form that was extremely simple yet attractive. You should take a look at what I came up with. It’s pretty awesome! As this form was basic (as far as web forms go anyways), I thought I’d do a post on how I developed it to help new designers get a feel for creating beautiful web forms using the popular jQuery JavaScript library.

Just so you know what you’re getting yourself into, our goal in this tutorial is to do the following:

• Create a web form using standard markup
• Transform the standard form into something stylish using some basic CSS
• Add some descriptive text to each of the fields so our users know exactly what we want from them
• Using jQuery, apply some cool effects to the fields in the form so that when users click on the fields, some neat little animations occur on the text thats in those fields

Before you begin …

Before you get started, you should probably download the Beautiful jQuery Form – Part 1 working files pack. This will allow you to step through the development process with me as you read through this post thus ensuring that you have a sound understanding of how everything works. I’ll also be referencing the files in this archive throughout this post.

Please note that this is an article for beginners. As such, it is quite a lengthy post and does go into a fair bit of detail.

Let’s get into the thick of things!

Step 1 – Lets put together a basic form

I have included below some standard markup that will produce a fairly basic web form. No real tricky business here. You can find a copy of this markup in the file called form-without-text.htm in your working files pack.

This particular form will only have five fields: name, email address, website address, subject and message. These tend to be the most popular fields when it comes to developing a basic contact form, however you could easily add more if you wanted to.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<form method="post" action="/contact-us" class="contact-form">
	<fieldset class="contact-form">
		<legend>So, who are you?!</legend>
 
		<label for="contact_name">Lets start with your name. Introduce yourself!</label>
		<input type="text" name="contact_name" id="contact_name" value="" class="contact-form" />
 
		<label for="contact_email">Whats your email address? Don't worry, we won't spam you. Promise.</label>
		<input type="text" name="contact_email" id="contact_email" value="" class="contact-form" />
 
		<label for="contact_website">What about your website? Do you have one??</label>
		<input type="text" name="contact_website" id="contact_website" value="" class="contact-form" />
	</fieldset>
 
	<fieldset class="contact-form">
		<legend>Whats on your mind?</legend>
 
		<label for="contact_subject">What are you emailing us about? You have to have some idea!</label>
		<input type="text" name="contact_subject" id="contact_subject" value="" class="contact-form" />
 
		<label for="contact_message">Okay, you can start typing away here:</label>
		<textarea name="contact_message" id="contact_message" class="contact-form"></textarea>
	</fieldset>
 
	<p><input type="submit" name="contact_submit" id="contact_submit" value="Send message" class="contact-submit" /></p>
</form>

Once you’ve got this form together, you should end up with something that looks utterly repulsive. Something close to this:

Step 2 – It looks ugly. Lets style that sucker!

Now that we have a form, we need to give it some character and we can do that by applying some basic CSS. Below are the styles I have applied to my version of the form. You can view these in the styles.css file found in your working files pack.

1
2
3
4
5
6
7
8
9
10
11
12

fieldset.contact-form { display: block; border: 1px solid #d5dfe5; border-bottom: 2px solid #d5dfe5; margin-bottom: 39px; padding: 15px; }
fieldset.contact-form legend { font-size: 1.2em; color: #e5007f; margin: 0; padding: 0 10px 0 10px; font-weight: bold; text-transform: uppercase; }
fieldset.contact-form label { display: block; margin-top: 15px; }
 
input.contact-form, textarea.contact-form { padding: 6px; margin: 10px 1px 15px 1px; border: 1px solid #eaeaea; color: #aaa; width: 554px; }
textarea.contact-form { height: 100px; }
 
input.contact-form:hover, textarea.contact-form:hover { border: 1px solid #0093f0; }
input.contact-form:focus, textarea.contact-form:focus { border: 2px solid #e5007f; margin: 9px 0 14px 0; }
 
input.contact-submit { background: #b9005f; padding: 4px; margin-right: 10px; border: 1px solid #b9005f; color: #fff; text-transform: uppercase; font-weight: bold; }
input.contact-submit:hover { background: #000; }

Now, I know most of you understand CSS but for those of you that don’t or are new to it, I’ll step through each of the above lines so you have some understanding of what I’m doing here. Don’t worry, it’s all really easy to understand! Trust me! For the rest of you, skip this section and get into the good stuff!

Line 1: First of all, we want to focus on the FIELDSET element. This will act as the large border that appears around a group of fields or questions. In my CSS, I have created a border with a slightly thicker border at the bottom and some basic padding and margins. This is to ensure our questions are grouped together nicely and that there is adequate white space around the questions. There is nothing worse than a cramped form.

Line 2: We’re now styling the LEGEND element. The text shown in the LEGEND element appears at the top of the FIELDSET element. Think of it as title text for the FIELDSET element. We want this to stand out (as it is a title after all!) so I’ve defined a nice bright color for the text and I’ve also ensured that the text is in uppercase using the text-transform CSS property.

Line 3: The LABEL element is essentially the question we’ll be placing just above each form field. In this instance, I’ve kept it quite basic and have simply allowed for a bit of a margin.

Lines 5-9: Here we’re styling all of our form fields themselves. As we’re not using any SELECT elements, we can leave these out, however if you do want a dropdown box in your form, you’re going to have to add that to your CSS.

You’ll also notice that I’ve included two pseudo-classes to these form field elements – hover and focus. These allow us to style the form when the user’s mouse hovers over an element or when a user actually clicks on an element and is focused on it. Have a bit of a play with these styles and see what you come up with!

Lines 11 and 12: Finally we need to style the submit button. I want this button to stand out a bit as most of the form is fairly light in color. To make this jump out a bit more, I’ve used a darker background colour and a lighter foreground colour. I’ve also added some padding around the text to make the button appear a little larger.

Once you’ve added these styles, you should end up with a form that looks something similar to the image below:

See? I told you it’d be easy! It’s a breeze once you get your head around some of the basic principals. Just have a play around with these styles and see what damage you can do. Don’t worry if you break anything. You can always just grab the CSS from the working files pack and start from scratch.

Step 3 – The fields need some default text. Lets give ‘em some!

You should now have a pretty funky looking web form. It could look better though. So, let’s add some default text into each of those fields.

By adding some default text to these fields, we’re not automatically completing these fields for the user, rather we’re providing them with some descriptive text as to what they should place in that field.

For example, we could put something like “Type your message here” in the message box so they know exactly what they have to put in that field. This helps both parties as it allows us to specify what we want to get from them and it tells them what they should provide to us. Simple! So, let’s do it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<form method="post" action="/contact-us" class="contact-form">
	<fieldset class="contact-form">
		<legend>So, who are you?!</legend>
 
		<label for="contact_name">Lets start with your name. Introduce yourself!</label>
		<input type="text" name="contact_name" id="contact_name" value="Your name" class="contact-form" />
 
		<label for="contact_email">Whats your email address? Don't worry, we won't spam you. Promise.</label>
		<input type="text" name="contact_email" id="contact_email" value="Your email address" class="contact-form" />
 
		<label for="contact_website">What about your website? Do you have one??</label>
		<input type="text" name="contact_website" id="contact_website" value="Your website URL" class="contact-form" />
	</fieldset>
 
	<fieldset class="contact-form">
		<legend>Whats on your mind?</legend>
 
		<label for="contact_subject">What are you emailing us about? You have to have some idea!</label>
		<input type="text" name="contact_subject" id="contact_subject" value="Type your subject here" class="contact-form" />
 
		<label for="contact_message">Okay, you can start typing away here:</label>
		<textarea name="contact_message" id="contact_message" class="contact-form">Type your message here</textarea>
	</fieldset>
 
	<p><input type="submit" name="contact_submit" id="contact_submit" value="Send message" class="contact-submit" /></p>
</form>

You can see that the code is almost exactly the same as the first piece of code I showed you at the start of this post except we have added some descriptive text to each of the VALUE attributes on the INPUT and TEXTAREA elements. Go ahead and add these changes to your version and see the difference. You’ll quickly notice how adding such descriptive text makes the form that much more usable for the end user.

Take a look in your working files pack for a file named form-with-text.htm. This is the version of the form you see above.

Step 4 – Okay, lets make it even sexier with some jQuery effects!

Now this is where things are going to get wild! We’re going to start using jQuery to add some simple but elegant effects to the form. We don’t want to go crazy here, we just want to add a nice touch to our contact form so it’s a little unique.

Before we can apply these effects, we need to load the jQuery and the jQuery UI library. We require the jQuery UI library as we’re dealing with animations on form elements. Don’t worry too much about this for now though. Just make sure that the following two lines are placed in the HEAD element of your web page.

1
2

    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8rc3.custom.min.js"></script>

HTML form completed and styled? Check! jQuery libraries loaded? Check!

We’re now ready to make this form look fancy by applying some effects. You thought the stuff above was scary? Wait until you scroll down and see the next block of code you get to work with!

All of the effects and animations that are applied to this form can be found in the /scripts/form-effects.js file located in your working files pack, however before you jump in there, let’s step through this code one line at a time. It’s important that you understand how this stuff works otherwise you’ll never be able to harness the true power of jQuery – and there is a low of power in there! By the way, if you haven’t grabbed a coffee yet, now might be a good time to do so. Just a warning.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function fieldFocus()
{
	if ($(this).val() == 'Your name'
		|| $(this).val() == 'Your email address'
		|| $(this).val() == 'Your website URL'
		|| $(this).val() == 'Type your subject here'
		|| $(this).val() == 'Type your message here'
		)
	{
		$(this).animate({
		    color: '#ffffff'
		}, speed, function() { $(this).val(''); $(this).css('color', '#000000'); });
	}
 
	if ($(this).val() != 'Your name'
		|| $(this).val() != 'Your email address'
		|| $(this).val() != 'Your website URL'
		|| $(this).val() != 'Type your subject here'
		|| $(this).val() != 'Type your message here'
		)
	{
		$(this).animate({
		    color: '#000000'
		}, speed);
	}
}

Stop, collaborate and listen. This really isn’t as bad as it looks. In fact, it’s all quite straight forward if you sit back, read one line at a time and let it sink in. I’m going to step through this piece of code to try and explain what’s going on here. If you’re unsure about anything, post a comment. I’ll try and help you out as much as I can.

Overview: This is a piece of JavaScript code. Essentially JavaScript is a client-side scripting language that allows you to run code in a user’s web browser. For example, JavaScript could be used to validate a web-form, animate objects on the page, modify element attributes and much, much more.

JavaScript uses braces to surround the commands that are to be run as a block of code. You would use them around the content of a loop or to group statements within an IF statement. In the example above, I’ve used braces to group together the content found in the FUNCTION statement and the IF statements. As such, try and view all of the code found within the relevant sets of braces as a block of code relating to the statement it belongs to.

Line 1: First we have a function named fieldFocus. The code found within this function will run whenever the user clicks on a field in your new form. You’ll also notice a brace directly under the word FUNCTION. This basically says all of the code between this opening brace and the closing brace at the end of the code block belongs to this function.

Lines 3-8: This is an IF Statement. IF statements allow us to run a conditional check on elements found on our web page. For example, we could check to see if a certain form field contains specific text and if it does, run some code on that form field. And that is exactly what we’re going to do here.

Within this IF statement, we’re telling the web browser that if the value of the form element in question is equal to any of the text that appears within the quotes, then we want to run an animation on that field. You’ll notice that the text in the quotes is the same as the descriptive text we added in Step 3. So, in English this reads:

If the value in the form field the user just clicked on equals “Your name” or “Your email address” or “Your website URL” or “Type your subject here” or “Type your message here”, please run some code. Otherwise, do nothing.

Lines 10-12: Welcome to jQuery! This is jQuery’s animation method which will get called if the condition of the above mentioned IF statement is true. We’re telling jQuery to animate the form field that the user clicked on by fading the text colour from grey to white. Try changing the colour codes here and you’ll quickly see what I mean. You can find out more about the jQuery Animate method here.

Lines 15-25: This next block of code is very similar to the first IF statement except that it reads a little bit differently. You’ll notice that instead of there being two equal signs between each condition, we now have an exclamation mark and an equal sign. In English, this reads “does not equal”. So, you could say that this IF statement reads as follows:

If the value in the form field the user just clicked on does not equal “Your name” or “Your email address” or “Your website URL” or “Type your subject here” or “Type your message here”, please run some code. Otherwise, do nothing.

Explanation: The reason we need these two IF statements is simple. We need to run a different animation based on what text we find in the form field when the user clicks on it. If the user clicks on the form field and some default descriptive text is there, we want that text to disappear. That’s what the first IF statement is for. If the user clicks on the form field and they’ve already typed some other text there, we want that text to darken so they can focus on it.

I know it all sounds a bit too much at the moment but if you have a play around with it, you’ll pick it up in no time. The best approach is to try and rewrite this code from scratch or try and break the code and then fix it. By doing this, you’ll actually learn how these IF statements work and what changes you can make by modifying them and the animations found within them. Like I said though, if you have a question, please leave a comment.

Now that we’ve handled the fieldFocus function, we need to tackle the fieldBlur function. The fieldBlur function is called whenever a user clicks off a form field. We need a function such as this one so that we can change the state of a form field once the user has clicked off it depending on what text is in that field.

I won’t go into detail with this code as it is very similar to the fieldFocus function. Try and read through it and see if it all makes sense to you.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

function fieldBlur()
{
	if ($(this).val() == 'Your name'
		|| $(this).val() == 'Your email address'
		|| $(this).val() == 'Your website URL'
		|| $(this).val() == 'Type your subject here'
		|| $(this).val() == 'Type your message here')
	{
		$(this).stop();
		$(this).css('color', '#ffffff');
	}
 
	if ($(this).val() != '')
	{
		$(this).animate({
		    color: '#aaaaaa'
		}, speed);
	}
 
	if ($(this).val() == '')
	{
		$(this).stop();
		$(this).css('color', '#ffffff');
 
		if ($(this).attr('id') == 'contact_name') { $(this).val('Your name'); }
		if ($(this).attr('id') == 'contact_email') { $(this).val('Your email address'); }
		if ($(this).attr('id') == 'contact_website') { $(this).val('Your website URL'); }
		if ($(this).attr('id') == 'contact_subject') { $(this).val('Type your subject here'); }
		if ($(this).attr('id') == 'contact_message') { $(this).val('Type your message here'); }
 
		$(this).animate({
		    color: '#aaaaaa'
		}, speed);
	}
}

Phew! I’m glad we made it through that. You were starting to fall asleep on me for a minute there, weren’t you?! Don’t stress – it’s smooth sailing from here. Promise!

We now have an awesome looking fieldFocus function and an even better fieldBlur function. These guys are ready to rock, however before they can do so, we need to tell jQuery to use them whenever the user interacts with a form field element. To do this, we simply add the following code at the bottom of our form-effects.js file.

1
2
3
4
5

$(document).ready(function() 
{
	$('.contact-form').focus(fieldFocus);
	$('.contact-form').blur(fieldBlur);
});

Don’t forget to check out the /scripts/form-effects.js file in your working files pack to see how I’ve strung all this together.

Step 5 – Bringing it all together!

We’ve traveled what seemed like a thousand miles to get to where we are. Now its time to see the fruits of our labour!

The final step we have to do is tell the web browser to load our effects file when the page loads. We do this by adding the following line of code below the SCRIPT elements we added at the start of Step 4.

1

    <script type="text/javascript" src="scripts/form-effects.js"></script>

Jump across to form-complete.htm in your working files pack to see the finished product. Amazing huh? It looks fabulous, right?

In part two, I’ll show you how to add some fancy validation to your new web form using more jQuery animations and also how to have the form send you an email upon submission. It’s going to be a whole lot of fun. Part two of The Beginners Guide to a Beautiful jQuery Form will be posted on Tuesday the 16th March 2010, so keep your eyes peeled for that.

Remember, programming is all about producing elegant code and having fun while you’re at it. So, enjoy yourself, learn something new and embrace the technology around you. You might just find yourself a new hobby.

View Demo Download Source Code

WJDB8RJ7JXEC

By Jon Bergan

Jon is a passionate web designer, developer and blogger from Australia. Whilst online, he spends most of his time knee deep in PHP code or blogging about good design and business advice. He is also a movie lover, guitar fiend, tea drinker and serial entrepreneur.

You can find out more about Jon here or you can catch up with him online via Twitter or Facebook.

Show us some love and bookmark this post on your favourite social bookmarking sites!

Share

• 
• 
• 
• 
• 
• 
• 
• 
•