Contact us pages are usually boring static pages with a form, not very exciting so what we’re going to do is place the contact us form at the top of the page and create a button that slides out and reveals the form when clicked. All with the help of our little friend, jQuery.
View the Demo Download Files (.zip)
First we start of with the necessary file includes:
<link rel="stylesheet" href="contact.css"/>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script src="contact.js" type="text/javascript"></script>
We’re using jQuery 1.3 hosted by Google, the jQuery easing plugin and our own custom code in the contact.js file. Make sure that the jQuery library comes first, followed by the plugin(s) and finally your code that makes the magic happen.
Let’s set the height of the contactArea div to the desired height in the css. We’re going to hide it with jQuery so that anyone with javascript turned off will still see the form and be able to use it.
#contactArea { height: 225px; }
Of course we need to start off with the $(document).ready() function so that jQuery knows what code to load and use.
$(document).ready(function() {
// put all your jQuery goodness in here.
});
The first line of code is going to be the code mentioned earlier to hide the contactArea div. Here we are basically telling jQuery to set the height of #contactArea to 0.
$(document).ready(function(){
$("#contactArea").css('height', '0px');
});
Right, time to tell jQuery to do something when the button is clicked. Obviously we want the contact us area to slide out from the top of the page to reveal the form. We will also want to hide the area when the button is clicked again. This is achieved by using jQuery’s built-in toggle function.
$(document).ready(function(){
$("#contactArea").css('height', '0px');
$("a.contact").toggle(
function () {
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
},
function () {
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
}
);
});
Basically what is happening here is that the toggle function is toggling between two different functions. One displays the full height of #contactArea and the other sets the height to 0, hiding it. By the simple use of .animate and setting the duration (milliseconds), jQuery animates between the two height values. The easeOutBounce value ties in with the jQuery easing plugin that adds a bit of a fun element that keeps things interesting. I’ll let you view the demo to see what it does.
UPDATE: See Joel’s comment below on how to prevent a jolt effect that happens if the height of the page becomes taller than the browser window, causing the scroll bar to appear during the animation and vice versa.
This was published just in time – I was going to be building one of these in a few days, Thanks!
One small thing I noticed on the demo. You may want to add “overflow-y:scroll;” to the html of the document. Or (because that’s css3) set the height to 101% to ensure you don’t get a jolt on browsers which remove the scroll bar.
Thanks again, Joel
I didn’t know about the overflow-y: scroll property. I’ve implemented that into the demo just because I love CSS3.
Also, the height: 101% is so simple but so effective.
Thanks Joel.
great job and work really nice effect.
Great idea for contact form!! Thanks for sharing!
I like the bounce effect of the drop down window. Very nice.
Really nice I hava it working, but I wonder if anyone could tell me how to keep it open so the user can read validation error messages or even read a “your message has been sent” most forms will have that type of function built in and for that we would need the form to remain open.
Thanks,
Ric
This looks great! However the zip file seems to have gone missing…can you either re-upload or email it to me?
Thanks!
Hey Ben, I’ve corrected the link for the zip file so it’ll work now.
Let me know if you use any of this in a project. I would love to see what people do with it.
I sure will!
Thanks Tom!
Thanks for this one…such a big help
Great tutorial! Any ideas on how to get the labels to go away in IE6? I’m using this on a clients site and the labels are visible. Thanks!
This works great but in ie7, the lables are showing through and my alignment is messed up, which I can figure out, but how do I hide the lables? Works great in every other browser!
http://donkeyball.cog-inc.com/
Really like this but any chance I can find something similar as WP plugin and won’t break my theme?
Awesome man. I recently built something like this myself and made a jquery plugin for it(my first one). Check it out here, i’d be curious to see what you all think of it:
http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/
Good work Will P. I’ll be sure to check out your plugin if I need to use something like this in the future.
Tom, thanks for this one, will sure let you know when i use this.
Willy P. O well, your is also a nice one.i just checked it out but i think it would do well to package both the implementation and the js file in one compressed file.
thanks guys.
Hi, nice plugin, I’m also having the same problem as Kristin, my labels keep showing through when its meant to be hidden in IE7. Do you know how to fix this?
Thanks
Very nice! I am going to have to use this for sure!
to stop the labels from showing through in ie7, remove the position property from those elements (use margin instead).
for anyone having the problem in ie7 that the form does not push down all elements below it, you need to trigger haslayout on the div(s) that should move down. the best way to do this is to add zoom: 1; to the css for the element(s).
both of these fixes apply to this contact form implementation and to general use of jquery toggle.
The JQuery contact form is fantastic.
You wouldn’t happen to have any php code I could use to complete the form would you?
Thanks
Andy