Creating a Contact Form with Modal + Slide-in Transition

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity , although , JQuery is an excellent framework to develop slide-in  contact forms with modal transition . The concepts are  really simple :

• embed the core JQuery framework into the web-page
• Create an HTML  form  inside a “div” tag .
• With CSS hide the “div” tag (display:none; ) .
• “Listen” to a “Click” event with JQuery and apply some transitions .

This article will just demonstrate the basic functionality ( no client/server-side validation ) .  I have to thank ” Design Shack” for  the original code that inspired my final product . I hope it will help newcomers to grasp the basic concepts . Future articles will built on top of this code to create a full featured contact form for production use . The final result is like the picture below or visit a live demo .
The best way to learn is to download the zip file and experimenting on a local development server (Wamp - Xamp )  .

The basic code is :

$(document).ready(function(){
$("#contactLink").click(function(){
if ($("#contactForm").is(":hidden")){
// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width(); 
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth-40,'height':maskHeight}); 
//transition effect 
$('#mask').fadeIn(1000); 
$('#mask').fadeTo("slow",0.9); 
$("#contactForm").slideDown("slow");
} else {
$("#contactForm").slideUp("slow");
$('#mask').fadeOut(1000); 

}
});

});

function closeForm(){
$("#messageSent").show("slow");
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
$('#mask').fadeOut(3000);
}

About these ads