Twitter
RSS
It’s been a while since I wrote a tutorial and since I’m waiting for a couple of clients to get back to me I figured I might as well take this opportunity to do so.
In this very simple tutorial I’ll show you how to use jQuery to create a nice effect that you can use to slide in your contact form, for example, from above the page.
You can check out the demo here before we start so you know what we’re going to be doing.
You can also download a zip file containing all the files used in this tutorial.
Alright, let’s start by getting jQuery, if you don’t already have it. Go to www.jquery.com and grab the latest version of the library.
Now create your HTML document and add a div for the contact form. I’m giving it an id of “panel”, you can name it whatever you want but we’ll need an id so we can access it. Here is how my markup looks.
<div id="panel"> [INSERT YOUR CONTACT FORM HERE] </div>
Keep this div on top of all your other markup, just below your body tag.
I’ve just written “[INSERT YOUR CONTACT FORM HERE]” but this is obviously where you need to enter your markup for the contact form.
Great, now that you have your contact form ready we’ll soon be hiding it with display:none so that it’s hidden when the page loads. But before starting with the CSS let’s add a link that the users can click to slide the form in and out. Just like with the div we’re using as a container for the contact form, we’ll need an id on this link too. I’m also adding a class to the link so that I can change the class on the fly, when the form is out. Here is the markup I have used.
<a href="#" class="contact" id="contact-toggle">Contact</a>
I’m just placing the link below the contact form div, I’ll be floating it to the right once we start with our CSS, but you can place it wherever you want to, e.g. in you navigation.
This is all the markup I’m going to be using for this example. Here is the complete document, excluding doctype etc.
<html> <head> <title>jQuery Slide Contact Form</title> </head> <body> <div id="panel"> [INSERT YOUR CONTACT FORM HERE] </div> <a href="#" class="contact" id="contact-toggle">Contact</a> </body> </html>
Now let’s start with the CSS. I have created a stylesheet, named it “style.css” and saved it in a folder called “css” in the same folder as I have saved the HTML document above, I’ll be calling this folder the root folder from now. So, now I can link the stylesheet to the HTML document like below.
<link rel="stylesheet" type="text/css" href="css/style.css" />The first thing I have done, as I usually do, is get rid of the margins and paddings of the body element. I have also changed the font to 12px Verdana as I prefer it to the browsers’ default choice of font.
body {
margin:0px;
padding:0px;
font:12px Verdana;
}Next in my stylesheet are the styles for the contact form container div. The one we gave an id of “panel”.
#panel {
height:500px;
background-color:#322626;
color:#fff;
display:none;
}I gave my div a height of 500px. You can assign whatever value you require to fit your contact form here. I’ve also given it a background-color and a color. These values would obviously change according to your design, these are just the values I chose to use. The last line is an important one, setting display:none ensures that the contact form is hidden when the page loads.
Now I styled my link to look a little better than blue, underlined text.
.contact {
float:right;
width:150px;
height:40px;
margin-right:50px;
text-indent:-9999px;
background:#322626 url(../images/contact-sprite.gif) 0px -40px no-repeat;
}Most of this class is pretty self-explained.
Setting the “text-indent” to -9999px will place the link text way off the viewport, so we won’t see it but it’s still there incase CSS is turned off and also for accessibility purposes.
For the background I’m using a technique called CSS Sprites. If the background style isn’t making sense to you, you can read my tutorial on CSS Sprites.
You can grab the sprite image I created here if you want to use the same one whiles following. Save this image in a folder called “images” in your root folder.
We’re using sprites because our link has a hover and “active” state. The hover state is simply handled by CSS like this.
.contact:hover {
background:#322626 url(../images/contact-sprite.gif) 0px 0px no-repeat;
}Now for the “active” state, which will be used when the contact form is out, we’ll use jQuery to change the CSS class on the link. Here is the CSS for it, we’ll get to the jQuery bit in just a moment.
.contact-active {
background:#322626 url(../images/contact-sprite.gif) 0px -120px no-repeat;
}
.contact-active:hover {
background:#322626 url(../images/contact-sprite.gif) 0px -80px no-repeat;
}That’s all the CSS I’m using for this example, here is the complete CSS document I’m using.
body {
margin:0px;
padding:0px;
font:12px Verdana;
}
#panel {
height:500px;
background-color:#322626;
color:#fff;
display:none;
}
.contact {
float:right;
width:150px;
height:40px;
margin-right:50px;
text-indent:-9999px;
background:#322626 url(../images/contact-sprite.gif) 0px -40px no-repeat;
}
.contact:hover {
background:#322626 url(../images/contact-sprite.gif) 0px 0px no-repeat;
}
.contact-active {
background:#322626 url(../images/contact-sprite.gif) 0px -120px no-repeat;
}
.contact-active:hover {
background:#322626 url(../images/contact-sprite.gif) 0px -80px no-repeat;
}Now let’s get to the fun part. First make a copy of the jQuery file you downloaded and place it in a folder called “js” in your root directory. Rename your jQuery file to “jquery.js”.
Link the jQuery script to your HTML document like this.
<script type="text/javascript" src="js/jquery.js"></script>And below that we add our magical code to handle to slide effect.
<script type="text/javascript"> $(document).ready(function(){ $(".contact").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("contact-active"); return false; }); }); </script>
That’s it. Were you expecting this to be complicated?
$(".contact").click(function(){
. . .
});This means that when the element with id contact-toggle, our link, is clicked we want to run some code.
The code we want to run is…
$("#panel").slideToggle("slow");…which will make our div slide in/out.
I’ve also added the line…
$(this).toggleClass("contact-active");…which changes the class of our link. This is so our link can look different when the form is out.
return false;
This just makes sure our link doesn’t try to load a page.
That’s it. That’s all there is to it. So, basically, all you need to do is create a form, wrap it in a div. Give the div a height and set its display to none. Load in jQuery and add those 7 lines of jQuery code.
I hope you enjoyed this tutorial!
Very nice tutorial by jQuery….I want to appriciate the developer.
Nice one for the tutorial. It’s a cool effect.
Wow!! It’s very helpful for me.
Thanks.
Hi, I like tis tutorial and effect. I’m aplying this jQuery, but i have a problem with IE7, elemnts that have relative position in CSS. I don’t know if it only happens in ASPX. Do you know how can i fix it?
Hi Woofer,
Sorry for the late reply. I’ve been really busy with work.
What exactly is happening? If you run the demo in IE7 you’ll see that it works, so most probably you’ve missed something in your markup or stylesheet. If you are using ASPX there is a possibility that your code is adding some HTML that is messing things up for you. Have a look at the generated HTML (load the page in the browser and then view source) and see if you can find something wrong.
Good luck and let me know if you need any more help.
jquery effects are always welcome…
I am a newbie for jQuery. Thank you for you share.
Good info thanks for sharing with us.I am a newbie for jQuery, thanks for all the enthusiasm to offer such helpful information here.
Thanks man, i’ve been struggling to get my head around jquery. This is just what I have been looking for.
Just wanted to say what a brilliant turtorial.I really appreciated the explanations as to each step. I’m still a newbie to javascript and jquery and this was extremely clear and easy to follow and the code worked first time.
Many thanks
Excellent job. Although I’m having issues with ie8 and keep getting a javascript:void(0) error. Has anyone else had this problem?
Hi Adam,
Change
<a href=”javascript:void(0)” class=”contact” id=”contact-toggle” rel=”nofollow”>Contact</a>
to
<a href=”#” class=”contact” id=”contact-toggle” rel=”nofollow”>Contact</a>
and you should get rid of that issue.
I’ll update the post.
Just perfect…
nice slider, but I want to do the same but in my case the slide would be in the bottom of my page and will be move down to up. It’s possible?
Hi Farid,
Thanks with the help with the button. I’m working on ie7 now and a form that I have positioned inside the panel disappears when the panel slides down. If you have 2 mins to see if you can spot the cause of the issue, I’d be incredibly grateful. No worries if not, it’s only ie7 after all! Live link is http://www.yourlifestyleangel.com
Hi Adam,
Seems like it might be the “IE7 Disappearing Content Bug”. Try adding a width, 480px like its parent should be good, to <div id=”wpcf7-f165-t1-o1″ class=”wpcf7″> and probably also to the <form> (since your reset styles are adding a background property to it).
Let me know if that solves it.
Hi Farid,
Thank you so much for your reply. Unfortunately I still have the issue. I think it’s something to do with the fact that I had to add a position:relative to the #panel otherwise it wouldn’t show up over the parallax generated “background” images.
Hopefully I’ll figure out a solution with Google’s help.
I think I may have solved it. I added zoom:1 to the #panel and the form seems to stay put. Thank you once again for your help Farid and for a great tutorial.
Thanks for sharing
lovely tutorial 
Cool, very cool tutorial thanks a lot. Judging your portfolio you are real Pro developer. Were did you get so professional education or it`s just because of your work experience. Just Interesting.
so nice, many thanks