Creating a Slide-in jQuery Contact Form

by on 10th October 2008 with 196 Comments

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.

Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.

Slide in contact form

Note: You can make this form fully functional by adding validation and some real code that sends the email.

Check out the demo and download full source code here.

The structure

Let’s explain the structure first.

Your message has been sent successfully!

Company logo

The CSS Code

We have “contactForm” and “contactLink” divs inside the “contactFormContainer” which is positioned absolutely. ContactForm contains form elements, and contactLink will toggle our contact form on click. Simple enough, right? The CSS code will make this clearer:

#contactForm fieldset
            #contactForm label
            #contactForm input[type=text]
               border:solid 1px #4d3a24;
            #contactForm textarea
               border:solid 1px #4d3a24;
            #contactForm input[type=submit]
               border:solid 1px #23150c;

Let’s slide folks!

And to make this work, we have to add a touch of jQuery.

                    if ($(”#contactForm”).is(”:hidden”)){
            function closeForm(){
                setTimeout(’$(”#messageSent”).hide();$(”#contactForm”).slideUp(”slow”)’, 2000);

Let me briefly explain the code above. Clicking on #contactLink div will toggle contact form visibility. Once user submits the form, a message “Your message has been sent successfully!” will appear and the entire form will slide up to its original state.

Check out the demo and download full source code here.

Why all of this?

This is just a sample of how you can improve user experience by adding dynamic content to your pages. Besides a contact form, you can create a slide-in login form, search form or anything that you think will improve the user experience.

Is there anything that could be done better? Do you know any other way of doing this? Share some examples!

Comments & Discussion


Comments & Discussion


  1. Jason Kershaw says:

    This is great… seen it done on lots of sites and always wondered how it’s done. Thanks!

  2. It is good realization of a good idea. However, it must be improved to fall back if JavaScript is disabled. This can be done by setting the display: none in the css file and setting display:block by JavaScript.

    Also, the background of the contact form can be improved in at least three ways. Either by setting the background color of the contact form box (not to use the background image) or by making the background image 1px x 1pa and tiling it both horizontally and vertically. And finally, if you use the big background image, it can be preloaded.

  3. Steven says:

    The demo could be clearer. A user who just scanned the first few lines of the article should be able to eval the demo. THEREFORE the Contact button should say, “Click me”. It took me a while to figure out what to do, including debugging the NoScript plugin settings…

  4. Alan says:

    I wonder how long Steven stumbled around in that big form to figure out what to click on?

  5. Janko says:

    Sasa, you made good points.

    Steven, I really don’t understand – isn’t ‘Contact us’ link BIG enough? And second: do you really think that ‘Click me’ is semantically better than ‘Contact us’ in this case? What would ‘click me’ mean to anyone?

  6. mbh says:

    Brilliantly simple! Thanks for sharing the Jquery.

    The only comment I might make… while the form is indeed simple it wasn’t immediately clear how I could close the form if I decided not to send information.

    Yes, after some poking around I did determine the Contact Us portion of the form was a toggle switch. Clever though I’m wondering if at least a jquery hover comment of some kind wouldn’t be helpful in this instance.

    Thanks for sharing!

  7. Dave Adams says:

    I implemented a similar jquery contact form on my site a few months ago, and it seems to work ok. The only thing I’ve done differently is that the link to the form is within the normal navigation.

  8. Nate says:

    Nice tut! Is it possible to make this come out of the RIGHT side of the page? Still displaying the form the same, of course (would be kinda hard to read and fill out, hah).

  9. Janko says:

    @mbh – yeah, a small “hide” button would do the work.

    Nate, you can slide it out of any side, and you can do it by using .animate(…) method.

  10. Andy says:

    This is a nice implementation but so obstrusive! There should be a fallback solution but not hiding via css since there would be no contact form at all. Why not linking to a separate contact page if JS is disabled…

    And yes I had a hard time to find the link in the upper right, a single paragraph of lorem ipsum should be enough.

  11. Moris says:

    Thank you, you code was just what I was looking for and using it has explained a few things. I am very new to jquery and javascript

    Could you possible direct me as to how to add a dark overlay as background .when the form slides in

  12. Bret Truchan says:

    Hello! It could just be me being dumb, but do you have an extra closing DIV tag in your demo above?

  13. Joe says:

    Great stuff. I think I’m in love with the internet.

  14. Andrisi says:

    Unfortunately does not work in that stupid IE6. :-(

  15. Janko says:

    Moris, if I understood you correctly all you have to do is to set the background image for #contactForm.

    Bret, yes, there is an extra div, my mistake.

    Andrisi, yeah IE6 is stupid :-)

  16. matei says:

    very cool form, only I am very new at this stuff, so I am interested how can I tell the form to submit the message to my e-mail

    plis help

  17. matei says:

    very cool form, only I am very new at this stuff, so I am interested how can I tell the form to submit the message to my e-mail

    plis help

  18. matei says:

    very cool form, only I am very new at this stuff, so I am interested how can I tell the form to submit the message to my e-mail

    plis help

  19. matei says:

    very cool form, only I am very new at this stuff, so I am interested how can I tell the form to submit the message to my e-mail

    plis help

  20. matei says:

    very cool form, only I am very new at this stuff, so I am interested how can I tell the form to submit the message to my e-mail

    plis help

  21. matei says:

    Note: You can make this form fully functional by adding validation and some real code that sends the email.

    What is this code

  22. matei says:

    Note: You can make this form fully functional by adding validation and some real code that sends the email.

    What is this code

  23. matei says:

    Note: You can make this form fully functional by adding validation and some real code that sends the email.

    What is this code

  24. matei says:

    Note: You can make this form fully functional by adding validation and some real code that sends the email.

    What is this code

  25. Aaron says:

    In IE7 i notice it jumps when opening and closing.

    Also when you click the submit button it jumps down before displaying the message has been sent.

    Any ideas why or how to fix?

    Thanks and great work!!!

  26. Aaron says:

    Ok i think i have fixed the bounce but have one more question.

    How would you make it close if you click out side of the contact form div.

    I added


    But there is probably a better way to do this.

  27. Paulo Cholla says:

    Note: You can make this form fully functional by adding validation and some real code that sends the email.

    What is this code

  28. Brigthon web says:

    Very nice form, just not validated:(

  29. Luke says:

    Just beginning with jQuery, struggling to add working code to this – It’s a nice effect, does anyone have any examples with validation/mail code?

    Anybody? Thanks in advance :)

  30. Luke says:

    I had some luck combining this with the jQuery form plugin if anyone is looking for a way to make this functional.Search ‘ultra-slick-ajax-contact-form-with-jquery’ for a good tutorial.

    Hope it helps someone.

  31. Chris says:

    To ensure users will still be able to use the contact form if javascript is disabled/unavailable, you can make the “contactLink” an actual link to a stand-alone contact page, and use the following code:
    if ($(”#contactForm”).is(”:hidden”)){
    If the user has javascript enabled, the form will slide in as expected, but if they don’t, they will be taken to the stand-alone contact page.

  32. prawin says:

    In the above code, i dont know how the slide initially in up . Iam new to jquery, can any one explain

  33. jas says:

    nice work dud

  34. Geany says:

    As Luke said:

    “Just beginning with jQuery, struggling to add working code to this – It’s a nice effect, does anyone have any examples with validation/mail code? ”

    I’d also like some examples so I can this great form to work. Thanks.

  35. Jason says:

    Anyone have a full working version, actual email submission & everything?

    I’m having an issue implementing this correctly.

  36. Milo says:

    How about recognizing the open and closed states, for adding specific styles to the button?

  37. alibaba says:

    nice work! but how do the comments reach me? at what point do i intergrate with PHP/jsp/asp ? i want the comments to go to a database.

    help please

  38. Ray says:

    This demo is really great. Anyone know of a good way to integrate with coldfusion, remaining on page as demonstrated and emailing form values to a certain address? Any thoughts much appreciated.

  39. yoyo says:

    but how to add real code to make it work?

    need php or something?


  40. It worked on IE6 for me. But it flickers, I think I can fix the flicker issue myself

    Thank you for the great tutorial


  41. Liam says:

    Looks great but as others have said; how do you actually make it send the message?

  42. Liam says:

    I have been trying to make this work well with FormMail but am I right in thinking that only functions with a form and not a fieldset?

  43. Abdel says:

    cool effect. I really love it.

  44. Charles says:

    when you open the page or refresh page the dropdown is expanded and will not collpase till you send email or click contact us. Please help i do love this website feature.

  45. Janko says:

    Hey guys, thanks for the comments. To answer the question many of you asked – Why there is no validation or mail sending logic – the idea behind this article was to create an interactive, visually enhanced web form, not to implement any logic. There are tons of tutorials on how to do validation/sending emails in different technologies like PHP, ASP.NET and so on, and I suggest you to check out some of tutorials that explain these techniques.

  46. joy says:


  47. CNorris says:

    Question – How when does the ‘closeForm’ function actually get called? I understand that onclick the form either goes up down, if it is down already, it goes up. I don’t understand how the closeForm gets initiated though.

  48. Hey. I like the tutorial, but I’m having an annoying problem…

    How can I make it so that the form submit button doesn’t redirect OR refresh the page when pressed? In the example yours doesn’t, but when I try to, mine does.

    Just wondering.

  49. Jonathan says:

    Hi, I would like to use this plug-in for one of my sites, but I don’t see where I could change the text button for the submit button : SUBMIT QUERY???
    I would like to make it OK for example.
    Can you please help?

  50. Jonathan says:

    That’s OK, I’ve find it.

  51. jo says:

    Great thanks….
    I know this sounds daft but where can I get some code from so that the form works/sends?
    many thanks!

  52. alan says:

    Endocrines are tasty.

  53. This is really nice…does it work in IE6? Just wondering as I need something like this that does!

    Thanks for a great demo.

  54. teo says:

    where have to change the email¿???

  55. croustichoc says:

    nice, but isn’t there a php file missing somewhere ?

  56. Stinky13 says:

    LS, The wedding couple hoochie-dance was cute. ,

  57. BadGirl25 says:

    And then, allegedly, Roethlisberger blocked her exit and raped her. ,

  58. Rab says:

    What a great little script.

    I’ve modified it slightly so that it degrades gracefully with javascript turned off.

    Hope it is of use to someone.

    I wrapped the contactLink div in a link

    and added a line to the contactLink click function to prevent the link being followed. Obviously this bit will only run if javascript is turned on!


    e.preventDefault(); //Stops normal <a href behaviour
    if ($("#contactForm").is(":hidden")){


  59. alaodia says:

    Could you spare me a moment? buy cheap nolvadex buy chemical citrate nolvadex research tamoxifen I’m very thankful to you.

    I’ll just like to tell you that… buy nolvadex without a prescription buy generic nolvadex
    buy clenbuterol nolvadex online See you soon!

  60. amerydia says:

    Good evening! buying clomid line buy clomid 100mg You’re not in a hurry, are you?

    Are you very busy at the moment? buy clomid in the united states buy clomid 5 mg
    buy clomid 100mg Thank you very much.

  61. Maria says:

    I love this little thing!
    However, being a complete newbie to php I am having issues getting this thing to actually send some mail my way.. =/
    Could someome point me in the direction of some php that would work wonders with this thing?
    I have a feeling that I can’t get it working, because whatever I do, the php wants to redirect to a new site when I hit submit..
    Any help is greatly appreciated!

  62. indialike says:

    Very nice and useful tutorials to web designers,
    Thanks for posting.

  63. Tony says:

    How can i make this slide up instead of down?

  64. Williams says:

    I have done to one of my client websites, it is working.

    Thanks Mate.

  65. Sabin says:

    Nice script. So easy to impliment.


  66. iç giyim says:

    This is great… Very thanks

  67. Jean says:

    Hallo Just beginning with jQuery, struggling to add working code to this – It’s a nice effect, does anyone have any examples with validation/mail code? PHP???

    Anybody? Thanks in advance :)

  68. Rishabh says:

    But How Do we put our email so that the message is really sent to our email

  69. Petko says:

    Fine! I get a code and necessarily will do the same form for the site. Only a design needs it will be to be changed.

  70. Steven says:

    Hi Guys,

    Very nice script. Aaron said: “In IE7 i notice it jumps when opening and closing”. I have the same problem. Anyone wants to share the solution?

    Best regards,


  71. Owen says:

    very nice script,works perfect on my site,thanks!

  72. George says:

    To fix the IE issue add the following:

  73. George says:



    Remove the comments

  74. George says:

    Third time im trying to post the message okay:

    here’s what you do to fix the IE issue:

    1- add DOCTYPE XHTML 1.0 Transitional
    2- add xmlns=””

  75. sweet… and my site uses one exactly like this one!!

  76. Very nice tuts for designing a form with jquery. Very easy to follow and learn, even for newbie like me… Good work!

  77. R. Kader says:

    Great work! I will use it not as a contact field so I use it for searching, font sizes and glossary.

    Thank you for inspiration!


  78. LYKC says:

    Great effect! I’ve implemented it on my own portfolio as a quick contact form, but without the bg image and ajax sent message to make it load faster. Check it out at Thanks again for the cool effect. Kudos!

  79. Jacob says:

    This a a great tutorial, but how do input our link so it actually sends the message to our email. Prob a nweb question but oh well.

  80. vishal says:

    its not working in my blogger blog…. i want really want to put it on my blog
    kindly e-mail me:
    thanx in advance

  81. Shay says:

    Very nice script, I only needed validation as to realling sendimg e-mails to my e-mail, why will nobody help since this was asked here so many times!

  82. LeoTorreZ says:

    i will add this code for use ajax on it:

    function send(){
    type: ‘POST’,
    url: ‘preview.php’,
    dataType: ‘json’,
    data: “name=”+name+”&email=”+Email+”&message=”+Message,
    success: function(r){
    if (r.ok!=’undefined’){
    setTimeout(’$(”#messageSent”).hide();$(”#contactForm”).slideUp(”slow”)’, 2000);
    error: function(data,source,error){

    yeah my english isnt very good

  83. LeoTorreZ says:

    if anyoneneed heres a (no tested jet) code in php for ajax with validation:

  84. LeoTorreZ says:

    $nombre = $_POST['nombre'];
    $mail = $_POST['email'];
    $telefono = $_POST['telefono'];
    $header = ‘From: ‘ . $mail . ” \r\n”;
    $header .= “X-Mailer: PHP/” . phpversion() . ” \r\n”;
    $header .= “Mime-Version: 1.0 \r\n”;
    $header .= “Content-Type: text/plain”;

    $mensaje = “Este mensaje fue enviado por ” . $nombre . “, Telefono:” . $telefono . ” \r\n”;
    $mensaje .= “Su e-mail es: ” . $mail . ” \r\n”;
    $mensaje .= “Mensaje: ” . $_POST['mensaje'] . ” \r\n”;
    $mensaje .= “Enviado el ” . date(‘d/m/Y’, time());

    $para = ‘’;
    $asunto = ‘Contacto desde TCCNOA’;
    echo “”;
    if (empty($_POST['email'])){
    echo “No se especifico E – mail“;
    if (empty($_POST['mensaje'])){
    echo “Por favor, no envie un mensaje en blanco“;
    if ((!strchr($_POST['email'],”@”)) || (!strchr($_POST['mail'],”.”)))
    echo “No es un correo valido“;
    $valida = false;
    // Si todo sale bien
    if ((!empty($_POST['email'])) && (!empty($_POST['mensaje'])) && (valida!=false))
    if(mail($para, $asunto, utf8_decode($mensaje), $header)){
    echo ”;

  85. LeoTorreZ says:

    well i cant post the code

  86. bobby mac says:

    how did ya’ll add the validation? where’s the email setting?

  87. Pokii says:

    Hello. I’m not a web designer i just tweak around my blogger blog. idk if i can use this on blogspot?

    I tried but im just no good with jquery :)

  88. Pokii says:

    i just dont know where to paste the STRUCTURE code :( i get an error message everytime i put it under or before im so confused :(

  89. james says:

    how i can click the form from other button

    like form the link home the will sroll down how i can do dat?

  90. Region Ad says:

    We invite you to post your free classified on where you can promote your services, sell your products and make yourself known to all UK.

    You can add up to 3 descriptive pictures with your advert, also for free.

    We would also like to propose to you a banner or link exchange between our websites.

    Thank you for your time and we are expecting your answer regarding our proposal.

  91. Thanks for this. I’m using this as the basis of an email form that sends the client a simple html itinerary.

  92. imm0 says:

    how the hell can i add this on blogger???help??

  93. Hello. I hope you dont mind me commenting on your blog. I wanted to let you know directly but I cannot find your contact info. I want to subscribe to your blog for new posts but I can’t find your RSS subscription button. Please assist. Thanks.

  94. Happy to search out this post. Its a really useful post on behalf of me, because it contains heap of information. I always prefer to read the quality content and this issue I found in you post.

  95. Thomas says:

    how to define a email on this?

  96. Erika says:

    This example is awesome! Thanks for sharing.

  97. Bill says:

    I spent 1/2 a day on this thing and it wont send email ! What good is that?

  98. Bill says:

    You should put at the top of page, This will not send a e-amil !!! $#@%$^&

  99. Great example.. jQuery is always a must in web design

  100. thank you very much. it’s a nice content. I keep to use skill.

  101. Roby says:

    where should I put my e-mail in this script pls help

  102. I am currently studying this issue is just. Thank You!!!

  103. eric.b says:

    salut as tous super ce script mais ou met ton l’email de reception? merci de votre reponse…

    do hello have all super this script but or puts your email of reception? thank you for your answer…

  104. VB078 says:

    I have exactly the same question …

  105. Your source code makes me easy to understand. Thank you very much.

  106. Liam.B says:

    Hey guys mega noob question but when im using this marvellous peice of code, do I use form mail script cgi-bin stuff to allow me to use this in real life?
    Or am I barking up the wrong tree, or do I need to do something like this?

    totally in the dark here any help would be apreciated

    If i figure it out I will post what I have learnt to help others out there!

  107. Liam.B says:

    whoops i meant something like this

  108. Liam.B says:

    $email = $HTTP_POST_VARS[email];
    $mailto = “”;
    $mailsubj = “contact form”;
    $mailhead = “From: $email\n”;
    reset ($HTTP_POST_VARS);

    $mailbody = “Values submitted from web site form:\n”;

    while (list ($key, $val) = each ($HTTP_POST_VARS))
    $mailbody .= “$key : $val\n”;
    mail($mailto, $mailsubj, $mailbody, $mailhead);

  109. thank you very much. it’s a nice source code

  110. Marcelo says:

    how do I get this form contact Horizontally (fishing line)?

  111. rack says:

    I like php source code. thank you for this post, I get a good idea from you.

  112. Your content makes me easy to understand. Thank you very much.

  113. LazaBre says:

    Please i really like this form contact… but can someone please do me a favor … i need this to work… I mean, I need this finished in PHP or .. can someone please post a downlaod link how to make it work or maybe finished cotact form! ThankYou

  114. Mark says:

    This is what i neeed.

  115. Dawood says:

    I added it on my site and thats with blogger check it out

  116. Tim says:

    Hey I’ve adapted this form to work with my menu adapted from here:
    But I can’t seem to figure out the CSS to ensure the form “floats” atop my other content areas. Source may be found at
    Thanks ever so much for any assistance

  117. khai says:

    Thanks, very cool script :)

  118. Great job on this real good working example. I just used the Jquery i found here. I could do all the rest myself :)


    when writing the jquery script, dont use double quotes – when i used them it broke everything. After i used single quotes it worked flawlessly.

    Thanks again

    Drupal in Albania

  119. Erik says:

    Question: I implemented the code, but when the webpage loads up, the form is already slid down. Is there something missing from my code to keep it up at the start.

  120. hourb says:

    Great script i liked it and going to use it in my website

  121. The article is informative.I have got many knowledge from it.However it is a very brilliant post.WordPress Website Designer

  122. herry says:

    thank u. GOD BLESS YOU

  123. Web Design says:

    Wow. This is really cool. Thanks for sharing.

    I did something similar for WebPlus projects 9my one slide from the left). But I prefer this one more.

    You can find my tutorial here:


  124. bob says:

    doesnt work for me, more explanation needed for beginners please

  125. Oscar says:

    Can i implement this code to shows it below some menu item?

    I mean, i dont want the application just at the top of the website.

  126. Mike says:

    Thanks for the info, gonna create better forms now!

  127. George says:

    Does anyone have any idea if it can be modified to store info into mysql and use it as a feedback slide-in.
    I will try to modify it for my website to catch feedback records.

  128. Marcus says:

    good idea george but for feedback you will need the contact form to auto slide-in without clicking any button.
    I am struggling to do it for but no results :((

    Can anyone help?

  129. ömer says:

    thank you ı like it;)

  130. sujay says:

    i was just looking for something like this thanks!!!!!!

  131. Tosin says:

    But how do we code it to send to email?

  132. pootoy says:

    yeah where does the email sent?

  133. choot says:

    fuck my ass plzzzzzzzz…..9639812679

  134. Ramfiz from Honduras says:


  135. aonestudy says:

    This demo have clear about all thing of understanding of jquary contact us page.

  136. Umar says:

    Dear All,

    i want to create contact us page sliding,similar to this example from right to left.

    my contact button location is vertical center & it is sticky button that moves with scroll bar position.

    if i click on this button it should slide from right to left.

    any help would be appreciated.

  137. leah says:

    Hi, sorry how do I set what email the contact form should email to???? :/ Please help! Thanks :) x

  138. waloetz says:

    thanks, very interisting for my web.
    I hope you succes, GBU

  139. sathianathan says:

    Thanks,I am very interisting for your website.

  140. Joseph Lane says:

    Wow !
    Thank you so much for writing this article and providing the source code.
    I will try it on a clients site that I am building.
    Its exactley the kind of thing they really like.

  141. domerr says:

    Thank for your sharing .. i use it at my site (click at my name, best view using FF) .. it seems working fine, but how can I put my email address as a message destination? Where will the message go? Thank you n regards

  142. Lahiru says:

    i have a problem….

    java script code is problem…plz help me…

  143. Allan says:

    PHP pls???

  144. fafa says:

    Here you will find free svripts with demonstration

    www 55points.blogspot com

Leave a Comment

About the Author