How to create an awesome contact form

In this tutorial we are going to build a awesome contact form. Also we are going to display errors using well-known jQuery plugin to validate form fields.

We need to create necessery files: index.html, init.js and default.css. Next step is to download jQuery validate plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Include all files into head section in your index.html:

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/validate.min.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

As always we need to write HTML markup from scratch.

index.html

<form id="form" class="blocks" action="#" method="post">
	<p>
		<label>Name:</label>
		<input type="text" class="text" name="name" />
	</p>
	<p>
		<label>Company:</label>
		<input type="text" class="text" name="company" />
	</p>
	<p>
		<label>Your e-mail:</label>
		<input type="text" class="text" name="email" />
	</p>
	<p>
		<label>Contact number:</label>
		<input type="text" class="text" name="phone" />
	</p>
	<p class="area">
		<label>Message:</label>
		<textarea class="textarea" name="message"></textarea>
	</p>
	<p>
		<label> </label>
		<input type="submit" class="btn" value="Submit" />
	</p>
</form>

Easy? Note that I have assigned id to the form. It's really important because we are going to use it later. Let's go to the next step.

default.css

.blocks p {
	margin-bottom:15px;
	position:relative;
}

.btn {
	display:block;
	float:left;
	height:31px;
	line-height:31px;
	padding:0 10px;
	background:url(../gfx/bgbtn.jpg) repeat-x;
	color:#565e62;
	font-weight:bold;
	font-size:11px;
	border:1px solid #e1e0df;
	outline:none;
}

.text,
.textarea {
	padding:5px 10px;
	height:27px;
	border:1px solid #ddd;
	color:#333;
	background:url(../gfx/bginput.jpg) repeat-x bottom #fff;
	position:relative;
	z-index:2;
}

.text {
	width:220px;
}

.textarea {
	height:150px;
	width:350px;
}

.blocks label {
	float:left;
	width:100px;
	line-height:37px;
	text-align:right;
	margin-right:15px;
	font-weight:bold;
	color:#666;
}

.blocks label.error,
.blocks label.ok {
	position:absolute;
	z-index:1;
	top:-4px;
	left:110px;
	padding:5px 15px 5px 280px;

	/* Reseting previous label values */
	width:auto;
	text-align:left;
	margin:0;
	background-repeat:no-repeat;
	background-position:257px 16px;
}

.blocks label.ok {
	background-image:url(../gfx/icook.gif);
	background-color:#deefca;
	color:#577530;
}

.blocks label.error {
	background-image:url(../gfx/icofail.gif);
	background-color:#f5d6d7;
	color:#c81925;
}

.area label.ok,
.area label.error {
	height:163px;
	padding-left:410px;
	background-position:387px 16px;
}

/* CSS3 */
.btn, .text, .textarea, .blocks label.error, .blocks label.ok { 
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}

init.js

$(function(){
	$("#form").validate({ // your form id (you can also use class name instead id)
		rules: {
			name: {
				required: true, // makes the element always required
				minlength: 3 // makes the element require a given minimum length
			},
			company: {
				required: true
			},
			phone: {
				required: true,
				number: true, // makes the element require a decimal number
				minlength: 6
			},
			email: {
				required: true,
				email: true // makes the element require a valid email
			},
			message: {
				required: true
			}
		},
		messages: { // specify custom messages
			name: {
				required: 'This field is required',
				minlength: 'Minimum length: 3'
			},
			company: {
				required: 'This field is required',
			},
			phone: {
				required: 'This field is required',
				number: 'Invalid phone number',
				minlength: 'Minimum length: 6'
			},
			email: 'Invalid e-mail address',
			message: {
				required: 'This field is required'
			}
		},
		success: function(label) {
			// set 'ok' class to error-labels to indicate valid fields and call fadeOut() function after 2000ms
			label.html('OK').removeClass('error').addClass('ok');
			setTimeout(function(){
				label.fadeOut(500);
			}, 2000)
		}
	});
});

Finished! Check out the demo and leave a comment!

Comments:

andrea

07.04.11, 09:28

great job, but if I have a site multilanguage, how can change the validate text?

thx

Thiru

26.03.11, 07:31

Very Nice tut....

Ashish

25.02.11, 07:55

great job... thanks for this

Marcin Dziewulski

31.01.11, 14:19

@Fred

I fixed it ;)

fred

31.01.11, 13:41

looks awesome, except when i checked it on ie7 no validation

Germanico Brismal

26.01.11, 03:49

Great tutorial!
Awesome contact form :)

bp

26.01.11, 02:21

goodjob!

JamiGibbs

25.01.11, 21:22

Nice tut!! Very easy to follow and right to good stuff. :)

Write a Comment

Name:

Email:

Comment:

Captcha code: