Beautiful Jquery mail form using Php and Css

Huh, more than 1 hour of work and i finished it now.
An amaizing Jquery Form to send an email.

Once someone clicks on any of the boxes they get empty.
Input data first get filtered for empty or same text of the input default box.

Enough talking!

Note! Downloaded version is much cooler.

View Demo Download


This is index.html









Success! Mail sent succsesfuly
Error! Mail not sent, please check details

Jquery email form

Name:



Email:



Subject:



Body:

Reason of contacting..

I included jquery on the file downloads, if you want this script for your website i suggest replacing:




With




Now the style.css


#box{
margin-left: 10px;
}
#box span{
color: #999;
font-size: 13px;
}
#box input[type="text"], #box textarea{
outline: none;
color: gray;
border: 1px solid #6495ED;
}
#box input[type="text"]:focus, #box textarea:focus{
color: gray;
border: 1px solid gray;
}
#box input[type="text"]:hover, #box textarea:hover{
border: 1px solid green;
color: #009999;
}
#box input[type="text"]{
padding: 5px;
-webkit-border-radius: 5px;
}
#box textarea{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 350px;
height: 100px;
}
#box input[type="submit"]{
color: gray;
padding: 5px;
border: 1px solid gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
#box input[type="submit"]:hover{
color: white;
background: black;
border: 1px solid black;
}
#sucess{
margin-left:25%;
margin-right:25%;
background: #7FFF00;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: green;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#error{
margin-left:25%;
margin-right:25%;
background: #FA8072;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: red;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

And submit.php file, i made it simple just to show the idea of the tutorial



// send the email

$data = " Name --> ".$_GET['name']. "
Body --> ".$_GET['body']."
-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-
";

mail( $_GET['email'],  $_GET['subject'] ,  $data);
?>

Share On:

Facebook Twitter WhatsApp Google+ Pinterest

Copy the link below and Share with your Friends:

Download Our Official Android App on Google Playstore HERE
OR
Download from another source HERE

Subscribe to our posts and be the first to receive email updates.

About Entblog
Blogindoor.com Is A Top Tech Blog That Provides Free And Cheap Browsing Cheats On Mtn, Etisalat, 9mobile, Glo And Airtel, Latest Phone And PC Updates, Tweaking Guides And Tech News.