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!
Advertisement: Let me give you a postcards printing site that will let you print just about any kind of cards. Whether you’re printing personal cards for your loved ones or friends or die cut business cards for use at work, you’ll all get them on here. Visit us today!
Hey Joren ..
like your work so I’m using it but i’ve made some changes.
only thing is when i hit submit, it shows me the thank you message - which I have to fix the font color - but it doesn’t show the name and the message doesn’t go through.
any ideas ?
thanks
update : once uploaded to the server, it seems like everything is works.
another questions.
how would I add a line of text to the left of the “CLICK ME” button and once the form slides into place, the text stays underneath it (gets covered up)
thanks
Brilliant work!! Thank you so much for the amazing work and fantastic tutorial. You’re a gifted teacher and this is a wonderful contribution. Thanks again!
I am new to coding. My contact form I used from here gets stuck on loading after you hit send. Could you please help?
designlikeariot.com/index1.html
You’re mail.php is missing from the server. You need a server side script in there in order to have the server send you an e-mail. The script reports a 404 error not found when it runs.
I’ve said it a million times in these comments and I’ll say it again, everyone should get used to learning Firefox’s Firebug or Chrome’s Developer Tools to help with troubleshooting
Very Good Article.
Thanks
JeevanSAthi
how can I have this contact form trigger on OnMouseOver ? please help.
on line 26 “mouseOver” instead of “click” ? Ill try it
You would need to use .hover(), although that probably isn’t going to be the best idea from a user interaction standpoint for something like this.
Hi I love this it works really well. Is it possible to make the slider, slide from the side?
Want to say THANKS A LOT, just exactly what i was searching for - GREAT JOB!!!!!!!!!
Love it!
Hey,
Love the script! I downloaded the source files and extracted them to my server’s theme directory for WordPress.
So.. Themes/Thesis/ is where I dropped the files(css, images, js, index.html, mail.php)
Noob question here. Is this the correct directory structure for WP? Nothing is actually showing up on my sites index page http://frontiereville.net/
Note: I’ve edited the mail.php and index.html files for my own purposes.
Thanks!
Tom
Hey, I was just browsing CodeCanyon (a online code marketplace) when I found a PHP class that may be able to solve your problem. It can count Google +1’s, and all other kind of social statistics. Search for ‘SocialCounter’ on CodeCanyon.
Hey.. This is awsome.
I have been trying to get a popup contact form that doesnt conflict with Maxigallery going for a while now.. This is the only one I have managed to get going ( had to use j query no conflict with this too ), but I cant seem to get the form’s submit button to actually send the mail to me. I have set up a mail.php as well, but I dont know much about php.
Here is the little test page I rigged up.
http://www.partridgejewellers.com/index.php?id=326
Hmm, I watched your script with a console and it looks like you have everything set up correctly. The only issue I can think is that your webhost doesn’t like something in the mail.php, you may have to try a different mail script. Sorry I can’t be of more help.
Hello, I find your work great. I’ve been using your work together the provided
http://www.webmasterbiz.de/scripte/layer_popup/generator.htm and YAML framework. It works in all browsers. Strangely, not in Firefox 4.0.1 on Windows 7 (your demo already). Linux Firefox 4 and all others have no problem. I’ve tried everything possible. Here is the link to my test page:
http://kunstheute-mv.de/kh2011/kunstheute/kunstheute/
Got a Tip?
Hey Stefan, I didn’t get a chance to test these on Firefox4 as I already upgraded to 5 and I’m on Windows 7 as well, both my demo and your link seem to work fine. Can you go into detail on what the problem is?
its not working in latest jquery 1.5 and 1.6
can u upgrade ur product please
Hi Joren!
Great Work! Simple but powerfull!
I’ve tried to change it a little bit, and put it fixed at the bottom of the page. But I had a problem:
Every first time I click on the button the slide effect starts from another place, more specifically from the left of the page. Even when I positioned it at the right. Thou when I click it again, it slides from the right place.
I’ve changed the code:
#contactFormContainer {
position:fixed;
right:628px;
bottom:0px;
z-index:1;
}
Am I missing something?
Could you send a link by any chance? That could help me out. Thanks.
My server is down, i’ll send you a link when I have it! But it’s strange since it only happens when you click it for the first time… I’m new using jquerry, and I’m trying to understand it. Thanks in advice!
Here it is! I haven’t change it very much: http://rudolfsteiner150.com.br/contactform/
Am I missing something?
Try using position absolute and left positioning instead of right. Otherwise you may have to use jquery’s animate function for more specific movements rather than just slide up or slide down
Great! Thanks! It’s working wonderfully! make sure to visit http://zeinarquitetura.com on the future. I’m almost done =]
Hi Joren,
thanks for the great work! I installed the form on my website and everything works pretty well except every email sent from the form ends up automatically in the junk mail folders of email clients. Tried Hotmail, Gmail and Outlook. Any pointers?
Many thanks
Hmm, well, the PHP side of this form isn’t very advanced, and certain webhosts may be tossing the email out. You could try integrating it with some other PHP mail script, or possibly using SMTP instead of mail().
Thank you!
It seems like integrating a few more php functions did the trick. Hotmail still treats them as junk, but Outlook and Gmail work fine.
On a different note… Once the message is sent the ‘thank you’ note remains in the window until the page is refreshed. Is there a way to automatically revert back to the contact form?
Cheers
Sure! Just show $(’.contactForm’) and hide $(’.loader’) during setTimeout function.
Forgive my ignorance. Any chance you could give me the string as I need to write it in the js? I am clueless when it comes to writing code. Only good at cut/pasting. Thanks for your patience.
Change
setTimeout(’$(”#backgroundPopup”).fadeOut(”slow”); $(”#contactForm”).slideUp(”slow”)’, 2000);
To
setTimeout(’$(”.contactForm”).show();$(”.loader”).hide(); ‘, 2000);
Legend!
site is live at natalierichardson.org.
Thank you
Awesome
I’ve been using this for sometime now for some reason it no longer works, just loads after you hit send. I’ve tried editing my mail.php. I dont know whats wrong.
Sounds like a file got moved, class/ID changed, or maybe you added some javascript to the website that could be conflicting with the script? Use Firebug to troubleshoot.
Hi Joren!
I tried to upload server but can not send messages on my mail. Plz hepl me!!!!
Tks so much !
Excellent script! I intend to use it in my site but before I have 3 issues :
1) I would like the form to appear after the message sent is done - essentially what Enzo asked further up but if I use the code you gave, the form will not slide down.
2) How about clearing the fields of the form after submitting and sending ? If it is used again, the previously entered text is still there.
3) Thought of adding captcha to the form ?
Thank you & keep up the good work
Manuel
Hey Man… Love the form, for some reason I am constantly getting dummy messages, how would I add some kind of security to the form so that nobody can send it without typing in a code… I belive its called captcha?? Its amazing and there is a few things I would like to add to it…. for one… I would like to have an Address fields? for instance… First line…. City… Post Code… Im not very PHP clever… haha… any help would be very grateful….
Hey man, I really like the form and it looks great on my site, however, in one night I have recieved 50 spam messages and need to know how I could add a security feature to it to either reduce or stop the amount I am getting? I really hope you can help as I love this tool… Its amazing - Total credit to you for it!!
Hey man… all is good… I have sorted out the feature that fixes it… now all i gotta do is customer design the look of it… Thanks for such a great feature!!!
A good tutorial. Thank you. I would like to form slide to the left. Can you help me how to change it.
Thanks. This has been asked in previous comments, you can check this out http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
I found this tutorial http://www.iamkreative.co.uk/design/horizontal-sliding-panel-v2/comment-page-1/ # comment-1941 I would like only to the “about me” pushed together with the panel. It was not until I begin with jQuery so please help!
Thank you for your help!
Thanks for this…any help on getting the “message sent” response to be shown. Right now I am getting a blank box that disappears after the allotted time without any message so users will not be sure if their email was sent or not…
Any help would be apprieciated!
THX!
Try troubleshooting with Firefox’s Firebug console.
Hi Joren,
By any chance can the slider can be set to auto expand after a given number of seconds? Lets say the user lands on contact page where is the address, map location etc and after 3-4 seconds the slider auto expands from left or right side of the page allowing the user to fill in the form and send it. I need to mention: i’m javascript newbie
Great tutorial by the way, keep up the good work!!
Thx
hi
images/birdy.jpg and contact_me.png psd pls help
Hi Joren!
nice work…..
its powerfull……………..
nic job
Awsome contact form. I was wondering to add additional fields like”phone number” could you help me to add the additional code and where it might go. I am able to add it to the form but are having trouble with the .php file. Thanks.
Hello - I noticed that the contact form on your home page has a little security question to stop the spambots but this little piece of code is not included in the downloadable version. I tried finding the code to make it work by view source, but using your script jumps to a new page for the thankyou script so I must have done it wrong. Can you tell me how to implement that couple lines of code so that we can eliminate the spam from the form… thanks,
the form does work well.
Does anyone out there know how to have several of these contact us panels on one single page? I have tried, however each time I add a new one it breaks everything.
Sorry about that, the script wasn’t meant to handle more. It’s old, inefficient code. You could add more just by duplicating the code in the javascript and running it on a new ID of the different contact forms.
I like this article. I will get this coding on my website
can you do an update to this cool contact form and put an ” file attachment” you know when somebody want to send some info and a picture..or a file?
i try to modifiable the php code in fact i stay and search all day … but what i try dont work …
so maybe when you have time do and update to this beautiful form and put some file attachment
Hah thanks, yes that’s the hard part though, getting the time.
i do something and work but when i submit the link change to ..mail.php tanks
..and dont have that .. slide out effect ” back to top”
the upgrade most go here: in javascript
_________________________
//send the ajax request
$.post(’mail.php’,{name:$(’#name’).val(),
email:$(’#e-mail’).val(),
message:$(’#message’).val(),
/*
fileAttach:$(’#attachment’).val(),}
*/
______________________
in html :
_______________
the php
<?php
$strMessage = nl2br($_POST["message"]);
//*** Uniqid Session ***//
$strSid = md5(uniqid(time()));
$strHeader = “”;
$strHeader .= “From: “.$_POST["name"].”\nReply-To: “.$_POST["email"].”";
$strHeader .= “MIME-Version: 1.0\n”;
$strHeader .= “Content-Type: multipart/mixed; boundary=\”".$strSid.”\”\n\n”;
$strHeader .= “This is a multi-part message in MIME format.\n”;
$strHeader .= “–”.$strSid.”\n”;
$strHeader .= “Content-type: text/html; charset=utf-8\n”;
$strHeader .= “Content-Transfer-Encoding: 7bit\n\n”;
$strHeader .= $strMessage.”\n\n”;
//*** Attachment ***//
for($i=0;$i
________________________
if you remove the from form the class=”contactForm” the script work.. do validation send attachment but.. dont have that sweet side out effect
what proprieties most introduce in to ajax request to send the attachment
$.post(’mail.php’,{……..}
i personal i dont need any extra validation for the file that will be attach i only want to see it send and the slide out effect from the contact form
i want to open and iframe when i click pe CONTACT button ? because i want to have the phmailer a very powerful form with validation and attachment
how can i insert and iframe ?
help?:D
TOO SEXY :O
Thank you. I applied a bottom-up. How do I set the animation speed.
Has anyone been successful incorporating this into Joomla? Works perfect outside Joomla. Got some success by putting mail.php code into an article page. Works fair in Chrome and IE9. (messes up the success page). Sends mail with info stripped in Firefox and no success page.
This is a neat form. I did get it working in Joomla, sort of. The only problem now is the success message jumps out of the form and displays on a generic webpage, completely blank except for the that contains the “thank you” message. No navigation to get back to the site except the back button. Any suggestions?
It sounds like for whatever reason the ajax call in the javascript isn’t firing at all. You’d have to look into that, firebug or chrome dev tools would report errors to help point you in the right direction. It might be conflicting with other code on the site.
Hello, I really liked the form and put on my site. But when double-digit name (Jose Maria for example), the message is sent but does not reach the destination. Just enough to type a simple name (Jose - without accents).
His form is the first link http://youngsoft.com.br/copiasuporte.html contact this address. Thanks for having their work
great work, but what should we do to clear the fields of the form after submitting and sending ? If it is used again, the previously entered text is still there.
Hi. Thank´s for your efforts.
I have a question: I´m not recieving the contact form emails after click in send button. The form works well here. The message out is “Thank you …”
Maybe I need to add user and password for mail.php file?
Again, thank you.
[...] 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 [...]
[...] 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 | The Blog of Joren Rapini [...]
[...] Uygulamanın Kodları ve Anlatım : http://jorenrapini.com/blog/css/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. [...]
[...] use this link , Go LikeBe the first to like this [...]
[...] [...]
[...] jQuery Ajax 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. [...]
[...] 4. JQuery Validation Contact Form With Modal Slide in Transition [...]
[...] [...]
[...] appear within the same container, expanding or contracting to the dimensions of the new form. …5. Jquery Ajax Validation Form With Modal Slide In TransitionAll you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code [...]
[...] JQuery Validation Contact Form With Modal Slide in Transition [...]
[...] JQuery Validation Contact Form With Modal Slide in Transition [...]
[...] jQuery AJAX Validation Contact Form with Modal + Slide-in TransitionTutorial on creating a slide-in contact form with ajax [...]
[...] [...]
[...] 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. [...]
[...] 5. Jquery Ajax Validation Form With Modal Slide In Transition [...]
[...] (Modal Window) Contact Form: Contact-PopRVContactForm – Multilingual AJAX Contact FormjQuery Ajax Contact Form With Modal Slide-in Transition and ValidationPHP / jQuery Contact Form with Runtime PreviewSimple Yet Professional AJAX Contact Form Contactable [...]