Post image for Create fancy contact form with CSS 3 and jQuery

Create fancy contact form with CSS 3 and jQuery

by Hyder

in Html & CSS, Jquery, PHP

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.


<form>
<p>
<input name="name" type="text" id="name"/>
<label for="name">Name </label>
</p>
<p>
<input name="name" type="text" id="email"/>
<label for="email">Email </label>
 </p>
<p>
<input name="website" type="text" id="website"/>
<label for="website">Name </label>
 </p>
<p>
<textarea name="text"></textarea>
 </p>
<p>
<input value="Send" type="submit" id="Send"/>
 </p>
</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 .


body { padding:50px 100px; font:12px Verdana, Geneva, sans-serif;
background:url("wooden_background.jpg") repeat scroll 0 0 #282828;
 }

input, textarea {
 padding: 8px;
 border: solid 1px #E5E5E5;
font: normal 12px Verdana, Tahoma, sans-serif;
 width: 200px;

 }

textarea {
 width: 400px;
 max-width: 400px;
 height: 150px;
 line-height: 150%;
 }

.form label {
 margin-left: 10px;
 color: #999999;
 }

.submit input {
 width: auto;
 padding: 9px 15px;
 background: #617798;
 font-size: 14px;
 color: #FFFFFF;
 cursor:pointer;
 }
#form-div {
background-color:#F5F5F5;
padding:15px;
}

#wrapper {
margin:30px auto;
width:500px;
}

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
  • box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/* Default property recognized by some browsers- a Good practice to include it*/
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Mozilla Firefox Browsers*/
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;/*For Webkite browsers - Chrome and Safari*/
    	

    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 :

    rgba[RED][GREEN][BLUE][ALPHA]
    
    /*Alpha  = Opacity*/
    
  • Add Gradient to Background
  • background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));/*Chrome and Safari*/
     background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);/* Firefox Browsers */
    background: #FFFFFF url('bg_form.png') left top repeat-x;
    	

    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
  • -moz-border-radius:12px 12px 12px 12px;
    -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 .


$(document).ready(function() {
 // SUCCESS AJAX CALL, replace "success: false," by:     success : function() { callSuccessFunction() },
 $("#form1").validationEngine({
 ajaxSubmit: true,
 ajaxSubmitFile: "ajaxSubmit.php",
 ajaxSubmitMessage: "Thank you, We will contact you soon !",
 success :  false,
 failure : function() {}
 })

});

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.

//Code Updated on 18 Feb 2011

$name = $_POST['name']; // contain name of person
$email = $_POST['email']; // Email address of sender
$web = $_POST['web']; // Your website URL
$body = $_POST['text']; // Your message
$receiver = "ismaakeel@gmail.com" ; // hardcorde your email address here - This is the email address that all your feedbacks will be sent to
if (!empty($name) & !empty($email) && !empty($body)) {
    $body = "Name:{$name}\n\nWebsite :{$web}\n\nComments:{$body}";
	$send = mail($receiver, 'Contact Form Submission', $body, "From: {$email}");
    if ($send) {
        echo 'true'; //if everything is ok,always return true , else ajax submission won't work
    }

}

Related Posts

  1. Designing a form using pure CSS enhanced with Jquery
  2. Username Availability Check in Registration Form using Jquery/PHP
  3. Creating a Fancy Search Feature with PHP,Mysql and Jquery
  4. Create a facebook post to wall system using PHP and jQuery Part 1
  5. Creating Message boxes using css with fadein Effects using jquery
After Post

{ 66 comments… read them below or add one }

Ben September 13, 2012 at 1:34 pm

Hi Ryder,

I tried to implement your contact form, but everytime I want to submit the form, I receive an error message.

The file giving the error is: jquery.validationEngine.js

Line:413
Error: syntax error.

I’ve looked into it with firebug, but I do not succeed to solve the issue.

Could you please help me out here?

Cheers,
Ben

Reply

Carlo Gaudreault September 24, 2012 at 7:18 am

Hey thanks! Great tutorial!

My first time working with forms and the result is fantastic! The verification messages are nice, much appreciated also in french! Perfectly adapted for this local podiatrist clinic :

http://www.PodiatrePLG.com/joindre
(should be online by 25/09/12)

Reply

taz September 24, 2012 at 3:12 pm

Hi,

i changed few css parameters & background etc to make it more beautiful…N it sucked. It doesnt work.No way. AjaxSubmit.php is wrong i guess….on submit ..it do nothing..i think it doesnt work on run time , after web server upload. Plz reply why on SUBMIT, it remains SILENT ?? No emails ..jsut nothing,,,why ??

Reply

Ahnaf September 27, 2012 at 7:33 pm

Grate tutorial. fortunately I got it in first search in Google. Thanks & keep it up.

Reply

bad credit home equity Loan rate October 2, 2012 at 8:11 pm

An intriguing discussion is worth comment.
I do believe that you need to publish more on this
topic, it may not be a taboo matter but generally people do not talk about such issues.
To the next! All the best!!

Reply

fysisoft October 3, 2012 at 9:32 pm

wow…its really gud…Thanks a lot

Reply

CyberEvil October 5, 2012 at 3:08 pm

Hi Hyder,

I trully appreciate the plugin and the help you’ re giving on this thread. Fantastic work!

I have no problem with the form validation and sending events. All works great.

The only issue is that the old Validator has a bug where the globes are stuck with fixed positions and not relative, plus they float above everything, not the container. This was fixed on the newer 2.x release (I’ ve confirmed this). Now, tried to port your code for submitting the form. The only file that tried modifying “porting” your code is jquery.validationEngine.js. Found the ajaxSubmit options, and the code seems to be nested within the original code, which is quite difficult for me to move it to the new jquery.validationEngine.js file. Would you mind to help me to port the code? I can’ t live with the floating popups not working.

Thanks a lot!!!

Reply

ferde October 12, 2012 at 11:21 pm

I have the same problem too :(
SyntaxError: Unexpected token ‘)’ jquery.validationEngine.js:413
the error came out after the send button was pressed after the file was hosted as if the button did nothing.
But when I tested the form locally using XAMPP, everything including the validation was working perfectly and I got the emails as well.

Is that something to do with the web hosting server or something?
help, anyone?

Reply

se33 October 22, 2012 at 7:26 am

Hi,

thank you for this great contact form. Everything works great except UTF-8 as i can’t send emails, that contain cyrilic chars.

Is there a solution for this?

Thanks.

Reply

Owen October 22, 2012 at 8:01 pm

Where to add the php code in wordpress?

I received 404 Error page while clicking on submit button…

Help would be appreciable. Thanks in advance.

Reply

Leave a Comment

Previous post:

Next post: