jump to navigation

Creating a Contact Form with Modal + Slide-in Transition September 26, 2011

Posted by Tournas Dimitrios in JQuery.
trackback

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

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 96 other followers