Creating a Slide-in jQuery Contact Form

by Janko Jovanovic on 10th October 2008 with 193 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.



                
                    
                        Name *
                        
                        Email address *
                        
                        Your message *
                        
                        
                        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:

 #contactFormContainer
            {
               position:absolute;
               left:600px;
               float:right;
            }
            #contactForm
            {
               height:277px;
               width:351px;
               background-image:url(’bkg.jpg’);
               display:none;
            }
           
#contactForm fieldset
            {
               padding:30px;
              
border:none;
            }      
            #contactForm label
            {
               display:block;
               color:#ffc400;
            }      
            #contactForm input[type=text]
            {
               display:block;
               border:solid 1px #4d3a24;
               width:100%;
               margin-bottom:10px;
               height:24px;
            }  
            #contactForm textarea
            {
               display:block;
               border:solid 1px #4d3a24;
               width:100%;
               margin-bottom:10px;
            }  
            #contactForm input[type=submit]
            {
               background-color:#4d3a24;
               border:solid 1px #23150c;
               color:#fecd28;
               padding:5px;
            }                
            #contactLink
            {
               height:40px;
               width:351px;
               background-image:url(’slidein_button.png’);
               display:block;
               cursor:pointer;
            }
            #messageSent
            {
               color:#ff9933;
               display:none;
            }

Let’s slide folks!

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

           $(document).ready(function(){
                $(”#contactLink”).click(function(){
                    if ($(”#contactForm”).is(”:hidden”)){
                        $(”#contactForm”).slideDown(”slow”);
                    }
                    else{
                        $(”#contactForm”).slideUp(”slow”);
                    }
                });
            });
            function closeForm(){
                $(”#messageSent”).show(”slow”);
                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

193 Comments

Jason Kershaw

This is great… seen it done on lots of sites and always wondered how it’s done. Thanks!
http://www.rudibela.com Sasa Bogdanovic

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.
http://k7waterfront.org Steven

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…
Alan

I wonder how long Steven stumbled around in that big form to figure out what to click on?
http://www.jankoatwarpspeed.com Janko

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?
http://www. mbh

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!
http://www.digitalslrphotos.com Dave Adams

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.
http://www.defossesdesign.com Nate

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).
?
http://www.jankoatwarpspeed.com Janko

@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.
http://www. Andy

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.
http://www. Moris

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
Bret Truchan

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

Great stuff. I think I’m in love with the internet.
http://konyvtar.info Andrisi

Unfortunately does not work in that stupid IE6. :-(
http://www.jankoatwarpspeed.com Janko

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 :-)
http://www. matei

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
http://www. matei

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
http://www. matei

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
http://www. matei

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
http://www. matei

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
http://www. matei

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

What is this code
http://www. matei

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

What is this code
http://www. matei

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

What is this code
http://www. matei

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

What is this code
Aaron

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!!!
Aaron

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

$(“.content”).click(function(){
$(“#contactForm”).slideUp(“fast”);
});

But there is probably a better way to do this.
http://www.paulocholla.org Paulo Cholla

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

What is this code
Brigthon web

Very nice form, just not validated:(
http://www.lunamedia.co.uk Luke

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 :)
http://www.lunamedia.co.uk Luke

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.
http://www.ascentdg.com Chris

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:
$(”#contactLink”).click(function(e){
e.preventDefault();
if ($(”#contactForm”).is(”:hidden”)){
$(”#contactForm”).slideDown(”slow”);
}
else{
$(”#contactForm”).slideUp(”slow”);
}
});
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.
prawin

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

nice work dud
Geany

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.
http://kristalinchavdarov.net/ krchavdarov

nice work!
http://realestate.movemaine.com Jason

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

I’m having an issue implementing this correctly.
Pingback: Slide-In jQuery Contact Form | sastgroup.com
Pingback: Slide-in jquery contact form
Milo

How about recognizing the open and closed states, for adding specific styles to the button?
Pingback: Form contattaci a comparsa | Voci dal web
alibaba

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
Pingback: Useful Javascript, jQuery, and AJAX Tutorials and Resources - Massive Link Collection Part #1 | Joren Rapini.com Weblog
Ray

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.
Pingback: 120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine
yoyo

but how to add real code to make it work?

need php or something?

thx
http://www.sohointeractive.com SohoInteractive

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

Thank you for the great tutorial

T.
http://www.liambrazier.com Liam

Looks great but as others have said; how do you actually make it send the message?
http://www.liambrazier.com Liam

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?
http://www.thebigpie.com Abdel

cool effect. I really love it.
thanks
http://hbncdesign.com Charles

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.
http://www.jankoatwarpspeed.com Janko

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.
http://www.uuyy.com joy

mmnm.,.,mm,mm.,
m,,m,
http://www.dewful.com CNorris

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.
http://www.stormink.net Ian Storm Taylor

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.
name

test
Jonathan

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?
Thanks
Jonathan

That’s OK, I’ve find it.
jo

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

hellow
http://metar.just alan

Endocrines are tasty.
http://www.garethjoyce.co.uk/ web design stalker

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

Thanks for a great demo.
teo

where have to change the email¿???
Pingback: jQuery AJAX Validation Contact Form with Modal + Slide-in Transition | The Blog of Joren Rapini
Pingback: 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets « Photoshop.vn – Your Design Resource
croustichoc

nice, but isn’t there a php file missing somewhere ?
http://link Stinky13

LS, The wedding couple hoochie-dance was cute. ,
http://link BadGirl25

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

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!

$(document).ready(function(){

$(“#contactLink”).click(function(e){
e.preventDefault(); //Stops normal <a href behaviour
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
}
else{
$("#contactForm").slideUp("slow");
}
});

});
Pingback: Adam Bourg » 9 awesome Jquery plugins
http://www.stumbleupon.com/stumbler/med-brother/ alaodia

Could you spare me a moment? buy cheap nolvadex http://www.stumbleupon.com/stumbler/med-brother/ 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!
http://wiki.answers.com/Q/User:Med-help amerydia

Good evening! buying clomid line http://wiki.answers.com/Q/User:Med-help 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.
Maria

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!
Pingback: Think2free.com » 50 must know web developer techniques
Pingback: Think2free.com » 50 must know web development techniques
http://www.indialike.com indialike

Very nice and useful tutorials to web designers,
Thanks for posting.
Pingback: 60+ Must Have jQuery Toolbox | tripwire magazine
Pingback: Slide-in jQuery Contact Form
Pingback: +30 jQuery Eklentisi ~ Metin METE Resmi Web Sitesi — The Metin METE's Official Website
Pingback: +30 jQuery Eklentisi « Bay Bedava – Netten Başlıklar
Tony

How can i make this slide up instead of down?
http://www.fundybuzz.com Williams

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

Thanks Mate.
http://www.encountersnepal.com Sabin

Nice script. So easy to impliment.

thanks.
http://vipgiyim.com iç giyim

This is great… Very thanks
Pingback: JQuery uygulamaları « Blog Yaşamı
Pingback: JQuery Uygulamaları « Birebir Paylaşım
Pingback: 37 Fenomenales jQuery Plugins y Demos para Desarrolladores | Proyecto Aurora
Pingback: 25 jQuery Tutorials for Creating and Working with Forms « Freelance Web Designer from Hyderabad, India.
http://bioeek.com Jean

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 :)
Pingback: 25 jQuery Tutorials for Creating and Working with Forms | Son Of Byte - Web Design & Development
Rishabh

But How Do we put our email so that the message is really sent to our email
http://www.ilovebulgaria.ru Petko

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.
Pingback: jQuery Resources for One-Page Portfolios | pro2go Designs Blog
Steven

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,

Steven
Pingback: Creating a Slide-In jQuery Contact Form | Design Shack | RefreshTheNet
http://www.crazytarget.com/ Owen

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

To fix the IE issue add the following:
George

<!–

–>

Remove the comments
George

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=”http://www.w3.org/1999/xhtml”
http://www.3turtlestudios.com 3TurtleStudios

sweet… and my site uses one exactly like this one!!
http://raredriver.blogspot.com/ Samson Delila

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

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!

Radulph
http://www.lykc.co.uk LYKC

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 http://www.lykc.co.uk Thanks again for the cool effect. Kudos!
Jacob

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.
Pingback: 95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets | tripwire magazine
Pingback: 50+ jQuery Plugins for Form Enhancements | tripwire magazine
Pingback: 87 great jquery example « Yaniar Prayogo's Blog Of Technology And Programming
http://www.gowebbaby.com wordpress designer

Great tutorial.
http://world-4-free.blogspot.com vishal

sir,
its not working in my blogger blog…. i want really want to put it on my blog
kindly e-mail me:
vishalmeham2@gmail.com
thanx in advance
Shay

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!
Pingback: jQuery Resources for One-Page Portfolios | Vandelay Design Blog
LeoTorreZ

i will add this code for use ajax on it:

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

yeah my english isnt very good
LeoTorreZ

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

$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 = ‘leandrotorrez@msn.com’;
$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)){
header(“Location:?page=error&type=ok”);
}
}
echo ”;
LeoTorreZ

well i cant post the code
http://imagebymac.com bobby mac

how did ya’ll add the validation? where’s the email setting?
http://pokiiii.blogspot.com/ Pokii

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 :)
http://pokiiii.blogspot.com/ Pokii

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 :(
james

how i can click the form from other button

like form the link home the will sroll down how i can do dat?
Pingback: 10 Amazing Ajax Css Form Tutorials
http://www.regionad.co.uk Region Ad

Hello.
We invite you to post your free classified on http://www.RegionAd.co.uk 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.
Pingback: Creating a Slide-Down jQuery Contact Form | HTMLpl.us
http://margotsheehan.com margot sheehan

Thanks for this. I’m using this as the basis of an email form that sends the client a simple html itinerary.
http://downloadingisfree.blogspot.com imm0

how the hell can i add this on blogger???help??
http://www.tipstolosingweight.net Bradford Glascock

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.
http://www.squidoo.com/how-can-i-earn-money Jonas Rickard

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.
Pingback: 50 jQuery Form Plugins, Tutorials and Resources | webdesign14.com
http://CS CA

электронные книги купить цены
Thomas

how to define a email on this?
Erika

This example is awesome! Thanks for sharing.
Bill

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

You should put at the top of page, This will not send a e-amil !!! $#@%$^&
Pingback: Slideout Panel mit JQuery | i-mill
http://www.sms-connect.blogspot.com keyuri

Amazing jQuery
http://www.boostinternetmarketing.com WebDesignerSEO

Great example.. jQuery is always a must in web design
http://emailletterhead.blogspot.com/ Email Letterhead

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

where should I put my e-mail in this script pls help
http://asbestoscancermesotheliomainfo.com/ asbestoscancermesothelioma

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

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…
VB078

I have exactly the same question …
SooSoooon
http://symptomsofbenzodiazepinewithdrawal.blogspot.com/ symptomsofbenzodiazepinewithdrawal

Your source code makes me easy to understand. Thank you very much.
http://n/a Liam.B

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!
http://n/a Liam.B

whoops i meant something like this
http://n/a Liam.B

?PHP
$email = $HTTP_POST_VARS[email];
$mailto = “contact@winetastingatyourhome.com”;
$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);
?
http://datastoragesoftware.us/ Data Storage Software

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

how do I get this form contact Horizontally (fishing line)?
http://computerserverrack.blogspot.com rack

I like php source code. thank you for this post, I get a good idea from you.
http://www.cheapfrontlineplusfordogs.net/ Frontline Plus

Your content makes me easy to understand. Thank you very much.
http://WWW.PachingCentral.NET Ashkan Norouzi Tafreshi

sa
LazaBre

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
http://www.futso.pl Mark

This is what i neeed.
Pingback: jQuery Resources for One-Page Portfolios | Revolução21
Dawood

I added it on my site and thats with blogger check it out http://agarwoodnews.com
Tim

Hey I’ve adapted this form to work with my menu adapted from here: http://snook.ca/archives/javascript/jquery-bg-image-animations
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 http://www.2shared.com/fadmin/20765973/ab8ee191/tieche.zip.html
Thanks ever so much for any assistance
khai

Thanks, very cool script :)
http://www.ccwebsites.net Elvin Xhimitiku

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

ONE ISSUE = FOR EVERYBODY THAT WANT TO INTEGRATE THIS INTO A DRUPAL SITE

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

Elvin
Drupal in Albania
Erik

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.
http://hourb.com hourb

Great script i liked it and going to use it in my website
http://tomhelmandpartners.com Wordpress Website Designer

The article is informative.I have got many knowledge from it.However it is a very brilliant post.WordPress Website Designer
http://www.dewiflorist.com herry

thank u. GOD BLESS YOU
Pingback: 25 jQuery Tutorials for Creating and Working with Forms | Lake of Web
http://www.atwebpresence.com Web Design

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:
http://www.atwebpresence.com/blog/web-design/webplus-tutorial-jquery-tab-slideout-contact-form/

Thanks
Pingback: Creating a Contact Form with Modal + Slide-in Transition « Tournas Dimitrios
bob

doesnt work for me, more explanation needed for beginners please
Oscar

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.
http://pricesandreviews.in Mike

Thanks for the info, gonna create better forms now!
http://www.pcburner.com/ George

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 http://www.pcburner.com/ to catch feedback records.
http://www.softwaretag.com.com/ Marcus

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 http://www.softwaretag.com but no results :((

Can anyone help?
http://www.omeripek.com.tr ömer

thank you ı like it;)
http://www.mythrissur.org sujay

i was just looking for something like this thanks!!!!!!
Pingback: Can’t Miss Tutorials for Graphic Designers | Randomness
Pingback: 10 Simple and Effective jQuery Contact Form Styles | InspireMonkey - Neverending Web Curiosity!
Tosin

But how do we code it to send to email?
Pingback: 10 Simple and Effective jQuery Contact Form Styles | Design Web Development Joomla Magento Wordpress Prestashop blog posts
pootoy

yeah where does the email sent?
http://www.songs.pk choot

fuck my ass plzzzzzzzz…..9639812679
Ramfiz from Honduras

Thanks.
http://www.aonestudy.com/php/php_home.aspx aonestudy

This demo have clear about all thing of understanding of jquary contact us page.
http://www.mobitsolutions.com Umar

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.
http://none leah

Hi, sorry how do I set what email the contact form should email to???? :/ Please help! Thanks :) x
Pingback: 20+ Simple and Free jQuery HTML Contact Form Plugins | Greepit
http://www.waloetz.com/ waloetz

thanks, very interisting for my web.
I hope you succes, GBU
http://www.buytemplatedesigns.com sathianathan

Thanks,I am very interisting for your website.
http://designshack.net/ ggg

rtr
http://www.searchboostmarketing.com Joseph Lane

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.
http://newsnetwork.me domerr

Hello,
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
Lahiru

i have a problem….

java script code is problem…plz help me…
Pingback: widget / okienko : sugestia, czego brakuje, itp
Pingback: 30个精心设计的有用的导航菜单教程 | 我们爱网页设计
Pingback: 30个精心设计的有用的导航菜单教程 | 我们爱网页设计
Allan

PHP pls???
fafa

ok
fafa

Here you will find free svripts with demonstration

www 55points.blogspot com
Pingback: 40 Best Free jQuery Login Registration and Contact Forms

Membership

About the Author

Design Shack — Web Design Gallery, Articles & Community