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
<html>
<head>
<title>Less4us ~ Mail form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<!-- http://less4us.blogspot.com -->
<span id="sucess">Success! Mail sent succsesfuly</span>
<span id="error">Error! Mail not sent, please check details</span>
<center><h2>Jquery email form</h2></center>
<div id="box">
<span>Name:</span><br>
<input type="text" value="Your name.." name="name" id="name"><br>
<span>Email:</span><br>
<input type="text" value="email@something" name="email" id="email"><br>
<span>Subject:</span><br>
<input type="text" value="Mail subject.." name="subject" id="subject"><br>
<span>Body:</span><br>
<textarea name="body" id="body">Reason of contacting..</textarea><br>
<input type="submit" id="submit" value="Contact">
</div>
</body>
</html>
I included jquery on the file downloads, if you want this script for your website i suggest replacing:
<script type="text/javascript" src="jquery.js"></script>
With
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
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
<?php
// 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);
?>
Thats it, and dont forget, sharing is caring :)
i like you post good job
ReplyDeleteNice Job Bro ;)))
ReplyDeleteThanks :)
ReplyDelete