Contact Form Using Jquery-AjaxCreate a jquery ajax form and validate the fields
Download
CSS
body{
font-family:Arial, Tahoma, Verdana;
font-size:12px;
margin:0 auto; padding:0;
color:#FFFFFF;
background-color:#949494;
}
*{
margin:0;
padding:0;
}
*:focus{
outline:none; /* removes ugly dotted border but may make template more unsuable, up to you
if you want to keep it! */
}
.clr{
clear:both
}
form{
margin:0; padding:0;
}
/* links */
a{
color:#a2a1a1;
text-decoration:underline;
}
a:visited{
color:#a7a6a6;
text-decoration:none;
}
a:hover{
color:#a7a6a6;
text-decoration:none;
}
a img{
border:none
}
/* Custom Message Styling */
.info {
margin: 15px 0;
color: #478BBF;
padding: 8px 10px 8px 37px;
background: #DCEFF5 url(images/info.png) 12px 9px no-repeat;
border: 1px solid #B8E7F5;
}
.success {
margin: 15px 0;
color:#3F9153;
padding:8px 10px 8px 37px;
background:#D7F7DF url(images/success.png) 12px 9px no-repeat;
border:1px solid #A3F7B8
}
.error {
margin: 15px 0;
color: #C24848;
padding: 8px 10px 8px 37px;
background: #FFD6D6 url(images/error.png) 12px 9px no-repeat;
border: 1px solid #FFC2C2;
}
.warning {
margin: 15px 0;
color: #CF9E00;
padding: 8px 10px 8px 37px;
background: #FAF2D7 url(images/warning.png) 12px 9px no-repeat;
border: 1px solid #FAE8AF;
}
#content{
padding:50px 0px 50px 0px;
}
#content_main{
width:560px;
float:left;
padding-left:30px;
}
.title_page{
font-size:36px;
margin-bottom:0;
}
.desc_title{
color:#FFFFFF;
font-size:24px;
}
form{
margin:0;
padding:0;
}
#contact_area{
position:relative;
padding:0px 0 0 0;
}
#contactFormArea{
width:406px;
margin:-20px 0px 20px 0px;
padding:30px 0 0 0;
}
label{
margin-bottom:3px;
}
fieldset{
border:0px;
}
.textfield{
border:1px solid #d5d5d5;
font-size:12px;
width:406px;
padding:7px 5px;
margin:0px 0px 15px 0px;
color:#959494;
}
.input-submit{
background-image:url(images/but-send.jpg);
background-repeat:no-repeat;
border:none;
width:84px;
height:34px;
cursor:pointer;
float:right;
margin-top:10px;
margin-right:-12px\0/;
color:#959494;
font-size:13px;
text-shadow:0px 1px 0px #fff;
}
/* ie7 hack */
*:first-child+html .input-submit{
background-image:url(images/but-send.jpg);
background-repeat:no-repeat;
border:none;
width:84px;
height:34px;
cursor:pointer;
float:right;
margin-top:10px;
margin-right:-12px;
color:#959494;
font-size:13px;
text-shadow:0px 1px 0px #fff;
}
.textarea{
border:1px solid #d5d5d5;
font-size:12px;
overflow:hidden;
width:406px;
padding:6px 5px;
margin:0px 0px 5px 0px;
color:#959494;
font-family:Arial;
}
.loading{
background:url(images/loading-contact.gif) no-repeat;
background-position:0px 3px;
padding-left:25px;
color:#797979;
margin:19px 20px 0px 0px;
float:right;
}
.success-contact{
text-align:center;
color:#3F9153;
margin-bottom:10px;
padding:8px 10px 8px 37px;
background:#D7F7DF url(images/success.png) no-repeat;
background-position:120px 9px;
border:1px solid #A3F7B8;
}
//Javascript
$(document).ready(function() {
$('#buttonsend').click( function() {
var name = $('#name').val();
var subject = $('#subject').val();
var email = $('#email').val();
var message = $('#message').val();
$('.loading').fadeIn('fast');
if (name != "" && subject != "" && email != "" && message != "")
{
$.ajax(
{
url: 'sendemail.php',
type: 'POST',
data: "name=" + name + "&subject=" + subject + "&email=" + email + "&message=" + message,
success: function(result)
{
$('.loading').fadeOut('fast');
if(result == "email_error") {
$('#email').css({"border":"1px solid #ffb6b6"}).next('.require').text(' !');
} else {
$('#name, #subject, #email, #message').val("");
$('Your message has been sent successfully. Thank you!').insertBefore('#contactFormArea');
$('.success-contact').fadeOut(5000, function(){ $(this).remove(); });
}
}
}
);
return false;
}
else
{
$('.loading').fadeOut('fast');
if( name == "") $('#name').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
if(subject == "") $('#subject').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
if(email == "" ) $('#email').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
if(message == "") $('#message').css({"background":"#FFFCFC","border":"2px solid #ffb6b6"});
return false;
}
});
$('#name, #subject, #email,#message').focus(function(){
$(this).css({"background":"#ffffff","border":"2px solid #d5d5d5"});
});
});
//sendemail.php
<?php
$yourName = 'Test Mail';
$yourEmail = 'info@r-ednalan';
$yourSubject = 'Subject Test';
$referringPage = 'http://r-ednalan.blogspot.com/';
function cleanPosUrl ($str) {
return stripslashes($str);
}
if ( isset($_POST['sendContactEmail']) )
{
$to = $yourEmail;
$subject = $yourSubject.': '.$_POST['posRegard'];
$message = cleanPosUrl($_POST['posText']);
$headers = "From: ".cleanPosUrl($_POST['posName'])." <".$_POST['posEmail'].">\r\n";
$headers .= 'To: '.$yourName.' <'.$yourEmail.'>'."\r\n";
$mailit = mail($to,$subject,$message,$headers);
if ( @$mailit ) {
header('Location: '.$referringPage.'?success=true');
}
else {
header('Location: '.$referringPage.'?error=true');
}
}
?>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/contact-form.js"></script>
<div id="content">
<div id="content_main">
<h1 class="title_page">Contact</h1>
<h2 class="desc_title">Send us and email</h2>
<p class="italic-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur excepteur sint occaecat cupidatat non proident,sunt in culpa quilo officia deserunt mollit anim id est laborum.</p>
<div id="contact_area">
<div id="contactFormArea">
<form action="#" id="contactform">
<fieldset>
<label>Name</label><br />
<input type="text" name="name" class="textfield" id="name" value="" /><br />
<label>Email</label><br />
<input type="text" name="email" class="textfield" id="email" value="" /><br />
<label>Subject</label><br />
<input type="text" name="subject" class="textfield field-nomargin" id="subject" value="" /><br />
<label>Message</label><br />
<textarea name="message" id="message" class="textarea" cols="2" rows="7"></textarea>
<input type="submit" name="submit" class="input-submit" id="buttonsend" value="" />
<span class="loading" style="display: none;">Please wait..</span>
</fieldset>
</form>
</div>
</div>
</div>
</div>
