Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. A lot of different techniques went into this, and I have a few people/places to thank for some of the original code that inspired my final product: primarily Design Shack for their tutorial on creating a slide-in contact form with ajax, Zachstronaut for his code on scrollable same page links (used all over my site, but most effectively on the contact link in my footer), and Yens Design for a quick how-to on creating the modal pop-up background darkening effect (surprisingly extremely easy to do with jQuery).
All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.
For a demo of what we are creating you need not go any further than the contact form at the top of this website, as well as the contact link in the footer, or you can go here. I’ve packaged all the files for your easy editing and applying to your own personal needs (please just don’t reuse my images. . . that would be a bit arse-like of you). I did include all of the same styling that I used on this form, to make it easier for me to write this tutorial and just in-case someone wanted to peak into how I pulled off some of the CSS.
The HTML:
<div class="container">
<div id="contactFormContainer">
<div id="contactForm">
<div class="loader"> </div>
<div class="bar"> </div>
<form name="cform" class="contactForm" action="mail.php" method="post">
<p>Talk to me about anything. If you’d like to work with me, or <br />
even if you just need a hug, I’ll get back to you shortly.</p>
<div class="input_boxes">
<p>
<label for="name">Name</label>
<span class="name-missing">Please enter your name</span><br />
<input type="text" value="" id="name" name="name" />
</p>
<p>
<label for="e-mail">E-mail</label>
<span class="email-missing">Please enter a valid e-mail</span><br />
<input type="text" value="" id="e-mail" name="email" />
</p>
<p>
<label for="message">Message</label>
<span class="message-missing">Say something!</span><br />
<textarea cols="" rows="" id="message" name="message"></textarea>
</p>
</div>
<input type="submit" onfocus="this.blur()" value="Submit Form" name="submit" class="submit" />
</form>
</div>
<div class="contact"> </div>
</div>
</div>
<div id="backgroundPopup"> </div>
I’m going to assume you know what you are doing with HTML. If you don’t, well then. . . this is NOT the post to start with! Moving on. . .
The PHP:
<?php
//declare our variables
$name = $_POST['name'];
$email = $_POST['email'];
$message = nl2br($_POST['message']);
//get todays date
$todayis = date("l, F j, Y, g:i a") ;
//set a title for the message
$subject = "Message from Your Website";
$body = "From $name, nn$message";
$headers = 'From: '.$email.'' . "rn" .
'Reply-To: '.$email.'' . "rn" .
'X-Mailer: PHP/' . phpversion();
//put your email address here
mail("youremail@yourdomain.com", $subject, $body, $headers);
?>
<!--Display a thankyou message in the callback -->
<div id="mail_response">
<h3>Thank you <?php echo $name ?>!</h3><br />
<p>I will answer your message soon as possible.</p><br />
<h5>Message sent on: </h5>
<p><?php echo $todayis ?></p>
</div>
Our mail.php breakdown:
- The comments on this more or less speak for themselves. First we are getting the variables that are passed to the file from the javascript (NOT the HTML, that’s why the ID’s of the inputs don’t match up. I had to change email to e-mail so that it didn’t conflict with the comment forms on the blog posts). Also, the function nl2br() helps to replace any new lines that the user enters onto the ‘message’ textarea with line breaks so that you get a properly formatted e-mail.
- Next, we define variables for the date, subject, body, and headers for the standard PHP mail() function.
- After the mail() function is finished executing, you will see in our javascript that we will replace the form & loader with #mail_response so that the user gets some comfy feedback that we got their message! I see way too many folks leave out user confirmation on their contact forms, and that is just plain silly. Don’t leave your users in the dark!
- I would also recommend putting some form of PHP spam protection in here as well. Another post, another time perhaps.
The CSS:
.container {
width:960px;
margin:0px auto;
position:relative;
}
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */
#contactFormContainer {
position:absolute;
left:368px;
z-index:12;
}
/* Hides the whole contact form until needed */
#contactForm {
height:289px;width:558px;
background:#515151 url(../images/birdy.jpg) no-repeat 241px 11px;
border:1px solid #929191;
display:none;
padding:7px 12px;
color:#fff
}
/* Loading bar that will appear while the ajax magic is happening */
.bar{
display:none;
background:url(../images/ajax-loader.gif) no-repeat center;
margin-top:100px;
height:40px; width:230px;
}
/* This hides the form validation alert messages until needed */
#contactForm span {
display:none;
font-size:9px;
line-height:10px;
padding-left:6px;
color:#f5c478;
}
/* Some styling for the contact button */
#contactFormContainer .contact {
height:47px; width:211px;
background:url(../images/contact_me.png);
position:absolute;
left:368px; bottom:-44px;
cursor:pointer;
}
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
height:100%; width:100%;
top:0; left:0;
background:#000;
z-index:11;
}
I did not include the CSS styling that I used for appearances, only what was necessary to get this functional. For everything that I used to create the form, please download the source files.
And our CSS rundown / explanation:
- .container is just used for positioning everything in the middle of the page, and the position:relative property lets us absolute position the elements inside of the div.
#contactFormContainer { position:absolute; left:368px; z-index:12; }#contactFormContainer is absolute positioning the whole contact form, this div is also necessary so that the .contact button moves with the contact form, and the z-index puts it above the darken div.- #contactForm Contains the form as well as all other content inside of it (loading bar, background, etc.) and is hidden until the .contact button is pressed.
- The spans are hidden until a user tries to submit the form without properly filling out all of the fields. You will see why each one has its own class when we take a look at the scripting.
#backgroundPopup{ display:none; position:fixed; _position:absolute; height:100%; width:100%; top:0; left:0; background:#000; z-index:11; }#backgroundPopup is placed at the bottom of the page in the HTML (it needs to be OUTSIDE of any container or else it won’t work right in IE6). This is the div that will appear and have its opacity changed when the .contact button is pressed. Make sure its z-index is above everything, but below the #contactFormContainer.
The Javascript:
PLEASE NOTE: The following javascript is a little clunky and not very well optimized. For a much cleaner version of the validation portion of this script, please visit my post The Simple, Quick, and Small jQuery HTML Form Validation Solution.
$(document).ready(function(){
//function for contact form dropdown
function contact() {
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
$("#backgroundPopup").css({"opacity": "0.7"});
$("#backgroundPopup").fadeIn("slow");
}
else{
$("#contactForm").slideUp("slow");
$("#backgroundPopup").fadeOut("slow");
}
}
//run contact form when any contact link is clicked
$(".contact").click(function(){contact()});
//animation for same page links #
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($(this.hash).length) {
$(this).click(function(event) {
var targetOffset = $(this.hash).offset().top;
var target = this.hash;
event.preventDefault();
$('html, body').animate({scrollTop: targetOffset}, 500);
return false;
});
}
}
});
//submission scripts
$('.contactForm').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('e-mail');
if (!filter.test(email.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.name.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.contactForm').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('mail.php',{name:$('#name').val(),
email:$('#e-mail').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
//only need force for IE6
$("#backgroundPopup").css({
"height": document.documentElement.clientHeight
});
});
Oh joy, lots and lots of javascript explainin’ to do:
- $(document).ready(function() {}); is the necessary jQuery function required to kick off anything that runs after the page is loaded. All our code will be placed inside of this.
function contact() { if ($("#contactForm").is(":hidden")){ $("#contactForm").slideDown("slow"); $("#backgroundPopup").css({"opacity": "0.7"}); $("#backgroundPopup").fadeIn("slow"); } else{ $("#contactForm").slideUp("slow"); $("#backgroundPopup").fadeOut("slow"); }Here we are defining the function contact that will run each time a link with the class .contact is pressed, using jQuery’s selectors:$(&quot;.contact&quot;).click(function(){contact()});This allows us to give that class to any link to execute the function that opens the contact form. What this function is doing is first determining whether the form is hidden or not, and if it is then it will slide the form down, and then change the opacity of the #backgroundPopup div as well as fade it in.$('a[href*=#]').each(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname && this.hash.replace(/#/,'') ) { var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']'); var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; if ($(this.hash).length) { $(this).click(function(event) { var targetOffset = $(this.hash).offset().top; var target = this.hash; event.preventDefault(); $('html, body').animate({scrollTop: targetOffset}, 500); return false; }); } } });This script grabs any anchor on the page with a same page link (e.g. #something), determines the distance between it and the destination, and then creates a scrolling transition. You can edit the speed at which it transitions by changing the ‘500′ on the line $(’html, body’).animate({scrollTop: targetOffset}, 500);.$('.contactForm').submit( function(){ var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; var email = document.getElementById('e-mail'); if (!filter.test(email.value)) { $('.email-missing').show(); } else {$('.email-missing').hide();} if (document.cform.name.value == "") { $('.name-missing').show(); } else {$('.name-missing').hide();} if (document.cform.message.value == "") { $('.message-missing').show(); } else {$('.message-missing').hide();} if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){ return false; }I know there is a better way of doing this, but in the interest of time I quickly put this together. This is a nice long if statement that checks each required input field on the form to see if they are filled in properly or not. Doing it this way is definitely not a problem if you only have a couple of required fields, but if you have several than this will need to be rewritten. There are jQuery plugins out there that offer much more extensive validation functionality, but it was not necessary for what I wanted to accomplish with this simple form. If the field in question is not filled in correctly, then the corresponding error message (those spans we made earlier) is shown and return:false; stops the form from being submitted.if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) { //hide the form $('.contactForm').hide(); //show the loading bar $('.loader').append($('.bar')); $('.bar').css({display:'block'}); //send the ajax request $.post('mail.php',{name:$('#name').val(), email:$('#e-mail').val(), message:$('#message').val()}, //return the data function(data){ //hide the graphic $('.bar').css({display:'none'}); $('.loader').append(data); }); //waits 2000, then closes the form and fades out setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000); //stay on the page return false; } });If all of the fields are correct, then we run the script that hides the form, shows the loading bar until the ajax variable passing to the mail.php script is complete, and then set a timer that waits ‘2000′ until it closes the whole thing. If you’d like to demo this action, please do not use the form on my website unless you want to say something to me; you can demo the form that sends a message to nowhere here.
Keep in mind, this was one of my first forays into really screwing around with jQuery/javascript using some of my own code, so I’m sure things are not perfect, and a veteran may look at some of my scripting with a bit of “wtf?” on their face. If you do get that face, please let me know of a more optimal way of doing something, and I will definitely update the code and give you credit. If you have any questions, as usual please leave them in the comments here!
Thanks for this one, it’s gunna be really useful on an upcoming project! Now we just need those swirls!
Great Technique - How broad do you think it will span cross browser? As much as I absolutely hate IE6 some of my clients still run on it.
I’ve tested this tutorial on IE6-8, Firefox 3.0, Google Chrome, Opera 9.5, and Safari 3.2.1, which should just about cover it.
fantastic tutorial! I will definitely use it in future projects..I know it’s not much, but i put the link to your article on my blog..
cheers!
Thanks, every little bit helps!
Great tutorial and a nice effect. When curious people click on the contact then change their mind it would be nice to be able to remove the form by clicking outside the area. Lots to learn here. Thanks!
Good idea Matt, that would be easy enough to implement as well I think. Could probably just add an onclick to the div that darkens the background behind the contact form to do the trick.
What an amazing tutorial! Thank you very much for sharing
Is it possible to clear the fields and/or reload a fresh, empty form when it’s hidden?
Yes, it’s possible, you would just have to create a button with an onclick listener that sets the values of the input fields to nothing. I just decided not to include that because it’s only 3 fields for my form and that would be a bit unnecessary
Otherwise if you needed to fill the form out a second time, like most websites you’d just refresh the page.
I don’t see a link to the demo, is there a demo and I am just missing it?
Yup, you’re missing it. This tutorial is how I created the contact form for this website - so just click on the contact button at the top. You can also view a stripped down version by downloading the demo files.
Excellent script. However, I’m concerned with mail injection and spam bots. I’ve added an empty field to the script and a check to filter for bots that fill out every field, but I have no way of really testing it.
Also, when tested with a comma in the name field, the mail was shown as sent, but I didn’t receive anything.
Can’t seem to replicate the comma problem in subsequent testing. Weird.
I purposefully didn’t fill out the email correctly, left name blank and message blank the first time around, pressed “Send message”. Of course, the script spit out the error messages. I then filled out the name with the “,” separating two words, left the message blank, email was kept in the incorrect form, so as expected, it didn’t send e-mail again and spit out the error messages. On the third pass, i filled everything correctly and the message was “sent”, but never received.
Well it sounds like it’s making its way to the mail.php script, so be sure to double check that file and see if everything is updated in there correctly. It’s a pretty simple mailer script, so there shouldn’t be much that could go wrong as long as the variables were all kept the same throughout and you changed it to go to your e-mail address.
this is wonderful, I can’t wait to give this a try
Great info, nice blog
Thanks for the complements.
And guys, seriously, stop using my contact form to test the php mail sending lol, I’m getting a bunch of e-mails with nothing but ‘asdf’ etc. for the subjects and body
Please use the demo files to try it out on your server, unless you are sending me a legit message!
I’d recommend to anyone that plays around with jQuery to give this article by NETTUTS a read: 10 Ways to Instantly Increase Your jQuery Performance.
It showed me that I definitely could have done a couple of things in the javascript for this form to improve performance time a bit.
can i use this with codeigniter?
Yes, codeigniter is a PHP framework, so nothing extra would be required.
Hi Joren
Thanks for this great tut.
Works like a charm and croos-browser. (thank god there is IE6…)
I’ve got two question.
1. The date format wich is sent by the form, hets the English date format. I tried allmost anything, whats possible for me as a php noob to get my local date format in Dutch. But nothing had any effect.
Do you know a workaround how to get the Dutch date, both in mail form and the email that is sent.
2. Is it possible to add some kind of validation (or how it’s called) that the sender receives a thank you message with a copy of the mail he had sent?
I’m really a dork when it comes to forms, so i have no idea if it take a lot of work to get those things like i mentioned.
Allthough, i like this form a lot and definately will use it in the near future.
Thanks!
regards
Dave
Hey Dave, not sure exactly what you would need to do, but if you take a look here http://us.php.net/manual/en/function.date.php that lists all of the formatting options to edit the string in the php date() function, and as far as I know that is all that is available.
To answer your second question, that is an easy one. You would just need to modify the mail.php file to include a second php mail() function, so that it sends two e-mails when the script is ran through. All you would need to do is change the string within the function around a little bit, e.g. change the reply-to address to your own, and the ‘to’ field (which would be the first parameter of the string), and change around the subject and message etc. (you would need to create new variables for everything). For a further explanation on the mail() function, you can find that info in the same place at http://us2.php.net/manual/en/function.mail.php
Hope that answers everything!
Hi Joren
Great demo.Its nice and easy.But i need to display 3 modalboxes in single page.Only one modalbox is working.please give me suggestion on this.
Iam a Ruby On Rails Devoloper
Welp Ruby on Rails won’t have anything to do with it except for replacing the mail.php file with rails scripting. If you are creating three modal boxes that have the exact same effects, then you need to create a jQuery function that pulls info from something else in the element so that it knows which item you are clicking on and what you want to appear. If you need a better explanation, I would suggest downloading some kind of photo gallery modal popup script like lightbox http://www.nickstakenburg.com/projects/lightview/ and playing around with it.
Hi,
I tried to use your marvelous contact us script. It worked very nicely in Firefox but when i used a flash banner header the sliding motion suffered a bit and it became jerky and not smooth.
In IE 6.0 it didn’t worked at all when flash was there. same was case with the IE 8.0
Any suggestions will be appreciated
Thanks
Ahmad
Well the jerkiness is nothing wrong with the scripting. Rendering a web page is just like running any other application on a computer, if it’s too heavy of a load for the computer or the browser, then the FPS is going to drop. Either your computer isn’t very fast, or it sounds like you are just trying to accomplish too much on one web page.
As far as it not working at all with IE6 or IE8, I can’t really help ya there unless you provide me with a link to look at.
hi,
Lots of Thanks for replying. I downloaded your contact form . its works very fine in IE 6 and Fire Fox but when i put the form container in my won page which has got a flash banner in it it satrts working badly otherwise as you have written on top your script works very nicely in all browasers
Well its not overloaded
It uses
1. Flash banner=120kbs
2. Background image: 18kb
3. Two buttons (18kbs and 4 kbs)
4. Html page size is 5kbs
5. Two CSS sheets of some 50kbs
I will mail you the site url in the contact form above.
I hope it lands in your inbox
Thanks
Ahmad
I sent you the URL in contact form above
Thanks in advance
Ahmad
Thanks alot, too beautiful work !
Hi joren,
Thanks for the sharing the advantage of css with jquery to show case such a nice contact form.
I would like to inquiry, instead of the “contact me” section is being standalone (with css and jquery), is it possible to integrate into of the page in Wordpress?
For example, i create a page called - Contact. When visitor clicked on it, it will show the same lightbox effect and slide as well. Is it technically possible?
Looking forward to hear from you soon. Thanks
Yup, that should be completly possible. I’ll just try and point you in the right direction, since I don’t know exactly what you would need to do. The content of each wordpress ‘page’ is going to be stored in the database somewhere. What you would need to do is find a wordpress function that would let you call that data and place that function in your header somewhere so that it is on every page. Honestly though, the only benefit to doing it that way is if you had someone constantly updating the contact page, otherwise I would just follow the tutorial.
Nice tutorial, I need help with something. I like to have some check box in the form can some help me. I added in the form :
test
test
I need to know who to pass the variable checked to the mail.php.
thx in advance
Thanks for tutorial. It was a useful to me in an application I am building.
Hi,
I am using tinymce editor for inline jquery editable functionality. After editing any text from editor and submitting ajax function tinymce is rendered with raw html.
Please tell me how to stop displaying raw html in FireFox.
Above project is not working in IE7.
Hey Surya,
Sorry, but I’m a little lost by your question. I haven’t had any experience using TinyMCE other than with open source CMS’s that already had it running.
Hi Joren,
Your script is working fine. But the only problem is that when there is a flash animation, the contact form will opening behind the flash. please give some fix. ht tp: // 58.68.24.228/ga/shibani/index1.html
Hello Elyot,
That happens with just about anything and flash. In the HTML, you have to set the flash embed to wmode=transparent. I can’t tell you exactly where to write that, because it depends on the method you are using to embed the flash file to the web page, but if you do a little Google search on that you should come up with what you’re looking for. If that doesn’t help, you can always try setting the rollover to a higher z-index with CSS, but the wmode attribute should fix your problem.
Hello… Im form Argentina, sorry for my regular english. one questios… in the PHP code, i dont understand too much but i need recieve the message in my mail and i dont no how to do… please help me. I like recieve the message in my mail “jgcoroleu@gmail”. what code i need?
its me again… looks my page http://www.aserraexport.com.ar/arcoroleu.html, you will see my contact form but dont works because i dont know to modify mail.php tha to recieve the messages in my mail “jgcoroleu@gmail.com”. please… can you tell me the code i need… thnx
sory, my page is http://www.aserraexport.com.ar/arcoroleu/index.html
Hey Gaston,
It looks like my post was a little screwed up, there was some code missing from the section that went over the PHP end of things. Take a look at it again, you should be able to tell now where to change the e-mail address. Sorry about that!
Joren,
Thanks for the code, I THINK I can make this work for what I’m doing. Just a question though, have you ever used this code with multiple elements on a site? Like for instance, I’m going to use it with a brief biography section with about 7 people or so. Each one will have a short bio and pic and email form. It’s going to be quite the challenge for me since I’m mostly a designer and not developer but I just wanted to know if it’s possible to do with this code or if you’ve ever done it. Also, if you have any resources I could look at to point me in the right direction that would be most helpful as well. Thanks in advance!
Hey Jared,
That would not be hard at all, you would just have to create a separate function for each form that would pull out (so a new ID etc. for each one). The only issue is, that’s a lot of javascript animations to have running on a page, so it could end up pretty clunky, but you won’t know until you try it.
Thanks for the quick reply! I think I may end up trying something else as I decided I really don’t need it to slide up and down but a popup would work fine for me. I will definitely keep this bookmarked for future reference though, thanks for posting!
Hi,
I need to parse Safari Bookmarks (Bookmarks.plist) file using asp.net
Actually it is in Binary format which is tough to read.
For anyone who is previously using this script, I just discovered a limitation with using GET as a method for passing the variable. It only allows for so many characters to be used in the textarea, so I had received a couple of e-mails with blank messages because they were too long. I updated the post and the source files to use the POST method.
Hey Joren Great script!
Works great..only problem I’m having is that on one of my pages I’m also running a simple jquery innerfade of some images. The contact form appears behind the innerfade.
Kind of like what the user posted above about the Flash animation only this is just an innerfade of images. Any suggestions to get the contact form to appear in front of the innerfade?
Thanks and keep up the great posts!
You’ve gotta play with the z-index’s of them. Internet Explorer’s handle z-index in a funky way, so check out this link for a better understanding of it (and be sure to read through the comments).
http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/
Hey Joren,
Worked great. Thanks for getting back so quick. Changed the z-index property and that did the trick. Now my only other new problem is that the contact form automatically closes only on the page where it is floating above my innerfade of images. Any ideas?
No problem. If you are using the exact same code line for line on two different pages, but the form is acting differently, then it is more than likely that you are getting interference from other javascripts on that page. For example, a variable name might be getting used twice on accident.
I would use process of elimination. Just take out certain other items at a time until you get it to work, and then add some back until you narrow it down then make your changes.
Hey Joren,
I just got it going. I figured I would stick with the z-index property for a bit. I changed the z-index property on the #backgroundPopup to a higher value, 13, and that is now keeping the form from automatically sliding backup. I’ve tested in IE and Firefox so far.
Z-index can be quite powerful.
Thanks again for your timely responses and your posts.
Hi Joren,
Great script to add to my arsenal! Quick install, everything is working great. The only issue I’m facing is when I re-size my browser to test the script on my page, the form and tab are shifting rather than staying fixed. I know the script revolves around absolute positioning based on the 960px container.
My question… is there any way to set the positioning so it remains consistent regardless of screen resolution?
Thanks Joren,
Steve T
It sounds to me like you want to be trying fixed positioning as opposed to absolute? Or, if you have the website sitting flush with the left side instead of centered like in the example, just get rid of the “margin:0 auto” that is on the container div.
Hi Joren,
Thanks for the reply.
My site is a “centered” design @ 780px wide.
Before contacting you, I already tried to use a “fixed” position rather than “absolute”… still the same result. I cant figure out for the life of me how to make this “fixed” on the upper left side of my page. I don’t want the tab to move every time the browser is re-sized. I’ve tried everything I keep coming up empty.
Any additional thoughts?
Thanks again for this great script, now if I can get this in a “fixed” position, I think we have a home run here.
Steve T
If you’d like to send me a link to the page that you are talking about, I’d be more than happy to help you. Just send a message through my contact form, thanks
Just want to take a moment to thank you for this tutorial. Great job!
Joren,
I emailed my link a few times, did you get it?
Thanks,
Steve T
Sorry, no, I have not received anything. Maybe it went into my spam box, did you try my website’s contact form?
Joren,
Your contact form hangs when I try to send you my information. I just sent again. I am assuming you still haven’t received it. Please let me know.
Thanks,
Steve T
Thanks for a great tutorial.
One thing is confusing me with the slide-in animation.
In firefox (ie7 works - for a change!) the form rolls down over my header, disappears under the content wrapper, and then reappears over it. Everything else is working fine!
I placed the email form code right after the body tag.
I havent been able to upload it yet. Any ideas what is causing this?
Hey Yan, sounds like a z-indexing issue to me. Make sure you play around with that. If you still have trouble, send me a link through my contact form and I’ll check it out for ya.
Thanks for the walk through, very precise and the form works great. You have an awesome site btw!
I am having a problem getting the email once someone submits the form. Everything seems to be working but I get no email when someone fills it out. I replaced the email with mine in the mail.php file. I do have to do anything else?
Thanks for the help.
Daniel
Hey Daniel, it’s a possibility your web host has an issue with the way the mail headers are setup, so you may need to play around with that or specify the PHP version. If you keep running into a wall I would probably give them a ring.
Thanks for the complement John
Thanks. I really do like the tutorial. Keep up the good work.
Hi Joren, I’m having the same problem as Daniel, in that I don’t receive any mail. Where would I go About specifying the PHP version?
thanks
This is exactly what I was looking for. Thank you very much for doing the work and making it available for everyone.
Do you think that I could trigger the slide down with a link somewhere else on the page? The situation is that I have another Contact Us link a bit further down the page and would like to have it trigger the slide but so far I’ve not been able to do it.
This line, as it says, tells the script to run the contact form function whenever a link with the class of “contact” is clicked
$(”.contact”).click(function(){contact()});
So, to answer your question, yes, just give whatever link you want the class “contact” and you’ll be all set. You’ll see I also have it on the link in my website’s footer.
Thanks Joren!
I had tried that and it didn’t work, not sure where I messed it up. After reading your note I tried again and everything is fine.
Thanks again.
Something I have noticed is that if I play with this script on my server w/ sendmail it all works fine.
However, if I use this tut on my server that runs msmtp inplace of sendmail… I get the form, it validates and also sends. However, after the loading animation it simply slides out without displaying any confirmation like in “mail_response.”
Any idea what would cause this or a workaround?
Thanks
If the script is sending the e-mail still then one of two things is happening. Either the AJAX isn’t getting the response it wants from your mail script telling it that it did send, or it’s just taking longer to process the mail script. There is a timer on this script that determines when the contact form goes back up, the setTimeout() function near the end of it. You can see it is currently set to 2000, which you can make higher and see if the latter is your issue. You may also need to add the response data (some html thank you message) so that the script has something to replace the loader div with.
Hrm, it works when i set it to 7000. Which seams little excessive to me. Is there a way to wait for a response from the mail server or the script before it skips to the div?
Thanks
Oh and great script btw.
Sadly, it’s probably taking so long because your mail script is much larger or your server is really slow. I don’t know of a way to delay a jQuery animation until it receives the data response, although I’m sure it’s out there. If anyone else is able to chime in on this, I’d be much obliged.
Very nice and useful tutorials to web designers,
Thanks for posting.
Hi, great tut. I have a question, where are you defining #mail_response. It’s not in the style sheet.
Thanks! I’m not actually using it for any CSS in this example, I think that div was just left over from the code I used on this website, so you can either take it out or apply your own styling to it.
Hi Joren,
One more question, I see the #messageSent defined in the style sheet, but it’s not in the code. How do you get the confirmation message to show up without it?
Hah looks like you found more leftover code from who knows what, sorry about that. Hiding the confirmation message isn’t necessary at all because we will never see the response from the PHP until the mail function is finished processing, since the PHP script does not get called until our AJAX request. I’ll take that bit out of there.
Joren, Thanks for replying to my other questions. Hate to pester, but I’M SO CLOSE. Everything is working great, except once the form is sent, you can’t send it again. That would normally be fine, except I have an “contact” button in multiple divs on a jQuery ’slider’ type page (where it appears to be multiple pages, but it’s only one page and multiple divs). Is there anyway to reset the form, not just the form fields, but the whole thing, once it’s already sent?
Sure thing, just apply the jQuery function .show() to the id you have set for the form after everything is processed.
you are a god!
First i have to say great tut!
But i have problems with the z-index.
Every image within the container is not covered by the backgroundPopup.
i tried to give evey div an z-index but it still won’t work.
Any explanations?
Thanks in advance
Very good! I enjoyed it!
Thank you… Thank you… Thank you… The mail.php was soooo easy to use, unlike others that I have found and your tutorial was easy to implement into my site. Again I thank you for your nice looking and easy to use contact form.
Would post the link to my site but I am still developing it.
Thanks
Rich
Awesome, glad you found it useful!
Thanx for a great Tutorial,
One Question though, how can we close the modal contact popup window with the ESC button.
Thanx,
Sure thing. You just have to add a new jQuery even handler that listens for that keypress, like so:
$(”#contactForm”).keyup(function(event) {
if (event.keycode == 27) {
$(this).slideUp(”slow”);
}
});
27 is the numeric value for the escape key. For a resource of these, check here http://unixpapa.com/js/key.html
[...] Visit Source. [...]
[...] jQuery Validation Contact Form with Modal + Slide-in Transition [...]
[...] Joren Rapini: jQuery Validation Contact Form with Modal + Slide-in Transition [...]
[...] jQuery Ajax Validation Contact Form with Modal + Slide-in Transition Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up. [...]
[...] jQuery Ajax Validation Contact Form with Modal + Slide-in Transition Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up. [...]
[...] The contact me link will darken the page and pull down a JavaScript powered box from the corner which looks very effective on a design such as this one. Joren has included instructions on how he did this on his Blog. [...]
[...] jQuery AJAX Validation Contact Form with Modal + Slide-in Transition | The Blog of Joren Rapini [...]