Animated contact form using jQuery

Hi guys, in this post we will see simple animated Contact forms UI, you can use this light weight contact form in your site to add animated contact form that loads faster and looks good.  You can download the free script from download button given below. Just edit the script and add your PHP code to send email to desired email ID and you will have a simple elegant and fast working contact form.  To send email via PHP you can refer this post of PHP script to send email.

cf-infotuts

Live Demo         [sociallocker]Download Code[/sociallocker]

Lets have a quick look at the code, we have index.html for bare structure of page, below is the code:

<body>
<div class="overlay">
<div class="form-wrapper">
<span id="close"></span>
<h3>Contact Us</h3>
<input type="text" name="fname" Placeholder="Name" required="required" />
<input type="email" name="email" Placeholder="Email" required="required" />
<textarea name="message" Placeholder="Message"></textarea>
<input type="button" name="submit" value="Submit" />
</div>
</div>
<div class="container">
<div class="wrapper">
<div class="heading">
<h2>jQuery Contact Us Form - InfoTuts</h2>
</div>
<div class="btn btn1">
<p>Demo One</p>
<a id="fade">Click Here</a>
</div>

<div class="btn btn2">
<p>Demo Two</p>
<a id="slide">Click Here</a>
</div>

<div class="btn btn3">
<p>Demo Three</p>
<a id="translate">Click Here</a>
</div>
</div>

then we have jQuery code for animations:

$(document).ready(function(){
$('div.btn a').click(function(){
var flag = $(this).attr('id');
switch(flag){
case 'fade':
$('span#close').removeClass().addClass('fade');
$('.overlay').show();
$('.form-wrapper').fadeIn(1000);
break;
case 'slide':
$('span#close').removeClass().addClass('slide');
$('.overlay').show();
$('.form-wrapper').slideDown();
break;
case 'translate':
$('span#close').removeClass().addClass('translate');
$('.overlay').show();
$('.form-wrapper').css('left','0');
$('.form-wrapper').show();
var left = $(window).width();
left = left/2;
$('.form-wrapper').animate({'left': left}, 1000);
break;
}
});

$('div.form-wrapper span#close').click(function(){
var flag = $(this).attr('class'); 
switch(flag){
case 'fade':
$('.form-wrapper').fadeOut(1000, function(){
$('.overlay').hide();
});
break;
case 'slide':
$('.form-wrapper').slideUp(1000, function(){
$('.overlay').hide();
});
break;
case 'translate':
$('.form-wrapper').animate({'left': 0}, 1000, function(){
$('.overlay').hide();
$('.form-wrapper').hide();
});
var left = $(window).width();
left = left/2;
$('.form-wrapper').animate({'left': left}, 1000);
break;
}
});
});

You can use any of the available styles of use other jQuery animations similarly and easily. Hope this quick post would help you in your projects, let us know if you have any topic that you wish us to write about, we’ll cover it. Share it with your friends 🙂