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:

 #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

196 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

  • Pingback: 30 Best Free jQuery Login Registration and Contact Forms - Neweb

  • Pingback: 30个精心设计的有用的导航菜单教程 — 诸葛藏藏的博客

  • Pingback: 30 Best Free jQuery Login Registration and Contact Forms | jQuery Mobile, jQuery Plugins, jQuery Tutorials & more in jQuery4U.NET

Subscribe
Membership
About the Author