Before we get started, feel free to check out the finished example.

As you might have already guessed, this will require some JavaScript magic, or more specifically jQuery vodoo. I am trying my best not to go into a rant on the wonderfulness of jQuery right now (I am sure you already knew that anyway!), so let me just say that it gets the job done, and easily.

So, here goes! As I got started on this, the first thing I did was to have a look at how best to implement the shaking or vibrating effect on the login form. I suspected that it might be part of the jQuery effects library, and yes, there was a shake() function, but I also stumbled on a nice plugin by Andreas Lagerkvist, which did just about the same thing. I chose the plugin approach as it was the lightweight way to go.

The actual implementation is pretty straightforward. We have a plain form, wrapped in a DIV which we will label as login.

<div id="login">	
	<h3>Buzzing Login form</h3>
	<form action="" method="post">
		<label for="username">Username:</label>
 
		<label for="pwd">Password:</label>
 
	</form>			
</div>

We next include the jQuery related JavaScript files in the head of the document.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="vibrate.js"></script>

Using jQuery, we will then set-up an onclick event handler on the submit button . We will process the login form and take an appropriate action using this function.

$(document).ready(function() {
 
	$("#submit_butt").click( function() {
 
		// configurations for the buzzing effect. Be careful not to make it too annoying!
		var conf = {
				frequency: 5000,
				spread: 5,
				duration: 500
			};
 
		/* do your AJAX call and processing here...
			....
			....
		*/
 
		// this is the call we make when the AJAX callback function indicates a login failure 
		$("#login").vibrate(conf);
 
		// let's also display a notification
		if($("#errormsg").text() == "")
			$("#loginform").append('<p id="errormsg">Invalid username or password!</p>');
 
		// clear the fields to discourage brute forcing :)
 
		$("#username").val("");
		$("#pwd").val("");
 
	});
 
});

Define a set of configuration variables that define the nature of the buzzing effect. In case the login fails, just make a call to the vibrate() function using the configuration variables as parameter. A general word of caution – make sure you don’t have the buzzing effect in action for too long, as it might be irritating to the user if the form buzzes for a long time! I found a duration of 500ms comfortable. In addition, we also display a warning message to the user, and then proceed to clear the input fields.

And it’s as simple as that! You have a nifty login form ready.

On a final note, I have made a minor modification to Andreas’ original plugin to suit our application. The changes are documented on the code.

Try it out, and let us know how it works. If you get this implemented somewhere, do post up a link in the comments!

Before we get started, you may like to view a demo of the end result.

How this form works?

When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.

Let’s start

We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see the HTML structure and CSS classes.

Note that, by default, both info and validation messages are hidden, which is set in tooltipContainer CSS class.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<fieldset class=“formContainer”>
    <h3>Join Now! It’s quick and easy.</h3>
    <div class=“rowContainer”>
        <label for=“txtFirstname”>Choose a username</label>
        <input id=“txtFirstname” type=“text” />
        <div class=“tooltipContainer info”>Minimum 4 characters, maximum 15 characters. This is your handle on Digg so don’t make it too personal.</div>
        <div class=“tooltipContainer error”>Rats! Username must be between 4 and 15 characters.</div>
    </div>
   // other rows here
</fieldset> 
 
body{
    font-family:Arial, Sans-Serif;
    font-size:83%;
}
.formContainer
{
    background-color: #F5EFC9;
    border:none;
    padding:30px;
}
.formContainer h3
{
    margin:0px;
    padding:0px 0px 10px 0px;
    font-size:135%;
}
.rowContainer
{
    width:100%;
    overflow:hidden;
    padding-bottom:5px;
    height:34px;
}
.rowContainer label
{
    width:140px;
    float:left;
    color: #758656;
    font-weight:bold;
}
.rowContainer input[type=“text”]
{
    width:200px;
}
.tooltipContainer
{
    height:16px;
    font-size:11px;
    color: #666666;
    display:none;
    float:none;
    background-repeat:no-repeat;
    background-position:left center;
    padding:0px 20px;
}
.info
{
    background-image:url(‘info.gif’);
}
.error
{
    background-image:url(‘error.gif’);
}

Now let’s add some interactivity

So far we have a static HTML structure and hidden messages waiting to be shown. We have to write a few lines of code to make them appear/disappear. Of course, this can be accomplished by pure JavaScript, but let’s involve jQuery. The reason for this is quite simple – less coding.

Like I mentioned at the beginning of this tutorial, an info tooltip should be shown each time an input field gets focus and hidden when it loses it. Turn this into jQuery code and you get this:

1
2
3
4
5
6
7

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

Simple, isn’t it? Now, let’s see how to handle validation messages. We are going to create fake validation just for the purpose of this tutorial. We’ll use jQuery again.

1
2
3
4
5
6
7
8
9
10

function validateForm()
{
    $(”.formContainer input[type=text]”).each(function(){
        var text = $(this).attr(“value”);
        if (text == “”)
        {
            $(this).parent().find(”.error”).css(“display”, “block”);
        }
    });
}

In essence, what the code above does is it shows a validation message for each field that the user hasn’t entered text in. Please keep in mind that this is not real validation, it just simulates what would happen if validation failed. You would have to implement your own logic, eg. check for mandatory fields, email address format and so on.

Ok, after pressing the sign-in button, validation messages will be shown. Signup form on Digg.com hides these messages and replaces them with info tooltips when the user starts to type. So we are missing a piece of code that will hide validation messages that were previously shown.

Let’s do it the dirty way. We’ll extend our jQuery code that controls the appearance of tooltips to hide corresponding validation messages each time an input field gets focus.

1
2
3
4
5
6
7
8

$(document).ready(function(){
    $(”.formContainer input[type=text]”).focus(function(){
        $(this).parent().find(”.error”).css(“display”, “none”);
        $(this).parent().find(”.info”).css(“display”, “block”);
    }).blur(function(){
        $(this).parent().find(”.info”).css(“display”, “none”);
    });
});

This way we have recreated the Digg.com signup form. You can check out live demo or download full source code.

Conclusion

You saw how to recreate the Digg.com signup form with simple CSS and just a few lines of jQuery code. However, there are a few pieces of advice I’d like to give you:

• Do not overwork the form – there is really no need for a tooltip that says “Enter your first and last name in the field that says First and Last name”. Instead, you can provide a message that shows a constraint, for example “Maximum 35 characters”.
• Use tooltip/validation color other that text color – try hitting the “Continue” button on Digg.com signup form before entering any text. The form becomes very hard to read and it’s difficult to distinguish where one field ends and the next begins.

1. Semantic Horizontal Form

This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)

2. Nice Forms

A great form, with graphical elements and colour to create a different and unique look. All done with CSS and semantic coding.

3. StylePhreak Simple CSS Form

A simple form with regular alignment and unique lines to break up the different sections. This works well as a great base to start your own custom form from.

4. Veerle’s Blue CSS Form

A simple blue form with rounded background corners, all styled in CSS and XHTML. The layout is pixel perfect, and the images can be customized to match your own requirements.

5. Who Says CSS Forms Can’t Be Pretty?

A unique form with soft background images to complement the fields. It highlights many form possibilities, including a pop-up calendar for choosing a date. A related tutorial also accompanies the example.

5. Man in Blue: Form Examples

Here I’ve made each fieldset extend the full width of the page. The main styling that’s going on is the positioning of the form elements within the fieldsets. Because each element is contained inside a label tag, you can just float labels left, give them a bit of margin, and they line up horizontally (moving to the next line if there’s not enough width).

6. CSS Play – A Form with Style

Forms are not very friendly when it comes to CSS and each browser has its own way of handling them. Styles that work in one browser will not work in another, so depending on which browser you are using you will see a slightly different interpretation.

7. The Form Garden

This is a generic web form containing all the different fields and layouts available in FormAssembly.com. Use this form to make sure your theme works well with any type of web form.

8. Prettier Accessible Forms

The most important part of a form is the HTML we use to build it. Fortunately, HTML gives us a nice assortment of tags to build our forms in an accessible way. These are fieldset, legend, and label.

9. HTML Form Effects with CSS

For this tutorial you should already be familiar with HTML forms and the various elements and attributes. You should also have a basic understanding of Cascading Stylesheets (CSS)

10. A 2 Column CSS Form Layout

Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

How to turn the feature on

Using the following code for a form will cause the enhanced search field to display in Safari:

1
2
3
4
5

<form action="form.php" method="post">
<input type="search" name="search"
autosave="mysite-autosave" results="10" /> 
<input type="submit" value="Search" />
</form>

The type="search" tells safari to use the field as a search box, and the autosave="mysite-autosave" results="10" sets additional features about the recent search information.

The downsides

The negative aspect of adding this feature is that your code won’t validate. It’s up to you to decide whether it is a acceptable down-side of improving the browsing experience for those using Safari. We think it is – and you’ll see the enhanced search field on Design Shack!

Simple Contact Form

Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

1
2
3
4
5
6

<form action="submit.php" method="get">
   Name: <input type="text" name="name" /><br />
   Email Address: <input type="text" name="email" /><br />
   Message: <textarea name="message"></textarea><br />
   <input type="submit" value="Send Form" />
</form>

This will result in a form which looks similar to the following:

So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:

1
2
3
4
5
6
7
8
9
10

<?php
$subject = "Website Message";
$message = "Someone sent you a message from your website:
Name: $name
Email: $email
Message: $message";
$youremail = "me@mywebsite.com";
mail($youremail,$subject,$message,"From: $email");
echo 'Thankyou for filling in a form!';
?>

All you need to do is change me@mywebsite.com to your actual email address. You’ll be receiving form submissions from your website in no time!

Other Form Options

HTML doesn’t just use text fields for collecting information. You also have the option to use checkboxes, radio buttons and drop down lists. Feel free to take and use the examples below:

Radio Buttons

These allow you to enforce that the visitor only makes one choice, unlike checkboxes which allow you to select multiple answers/settings. They look something like:

The code you use to create the above is:

1
2
3

<input name="favouritecolor" type="radio" value="red" /> Red
<input name="favouritecolor" type="radio" value="blue" /> Blue
<input name="favouritecolor" type="radio" value="yellow" /> Yellow

Checkboxes

Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:

The code you use to create the above is:

1
2
3

<input name="favouritecolor" type="checkbox" value="red" /> Red
<input name="favouritecolor" type="checkbox" value="blue" /> Blue
<input name="favouritecolor" type="checkbox" value="yellow" /> Yellow

Drop Down Boxes

Drop down boxes work in a similar way to radio buttons, allowing the user to select one option. However, they save a great deal of space if you are dealing with a long list – selecting your country for example:

The code you use to create the above is:

1
2
3
4
5
6
7

<select name="favouritecolor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
</select>