jump to navigation

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

Posted by Tournas Dimitrios in JQuery.

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 :

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
//transition effect 
} else {



function closeForm(){
setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s