Creating a Slide-in jQuery Contact Form
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class=”box”> <div id=”contactFormContainer”> <div id=”contactForm”> <fieldset> <label for=”Name”>Name *</label> <input id=”name” type=”text” /> <label for=”Email”>Email address *</label> <input id=”Email” type=”text” /> <label for=”Message”>Your message *</label> <textarea id=”Message” rows=”3″ cols=”20″></textarea> <input id=”sendMail” type=”submit” name=”submit” onclick=”closeForm()” /> <span id=”messageSent”>Your message has been sent successfully!</span> </fieldset> </div> <div id=”contactLink”></div> </div> <div class=”header”> <h1> Company logo</h1> </div> … </div> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | #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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(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!
This is great… seen it done on lots of sites and always wondered how it’s done. Thanks!
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.
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…
I wonder how long Steven stumbled around in that big form to figure out what to click on?
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?
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!
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.
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).
?
@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.
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.
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
Hello! It could just be me being dumb, but do you have an extra closing DIV tag in your demo above?
Great stuff. I think I’m in love with the internet.
Unfortunately does not work in that stupid IE6. :-(
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 :-)
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
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
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
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
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
Note: You can make this form fully functional by adding validation and some real code that sends the email.
What is this code
Note: You can make this form fully functional by adding validation and some real code that sends the email.
What is this code
Note: You can make this form fully functional by adding validation and some real code that sends the email.
What is this code
Note: You can make this form fully functional by adding validation and some real code that sends the email.
What is this code
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!!!
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.
Note: You can make this form fully functional by adding validation and some real code that sends the email.
What is this code
Very nice form, just not validated:(
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 :)
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.
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.
In the above code, i dont know how the slide initially in up . Iam new to jquery, can any one explain
nice work dud
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.
nice work!
Anyone have a full working version, actual email submission & everything?
I’m having an issue implementing this correctly.
How about recognizing the open and closed states, for adding specific styles to the button?
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
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.
but how to add real code to make it work?
need php or something?
thx
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.
Looks great but as others have said; how do you actually make it send the message?
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?
cool effect. I really love it.
thanks
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.
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.
mmnm.,.,mm,mm.,
m,,m,
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.
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.
test
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
That’s OK, I’ve find it.
Great thanks….
I know this sounds daft but where can I get some code from so that the form works/sends?
many thanks!
hellow
Endocrines are tasty.
This is really nice…does it work in IE6? Just wondering as I need something like this that does!
Thanks for a great demo.
where have to change the email¿???
nice, but isn’t there a php file missing somewhere ?
LS, The wedding couple hoochie-dance was cute. ,
And then, allegedly, Roethlisberger blocked her exit and raped her. ,
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");
}
});
});
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!
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.
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!
Very nice and useful tutorials to web designers,
Thanks for posting.
How can i make this slide up instead of down?
I have done to one of my client websites, it is working.
Thanks Mate.
Nice script. So easy to impliment.
thanks.
This is great… Very thanks
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 :)
But How Do we put our email so that the message is really sent to our email
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.
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
very nice script,works perfect on my site,thanks!
To fix the IE issue add the following:
<!–
–>
Remove the comments
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”
sweet… and my site uses one exactly like this one!!
Very nice tuts for designing a form with jquery. Very easy to follow and learn, even for newbie like me… Good work!
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
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!
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.
Great tutorial.
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
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!
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
if anyoneneed heres a (no tested jet) code in php for ajax with validation:
$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 ”;
well i cant post the code
how did ya’ll add the validation? where’s the email setting?
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 :)
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 :(
how i can click the form from other button
like form the link home the will sroll down how i can do dat?
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.
Thanks for this. I’m using this as the basis of an email form that sends the client a simple html itinerary.
how the hell can i add this on blogger???help??
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.
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.
электронные книги купить цены
how to define a email on this?
This example is awesome! Thanks for sharing.
I spent 1/2 a day on this thing and it wont send email ! What good is that?
You should put at the top of page, This will not send a e-amil !!! $#@%$^&
Amazing jQuery
Great example.. jQuery is always a must in web design
thank you very much. it’s a nice content. I keep to use skill.
where should I put my e-mail in this script pls help
I am currently studying this issue is just. Thank You!!!
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…
I have exactly the same question …
SooSoooon
Your source code makes me easy to understand. Thank you very much.
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!
whoops i meant something like this
?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);
?
thank you very much. it’s a nice source code
how do I get this form contact Horizontally (fishing line)?
I like php source code. thank you for this post, I get a good idea from you.
Your content makes me easy to understand. Thank you very much.
sa
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
This is what i neeed.
I added it on my site and thats with blogger check it out http://agarwoodnews.com
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
Thanks, very cool script :)
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
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.
Great script i liked it and going to use it in my website
The article is informative.I have got many knowledge from it.However it is a very brilliant post.WordPress Website Designer
thank u. GOD BLESS YOU
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
doesnt work for me, more explanation needed for beginners please
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.
Thanks for the info, gonna create better forms now!
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.
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?
thank you ı like it;)
i was just looking for something like this thanks!!!!!!