Create fancy contact form with CSS 3 and jQuery

This tutorial is about creating a simple contact form using XHTML CSS, PHP, and jQuery. The Aim of this article is to show some of the nice CSS 3 style properties such as adding Background Gradient, Corners and Borders to Form Elements.

Step 1 – The HTML Mark Up

The Step 1 is the backbone of the form. It Contains the HTML Code to add textboxes, textarea and a submit Button.

01

<form>

02

<p>

03	<input name="name" type="text" id="name"/>

04	<label for="name">Name </label>

05

</p>

06

<p>

07	<input name="name" type="text" id="email"/>

08	<label for="email">Email </label>

09

</p>

10

<p>

11	<input name="website" type="text" id="website"/>

12	<label for="website">Name </label>

13

</p>

14

<p>

15	<textarea name="text"></textarea>

16

</p>

17

<p>

18	<input value="Send" type="submit" id="Send"/>

19

</p>

20

</form>

Step 1 - xHTML Form Backbone

Step 2 – Styling with CSS ( Without CSS3 Properties )

In this step, Basic CSS Style is added to make the form a bit more elegant .Pretty Simple Stuff here, nothing special. The wooden background texture used has been taken from flickR here .

01	body { padding:50px 100px; font:12px Verdana, Geneva, sans-serif;

02	background:url("wooden_background.jpg") repeat scroll 0 0 #282828;

03

}

04

05	input, textarea {

06	padding: 8px;

07	border: solid 1px #E5E5E5;

08	font: normal 12px Verdana, Tahoma, sans-serif;

09	width: 200px;

10

11

}

12

13	textarea {

14	width: 400px;

15	max-width: 400px;

16	height: 150px;

17	line-height: 150%;

18

}

19

20	.form label {

21	margin-left: 10px;

22	color: #999999;

23

}

24

25	.submit input {

26	width: auto;

27	padding: 9px 15px;

28	background: #617798;

29	font-size: 14px;

30	color: #FFFFFF;

31	cursor:pointer;

32

}

33	#form-div {

34	background-color:#F5F5F5;

35	padding:15px;

36

}

37

38	#wrapper {

39	margin:30px auto;

40	width:500px;

41

}

Step 2 : Basic CSS Style

Step 3 -Adding CSS 3 to beautify the Form

We now use some CSS3 Style properties to add some shadow effect , a gradient to the background of each form element and also rounded corners .The thing about Css 3 Property is because it is not the standard and officially yet , so we have to use browser-version CSS3 Property . So for Mozilla we use ,we use the  ‘-moz’ prefix and  for webkit browsers such as safari and chrome we use ‘-webkit’ .

• Add Shadow Effect

1	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/* Default property recognized by some browsers- a Good practice to include it*/

2	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Mozilla Firefox Browsers*/

3	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Webkite browsers - Chrome and Safari*/

4

This CSS Property Takes a color and 3 Length as attribute .
Color - It can be in Hex/Rgb/Rgba
Horizontal offset-Positive Value means shadow will be on the right, and a negative value indicates shadow will be on the left.
Vertical Offset -Positive value means shadox will be on the top and a Negative value indicates shadow will be below .
Blur Radius - The higher the number , the more blurred it will be .
For this example , i have used RGBA .As compared to RGB , RGBA is simply color with Opacity .
Syntax for RGBA :

1	rgba[RED][GREEN][BLUE][ALPHA]

2

3	/*Alpha  = Opacity*/

• Add Gradient to Background

1	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));/*Chrome and Safari*/

2	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);/* Firefox Browsers */

3	background: #FFFFFF url('bg_form.png') left top repeat-x;

4

The 3rd one is not a CSS 3 Property .It’s purpose here is to mimic it in browsers like Internet Explorer 6,7,8 since it does not support CSS3 .

• Add Rounded Corners

1	-moz-border-radius:12px 12px 12px 12px;

2	-webkit-border-radius: 12px 12px 12px 12px;

Unfortunately rounded corners will not be rendered in Internet Explorer .You can go to CurvyCorners to make it work on IE Browsers .

Step 3 : Form with CSS3 Properties

Step 4-Client Side Validation and Ajax Submission with jQuery

I used the Validation Engine Plug in to add Validation to the form. You can find more about this with. Cedric’s Post .

01	$(document).ready(function() {

02	// SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() },

03	$("#form1").validationEngine({

04	ajaxSubmit: true,

05	ajaxSubmitFile: "ajaxSubmit.php",

06	ajaxSubmitMessage: "Thank you, We will contact you soon !",

07	success :  false,

08	failure : function() {}

09

})

10

11

});

Step 4 : jQuery Validation Added

Step 5- Sending Mail with PHP

The PHP Code below handles the Email Submission For the online Demo ,the Email Submission has been disabled to prevent abuses. You can download the source code using the download link below to get the full working code.

view source

print?

01	//Code Updated on 18 Feb 2011

02

03	$name = $_POST['name']; // contain name of person

04	$email = $_POST['email']; // Email address of sender

05	$web = $_POST['web']; // Your website URL

06	$body = $_POST['text']; // Your message

07	$receiver = "ismaakeel@gmail.com" ; // hardcorde your email address here - This is the email address that all your feedbacks will be sent to

08	if (!empty($name) & !empty($email) && !empty($body)) {

09	$body = "Name:{$name}\n\nWebsite :{$web}\n\nComments:{$body}";

10	$send = mail($receiver, 'Contact Form Submission', $body, "From: {$email}");

11	if ($send) {

12	echo 'true'; //if everything is ok,always return true , else ajax submission won't work

13

}

14

15

}