@naval1: That's strange. Your PHP script might be exiting abnormally for some reason - that would stop it returning the correct response to the JavaScript. You'll need to do some debugging I think. You could try disabling JavaScript in your browser, and adding ?ajax=true to your form action:

This should make the PHP script think it's handling an Ajax request. You can then see the response from the PHP script in the page.

You could also try using PHP's error_log() function and the error_log directive to log diagnostic messages to a log file on your server. This might help you work out what's happening inside the PHP script.

I'm very new to web site design and its taken me months to design my own site with no previous html, java script or php experience.

I've followed your instructions to the letter, and saw the response from the php script and found that the problem was with script recommended by my site hosts, details as follows:

To prevent spam being sent through our webservers, there are certain conditions that must be met before our SMTP servers will send the email.

Email must be sent to, or from, an existing email address hosted by Fasthosts. This must be a mailbox on the same domain name on which the form to mail script is being hosted.To stop misuse of your form by third parties the sendmail_from variable should be set to your Fasthosts hosted email address. While access to the php.ini file is restricted on our shared environment, you can sent this variable using the ini_set() command, shown below.A fifth parameter, -f, should be added to the sendmail function. This will set the name of the from email address.In its basic form, a simple sendmail script will look like this:

<?phpini_set("sendmail_from", "user@yourdomain.com");mail($email_to, $email_subject, $email_message, $headers, "-fuser@yourdomain.com");?>Provided that your form to mail script meets the requirements above, you should have no problems.

I've removed their recommended php script and everything works fine now. Is there anything I need to do or do I just leave things as they are ?

Again thank you very much for your time, what a very informative site you run, thank you.

Hi Matt,Thank you for this great tutorial. It's looking beautiful but unfortunately I can't get it to work properly. After I fill in all the fields and submit the form I get the "incompleteMessage" error message. I imagine there's a problem with the validation process but as I'm new the php I can be sure. Any way you can take a look for me?

And here's the javascript, I wanted to remove the hide functionality you had for the demo which is why some of the code has been commented out. I want the form to be there once you arrive at the section and only hide once you submit the form.

This is the exact functioning form I have been looking for. Looks great and works great! Except for one little thing...sorry.

I fill out the form and click submit. I get the "Sending your message" message. Then the "thanks for sending your message" message. But then the message just stays there. I've tried adjusting the var messageDelay = 2000; line of code to a lower number, but not avail. I should mention that the email does go through, with all headers, email addresses and text in place. My page is here: http://www.ericmlyons.com/index_contact.html.

And here is the code I'm using:

the javascript (please note that I replaced #content with #linkwrapper as this is where my content is)

// Hide the form initially. // Make submitForm() the form's submit handler. // Position the form so it sits in the centre of the browser window. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked: // 1. Fade the content out // 2. Display the form // 3. Move focus to the first field // 4. Prevent the link being followed

This is a wonderful contact form. It is exactly what I wanted...I just have one question: When the contact form is visible, there's kind of a white layer beneath the form and over part of the page (like a veil).Is it possible to extend this "veil" to the entire page?

@perfisaI believe in order to veil the entire page, you need to select which div you want in the fade to portion of the javascript init function. For example:

function init() {

// Hide the form initially. // Make submitForm() the form's submit handler. // Position the form so it sits in the centre of the browser window. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked: // 1. Fade the content out // 2. Display the form // 3. Move focus to the first field // 4. Prevent the link being followed

i need to define the from address and have the senders email address be set as a reply to address. it seems to be required by godaddy that the from address be from the same domain as the website itself otherwise no email is sent. i have tried and tried to get it to work but no matter what i do to try and fix still it gives me the you must fill in all boxes message when i hit send. in the html file i renamed the box for email address "replyEmail" and set a define in the top of php for the from... here's my php i am fairly sure the problem is here:

Hey matt..First of all, hats off for such a good tutorial.!! Great work!!

I am having a problem with this tutorial. I am new to php and ajax..I followed your tutorial as it is, but when I fill the form and click Send Email, I get the error message "Please complete all the fields in the form before sending." even though all fields in the form are filled.Also the error message doesn't fade out.. Is there any additional step to do this.

Hi great Tut! looks great! works perfectly, on Safari, Opera, Chrome, Firefox..IE 7, on my iPad, android phone, Xoom tablet(yes I bought one)...however, IE 9 is giving problems. It loads on the bottom left side of the page...thnx in advance!

I just want the checkbox to appear on the same line right after the text, but when I do this the checkbox literally ends up right on top of the text. I'm sure I need to make some kind of change to the stylesheet, but I haven't been able to figure it out.

I'm doing a site for free for my children's primary school, and when I test it on my own websites server it works fine but as soon as i transfer it to their server it goes through the motions and thanks me for sending etc but I don't receive the email?

I'm guessing that their server doesn't handle ajax or it's not enabled - is there anything else it could be?

This is a great tutorial, I have one problem though, I am not recieving any emails from the form, I have never made one of these before so I am clueless as to where the .php file goes, I just dumped it in with all the others and specified my email address in constants, what am I doing wrong ?

I want to make a multiple choice quiz of 100 questions using javascript or php .i want that when user fill the answer & submit it . The no. of correct , wrong & left answers (including correct answers) & score shown in the next tab .

@pixelist: More likely a mail server issue - it's not getting to your server's MTA, or the MTA is having trouble delivering it. This is a bit out of the scope of my article I'm afraid. You can post the problem in a separate topic if you like:

@tonyb67: Same answer! The email is likely getting sent by the PHP script, but then the MTA isn't delivering it for some reason. If possible, check your PHP error log and/or your MTA's mail log to see if you can narrow down the issue. Do other PHP email scripts on the server send mail OK from and to the same addresses?

Thanks for getting back to me. I think it is a server problem - other php mail scripts work fine using the same address so it appears that it doesn't like the ajax?? On my own server the form functions as expected.

As this is an Education Authority server everything is slow and the Administrator has not even got back to me.

So I've gone back to a simple php mailer with redirect for the time being - can't thank you enough for your help though

@pixelist: As far as web servers are concerned, Ajax requests are no different from regular HTTP requests. I don't think Ajax is your problem. I expect your PHP script isn't running correctly. You could try adding some debugging to the PHP script to see where the problem is.

You can also try disabling JS in your browser then reloading the page to get the non-Ajax fallback form, then try submitting that. That might give you a better idea of what's happening to your PHP script.

I've been reading your articles and they have helped me BIGTIME! I really like this lightbox form, its fantastic but I am trying to add a captcha that I use in some of my other forms and I'm getting nowhere! Please could you help me with it!? I can show you what I've done so far ...

Great tutorial, it seems to do exactly what I'm looking to do. I've tweaked a few things to reveal hidden layers rather than simply feeding the info. It seems to work as far as I can tell, but it hangs on the "sending" message and nothing comes through the email.

I have reverted to your php script, thinking that it may have been a mistake in my code, it doesn't work either. Other php mail scripts work on this server, so I don't know what it could be. Any help would be appreciated.

Thanks for the reply. That page got taken down after I resolved the problem. Sorry.

I couldn't get the delay to work on closing, so I simply cleared the fields when the user re-clicks to reopen the form. That worked. I will look into your suggestion though, it is definitely more graceful.

I do however have another problem, I have emailed you the details of the problem, as well as the proper link to your email from this site.

@avdhesh: I can't see any other obvious problems from just looking at your code. You'll need to add some debugging to your PHP script. e.g. use echo to display the values of variables at various points, and see which variables are (or aren't) receiving the values from the form.

Hi, im trying too use this script. Only thing is ive changed the buttons from send email too Skicka (Swedish for Send).

But when Ive made all inputs and press "Send" It says the message "please hold while we send the email" and it never sends the email.

If its at any help I use one.com as host and hotmail as recceiver.

Id like if you can send me a tip over email or something. Gonna try look over the code today and see if I can find something. But else I must say this is the nicest thing ive ever seen. Hope you will make more things like this for the community.

@Mark5555: Try turning on IE Developer Tools (F12) and see if you get any errors in the JavaScript console. If there are no errors, try inserting console.log() calls at various points throughout the script to see what's getting run, and what isn't. For example, it may be that an event handler isn't firing in IE for some reason.

@mylifeinfiction: Thanks! Not sure what you mean by "Section Drop downs sections". You should be able to add in a <select> menu fairly easily if that's what you mean?

After working on your tutorial for the whole day I was able to modify the code to fit my web site. It work amazingly! No more hours of digging for code!!!

However, I run into a couple of issues that I cannot resolve and am in need of your help, if I may.

1. When I receive a response from the mail form, in the field "From" I see my own E-mail address and not the name of the sender. Also, when I click "reply" I only see my own E-mail address. For some reason information from fields "senderName" and "senderEmail" getting lost (I attached all the codes below). Any idea what am I doing wrong?

2. I installed HTML code in one of the main content window of my web site (www.25bits.com). Everything works OK only if the "contact us" hyperlink is located in the same DIV. How can I move the hyperlink to any other place on the website?

// Hide the form initially. // Make submitForm() the form's submit handler. // Position the form so it sits in the centre of the browser window. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked: // 1. Fade the content out // 2. Display the form // 3. Move focus to the first field // 4. Prevent the link being followed

</div> <div class="content"> <h1>While this site is still under construction, &quot;Equipment for Rent&quot; section is ready.</h1> <p>Call us at 253-217-2377 with all your rental needs or <a href="#contactForm">contact us</a> via E-mail.</p> <div><form id="contactForm" action="processForm.php" method="post">

@altaone: This topic is for questions about the code in the tutorial. If you need help with an anti-spam system, please post your question in a new topic, with a description of any error(s) and the URL of the problem page:

I don’t understand since if I ask to show it instead of hide the form when the page loads, it works.

It works too if I put $('#contactForm').show()...

(note that #centre is my content wrapper)I can see it and it works.

#center #contactForm are not fading at all and the form is not being displayed. ???

I’ve no more ideas now to fix that issue.Do you have one?

Thanks for your reply, Matt.

[EDIT] Oops. Forgot to tell .positioned class is never added to the form. Even in your demo.Do I misunderstand something?

[EDIT 2] I’ve tried with your jQuery link (mine was using the latest] with the same result.As I made working easily on a stand alone page a few month ago, I don’t see why it can’t work in the CMS I use (which is using XML for storage instead of a database).

VERY nice form!I have a question: the #incompleteMessage seems to be unused, it will never appear in any situation. Instead, an image pop up with the words "please fill out this field" will appear if I leave anything blank. This occurs for both your demo and after I implemented it in my website. I don't really mind as I think "please fill out this field" right below the field that needs filling is more useful, but I can't seem to change this message (can't find anywhere within css/html/php file that produces this pop-up).Thanks for your help!

@windbrand: What you're seeing is your browser's HTML5 form validation, triggered by the "required" attributes in the form's fields. It is browser-specific. As far as I know, you can't alter the message that the browser displays. #incompleteMessage is used as a fallback if the browser doesn't support HTML5 validation.

If you'd rather just use the #incompleteMessage validation at all time, remove the "required" attributes. Personally I'd use the HTML5 validation if the browser supports it.

@truitas: Make sure you use UTF-8 encoding throughout the whole chain: include <meta charset="utf-8">in the HTML document; serve the document with the "Content-Type: text/html; charset=utf-8" HTTP header; and set the MIME content type in the email body to "text/plain; charset=utf-8".

Hello Matt,Thank you for the post it is really interesting and well explained. I was able to make it work alone, but now I am trying to implement the ajax animation in another form. Trying to get the notifications and fadein, fadeTo effects.But I am having problems with this part of the code:

This is the message to all participants and guests of this blog. After spending a couple of months playing with the code provided here, I was able to figure out why my code did not work and I was able to fix it.

Here is what the problem was: server restrictions. It appears that different sites impose different restrictions or rules as to how PHP handled. (some do not allow "mail" command, some restrict the way you define functions, some impose an obligatory code you have to use, etc.) Absolutely same code would produce different result, depending on your web server.

After pulling my hair, I began shopping around and was able to find a free web hosting, that has very few restrictions. And, voila! - the code works without a glitch!

I hope this message will help others and eliminate frustration.

I am not a professional coder, so, please excuse me if I sound like an amateur.

@Sventovit: I'm not familiar with how your site navigation works, but in theory there's no reason you couldn't use the contact form script on your site. If you're using some JavaScript code for your navigation then you might need to rewrite some of the contact form code to play nicely with it. I'd guess that there's some conflict between the contact form code and your navigation code.

Try adding console.log() throughout the contact form code to see which bits (if any) are being run when you click the Contact link.

@bernardao: Could be a number of things. As @stevenmahoney points out (thanks Steven!) it could be a server restriction. It might also be that the PHP script isn't getting the data correctly from the form. See here for some troubleshooting tips:

HTTP_X_REQUESTED_WITH refers to the X-Requested-With header sent by most JS frameworks along with an Ajax request. It does much the same thing as my code, but it does depend on the framework sending the header (and the web server allowing PHP to access the header). More here:

@Sventovit: Put some debugging in your PHP script to see what data the script is receiving from the form. Then see what happens when you post the form on both the blog home page and on the single article page. Does the PHP script receive the data correctly in both cases?

Hey everyone,I am new jquery(new as in one day old). I cannot get this working even if I just download the code and modify the PHP file so that it has my email it does not work. So help? I have a gmail email address. Thanks.

Because I'm using a form with many more inputs (and for extra security), I prefer to use Tectite's FormMail script for handling the form.

However, one major disadvantage of Tectite's FormMail is that it doesn't support AJAX form submission out of the box. I spent a few hours integrating your JQuery script with Tectite's FormMail and thought I'd share the result for anyone else interested!

I just inserted the AJAX browser response lines before the FormMail script redirects to the Thanks page. In my FormMail.php file, the code to redirect is on line 13482

CreatePage(GetMessage(MSG_THANKS_PAGE),GetMessage(MSG_FORM_OK));

With your AJAX browser response code inserted, the code now looks like this:

Hello Mattthanks again for the support.I’ve tried this weekend to "debug" and only found this error when trying to send a mail using the form on a single article page:A session had already been started - ignoring session_start()Hum…

Matt this is an awesome tutorial and i think you done great job!! I tested the form and it works like a charm.

One thing I want, if you can help me! I'm trying to fill the form with greek characters and the message appears weird. I scroll the messages and i saw that maruse also had the same issue with Japanese and he solve it! Unfortunately I don't know how to use the strip_tag(). If you can post a solution about, I will appreciate a lot!Also, is it possible to write at fields John Smith and Visitor Message something in different language and appears correct??

@Sventovit: Hmm, not sure. I'd have to see your whole PHP script. I assume you are calling session_start() in the script for some reason?

My guess is that, since your PHP script works on one page and not another, there's a problem in the second page (either in the form JavaScript, the markup, or some other conflicting JavaScript) that is preventing the data getting to the PHP script.

I followed your tutorial but I'd like to expand on it a little more to allow attachable files and a few other fields. Can you help me do this? I am having quite the time figuring out why it isn't working for me.

// Hide the form initially. // Make submitForm() the form's submit handler. // Position the form so it sits in the centre of the browser window. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked: // 1. Fade the content out // 2. Display the form // 3. Move focus to the first field // 4. Prevent the link being followed

@delvok: If you're sending form data from a 'file' input type then you need to add the attribute enctype="multipart/form-data" to your <form> tag.

Also it doesn't look like you're capturing the uploaded data in your PHP script. You need to open the file stored at $_FILES['senderResume']['tmp_name'], read its contents, and attach it to your email message using something like the PEAR Mail_Mime package (give it a MIME type of "application/pdf").

When I added the code for the contact form, the background I set for <html> seems to vanish. The first css rule pertains to setting the background to a full image, and while it worked prior to adding the contact form, it seems to now be in conflict.

Is there anything you guys see that could be blocking the background image from appearing? Any help would be greatly appreciated!

Thanks!

P.S. on an unrelated note, I'd also like to center images/finalbackground.jpg, but all the various css positioning techniques I've attempted have resulted in no dice. Any suggestions?

I'm no expert but I took at look at your CSS and noticed a couple of obvious problems.

You have <style> tags within your CSS file, which seemed to make it about as useful as a ginger-haired-step-child. Also, the background image is being added to the <html> tag, which I'm told is not ideal. IE doesn't understand this, so it's best to use your <body> tag instead.

Lastly, the way you had included conditional statements at the end of your main CSS file won't work. I recommend creating a special file called "IE7styles.css" then adding code along the lines of this into your <head> tag within your html file:

Is it possible to modify this so that there are 2 different contact forms on one html page. I need one that is just a generic contact form like the demo to send to info@example.com and another contact form on the same page with one additional field (drop down field) that sends an email to specialorders@example.com. Any advice on how to accomplish this would be greatly appreciated.thanks

Yeah I use a couple of things now, after doing some reading. I use two Firefox extensions called Firebug and Web Developer. Firebug is great for inspecting CSS via right click, to work out what the hell is going on. Web Developer is great for editing the CSS to generate a new CSS file (like I did for you in like...2 mins).

As for the blank index.html - before you added the file I could navigate directly to 'http://www.tosstemple.com/images/' and browse through every image file you had in that folder, save them down, etc. It's just best practice not to make it easy for folks to copy all your media in one click. Glad to see you added the file.

So here is an example of what I'm trying to do. http://twistedsisterscupcakes.com/Contact2.htmlI can get the 2 different forms (contactForm, contactForm2) to pop up and fade out but neither will send an email. It says there is a problem sending your message. I moved the jquery from the html page to specialorder.js and contact.js. Does processForm.php need to be in the same folder as my Contact2.html? I have it in a different folder (php).

@matt thanks.I've got the first contact form working but the second one says "please complete all fields in the form before sending" even though all the fields are filled out.

I added ?ajax=true to the form action and turned off javascript in my browser. The first form returns "Thanks for sending your message! We'll get back to you shortly." and successfully sends the email. The second form returns "success" and successfully sends the email.

great stufff love it,,also i have a question,, how to change tooltips "Please fill out this field" and "Please enter an email address" i can't find out this text on source,, am noob for this,, any help would be nice,,

@dzoid11: You can't just duplicate the form in the page, using the same id attributes, and expect the JavaScript to know which form it's working with. id attributes have to be unique in a document. Once you have unique IDs you'll also either need 2 different contact form scripts to work with the different ids, or modify the one script to accept a base id (eg "contact-" and "special-order-") that it then uses to determine the ids of the form fields it needs to work with.

hello matt... Thanks for the amagind script... i am using your form for getting details from the customer before downloading the pdf.. so naturally no change in form page.. but when it throws to processForm.php i have to send details in database. that i done. but after that i hv to send pdf file to user for save. it works but ont in scusees mode.. and form is still appearing on the page..!!! one more thing pdf path is also come from database by the select query on the same page i.e processForm.php i dont required to send any emailhere is the code for my processForm.php

@akilshaikh: The contact form JS expects an Ajax response (success/error), so sending back a stream of PDF data isn't going to work. I suggest you modify the JS so that, once it receives a "success" response, it redirects to your PDF:

window.location.href="http://pdf-url"

This can either be the actual PDF file, or a PHP script that serves the PDF data.

thanks for quick reply.. but still i am little bit confuse. where should i write this code.. in jquery.min.js fileorin my processForm.php page. after my insert query. And after applying this i hv to write the php code for download file?i try after insert query. it loads the pdf but in same the page. and not prompt to save .pdf file and user have to click back button of browser to go back to site.. u know its not user friendly.. so plz give me some hint about where should i have to write this code. i hope i am not bothering you.. i am littlebit new to js. so don't wont to take any-type of risk with the js file.. hope u understand that.... thanks a lot for your quick response

Firstly what a slick form this is. I got it working quite promptly but when I validated it I got the following error, right over my head opinions would be most welcome. Best wishes NickW3C Mark up validatorValidation Output: 1 Error

The value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected="selected"”; a value like “selected="true"” is not allowed.

Hi, i was wondering if you could advise on a small piece of code or link to incorporate this form to an existing website for instance i have different contact options on my site like ones an image then there is some text id like to link it too.

@akilshaikh: In the JavaScript in your contact form page. Modify submitFinished() to redirect to the PDF URL if a "success" message is received. You don't have to use PHP; just upload your PDF file somewhere and let the web server serve it to the browser.

Thanks for quick the reply Matt, unfortunately I've been trying without much success i know its probably very simple but i haven't been able to get it right could you please past the code for me and direct me were to slot it, otherwise i want be able to use this form for my website and i have to be honest I've seen a lot of contact forms but this is the mother of them all and really want to use it.

Now when i apply this code pdf is downloaded successfully but it doesn’t want prompt to download and still open in same page. now you can see that this code work in else portion. so naturally success part is not working u can look at my site how i customize your form for my site here is the link

hi, great tutorial ive imbedded the model into an module in cmsms, and i thought id finished - but then realised that the validation processes on both sides client and server dont seem to work in IE7-9. your tutorial version does not either so I wonder if you have any ideas ?

javascripts are obviously running because the fadeouts and hiding work, as well as the ajax call and email processes, but in ie i can fill in garbage in the email field (the only field im using) and it passes right through to email, in chrome, firefox etc all works as expected

thanks for prompt response, actually I have used the correct doc type but if i had not - that would not explain why your demo run from your site does not work either ! is there perhaps an issue with windows 7 and ie and the tutorial? i have tried running your demo from both a pc and a laptop and both allow rubbish through the email field and behave as though it is successful - running your demo from your site (eg here) in all other browsers seem to work as expected and the rubbish is stopped.

sorry to persist - it would be hugel-y useful to resolve this whatever the reason! many thanks

@akilshaikh: You need to modify the submitFinished() JS function to do the redirect. You can't spit out the JS from your PHP script like that. The contact form JS expects an Ajax response string ("success" or "error"). If you need to redirect to a dynamically-generated URL then I suggest you get your PHP script to return the URL in the Ajax response. Then modify submitFinished() to treat a response string beginning with "http://" as "success", then just do 'window.location.href=response'.

I have a question regarding the PHP form mailer and email syntax.I would like to also add the dot com (org, ee etc) there too because at the moment it sends the form even if I just enter m@m in the email field but it should only work when I must enter m@m.com for example.

Hello, it's the best contact form i have seen on the net. Anyway I've got a problem.I was read almost all posts here but I didn't found my problem.

How it look's like:After "send" if it is success you should get msg "thanks, sending etc" and on other case "fail".In my case, after click "Send", mail is sending to recipient email, but look like my php files doesnt not send success command to ajax in html file and on screen is display second case "fail" - "There was a problem sending your message. Please try again."

Php on my server should work good and I think it is, cuz it sending email. But i have no idea where the problem is.

First thing, great job on this tutorial!Second thing, i dont know if its just me, but i cant seem to get recaptcha working with this form. i tried it with only the php script and it worked fine. But when javascript is beetween something goes wrong. Is there anything i need to add to this javascript to get it working?

Hi Matt, I added this form to a site last year and it worked great and looks great. The problem is the form has stopped working. There has been some content added over the last few months so its possible something has been changed but I can't find it.The form is at www.listertrack.co.uk, when you click to submit you are left with a message that says "Sending your message, please wait". The email is not coming through and that message stays on the screen until you refresh.

Could I please ask that you point me in the right direction to solve this problem.

@amin: I don't know the Persian character set or how it works with regular expressions in PHP, so I'm not sure exactly what you'd put in the whitelist. But essentially you want to add the range of all allowable Persian characters (the Persian equivalent of A-Za-z0-9).

Hi Matt, I used this excellent tutorial for my website but I have several problems with Internet Explorer. The first is that not any text appears on the labels of the placeholder. The second problem is that when I send an email even if it is poorly written and without the "@", continues to send the email.This is the link to my website: www.kromweb.comI do not know that I have to do to fix it. I would appreciate your help.thank you very much

// Hide the form initially. // Make submitForm() the form's submit handler. // Position the form so it sits in the centre of the browser window. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

// When the "Send us an email" link is clicked: // 1. Fade the content out // 2. Display the form // 3. Move focus to the first field // 4. Prevent the link being followed

When I cancel the form, how do I reset the value for the input field? I tried:

$('#typeOfPet').val(0);

to select the first option value. I have learn an incredible amount of coding with this example for which I am very grateful for but I am stuck on how to reset the value because after I cancel the form and then reopen the form, I still see the selected value that was chosen before I hit cancel.

Nice form Matt. I've just ironed out a few problems I experienced while trying to work it into my existing site and thought I'd share a few things I had trouble with, and how I solved them. A lot of trying to run before I can walk here!

First it was difficult to get the thing to size properly so I had to tweak a few things in my existing CSS to get the form to display at the right scale.

Secondly while developing on my own machine (localhost) I was having a problem with the name and email boxes appearing as different widths - but only in Opera. It turned out (after much head scratching) that the php warning I was living with while working on my local machine (it was a SimplePie warning that the cache folder wasn't writable) was somehow throwing the form fields out in Opera. They worked great in other browsers but it was only when I decided to get rid of the warning message at the top of the page that Opera decided to play ball.

Thirdly (Opera again) I had a problem with the italicised characters getting "chopped off" in the form header. This is something to do with Opera not liking fonts being italicised when there isn't an italic version in the font itself (or something like that). Again I was trying to get it to work with the font I was already using on the page (Tahoma) which worked in every other browser than Opera. Changing the font-family back to what you have in the demo cured the problem.

Last but not least I also experienced the problem noted by @aliveit where the error message stayed on the screen instead of fading out and returning to the form. Apart from not actually having a #content div on my existing page (I had one called wrapper which I eventually renamed to content) it turned out that the real culprit in my case was simply that I was already using jQuery for something on the page, and I was trying to use that instead of the one which you have in the source code. When I switched to using that everything worked

Hope this helps someone.

P.S. Matt,

I want to use the same type of form for my site sign up and also for someone to send me an actually enquiry, rather than a general message. How would you go about implementing that? Would it work if I wrote three separate sets of forms and handling scripts?

I've already had to rename the function from init() to initform() to avoid a conflict with your javascript tabs script, so I suppose it should be possible to triplicate everything? Or can you suggest a cleverer way for me to investigate? I was thinking along the lines of having a second set of js tabs which pop up like this contact form, but with a different form on each tab.

Ideally I'd like the enquiry form to allow someone to attach a file too, but I'll cross that bridge when I come to it.

I having a problem with your form since I move my web server to my own iMac. My server before was yahoo server but now i decide to host my own site using OS X Server and since i move all my file the form giving me always some of the no sending messages because it doesn't send the emails????

What will I have to change if i want to have the Form always visible?I’s working but after having sent the email, the status message appears on a new page. The Ajax message doesn’t appear on the page itself.

it's a fantastic little heavy-less ajax script, love it, but ...the formprocess ... good grief that needs a major rewrite, every little boy can hack and inject you with their little left finger only...

I love the whole setup but yes, ... I won't use it because of what I just addressed.

@Detoussay:I don't know PHP at all but, if you open something... '{' then you need to close it!Hence, you should mention to add a '}' after the one 'if' which you place your 'if' just in front of. ...

@matt:you address Detoussay and tell him... a spammer still can ...Well that's true, but using your form process php as it is, every spammer and all sick folk can do with you whatever they feel like.

you just proved what kind of lousy programmer you are. What are you talking about, shall I send you my code I have on another form, a form which I actually USE! ?Gee, another "professional" (spammer, hacker, phisher >>> ??? )! Can only be one fo these, to keep your doors open you lie at other! We know how you folks work. but not everyone is as dumb as you'd hope!

Hi Matt, This is certainly a slick contact form and its exactly what Im looking for, but I keep on having an issue with the form submit. Specifically, after I fill out the form and submit, I get the error message that there was a "problem sending." However, the email actually goes through. I know some others had this same issue, but I can't find the fix for it. The code I used is identical, from what I can tell, to the one you wrote. I could use a little help.Thanks!

Update: I did a work around. Given the emails were going through, I just tweaked the javascript. Its not the most elegant, but it sure does feel damn good to not get the error message

if ( response == "success" ) {

// Form submitted successfully: // 1. Display the success message // 2. Clear the form fields // 3. Fade the content back in

with your header i can't send any email with this form, alway give me an error message "There was a problem sending your message. Please try again."with my i can send the email BUT i can't replay to the senderEmail, it just replay to my self.

Thanks for the nice form! One thing has me puzzled, though. If I submit the form without filling in the name I get the message:

! Please fill out this field

But this is not the incompleteMessage and, in fact, this message appears before

function submitForm()

is even entered. A search through all of your files doesn't even find "Please fill out this field". So where is this message coming from? What is checking the form at this level, before submitForm() is entered?

I have same problem that kirshnam and I use the correct version of jquery. I have this problem when I submit the form "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."Thanks

This works great if you are having the contact form send to an email on the same server. I've tried this on multiple servers trying to get it to email outside the server and it doesn't work. Am I missing something or does this need additional code added to use sendmail or something similar?

This is a very nice Contact Form. I have everything working and giving me the correct responses on my web page. The only thing I am having a problem with is. I am not receiving the email. I tried sending it to my yahoo account and then changed it to my gmail account but it is not getting to either one nor does it show up in my spam. Do you know or have a fix for this? thanks

@butterman, did you read the reply to my post about that exact problem from chrishirst? The form is not configured to use sendmail to deliver mail outside the server. Follow the directions in the link he gave in my post above yours or you can can create an email account on the server you have the script on and have that forward to your yahoo or gmail.

" The form is not configured to use sendmail to deliver mail outside the server."

How do you know that??

"butterman" hasn't actually said where the script is running, it may be the same problem as you have, but then it could be one of a dozen other things that create issues with Gmail and/or Yahoo! rejecting email messages.

You're such a condescending cock sucker you know that chrishirst! You are the one that said in order to send outside the server the script is on to configure sendmail to use an external smtp.

"You need to configure sendmail to route mail via an external SMTP server, known as a 'smarthost'."

Why would your brilliant bitch ass say that if the script was really worth a **** and had the ability already built into it? It does now that I've torn it all apart and rewritten it to save to MySQL and email to any email configured into it. You're a douchebag dude, people are asking for help not a punk with a smart ass answer like you have every time!

That was as an answer to a completely different question, one were the real problem was known.

Now, maybe you should go and look up the meaning of tutorial. The script isn't intended as a fully featured, "one script fits all" solution, it is for anyone learning to code to LEARN FROM and extend as necessary.

Just because the message does not arrive at Yahoo and Gmail account does not mean that it is not leaving the machine the script is.

Anyway when you have grown up enough to know that trying to insult someone you don't know is rather infantile, and a little pathetic, you might even know that ASSUMING anything is not the way to provide useful answers.

I am sending mail through godaddy and down to my gmail account. It works great when someone puts their hotmail account in and now their gmail account, It's just not coming though when they use their yahoo email account. I am not sure about outlook or any other email accounts at this time. I think the problem has to be with this SMTP stuff you are talking about so I will go school myself on that and see if I can find a fix. I think this is the best looking contact form out there so I will get it to work. When I find the fix I will let you know. In the mean time if something comes to mind. Please let me know. Thank you for your time.

Chris....I finely understand what you mean about route mail via an external SMTP server. I was actually trying to route the emails straight to my gmail account from the processform.php file. Everything was showing up but the yahoo emails for some reason where not. Then I created a new email name in my godaddy account and put that email name in the processform.php file. I put a forward to my gmail from my new godaddy email and everything works. I am going to assume thats what you mean by route mail via an external SMTP server, (ie... use the email name on the server not you gmail name) Thank you for the help......

I followed along with this tutorial and I must say, wow. Very insightful. Thank you so much.

I am running into one problem while trying to add a little extra functionality and I cannot seem to wrap my mind around it. If I leave everything as is, the code works great and it sends the email just fine. But what I am trying to add into the PHP page is the functionality to where, before the email is sent, it stores the variables into a MYSQL database. However, the moment I add the code below, I receive the message: "There was a problem sending your message. Please try again." If I remove the INSERT statement from the PHP page, everything goes back to running smoothly and sending the email. Here is the current code I am using to try and insert the data into the database:

I wanted to post again because, after much head-banging against a wall (LOL), I finally realized the errors of my way. The problem was that I was trying to insert into a database that I hadn't connected to yet. So al I had to do was actually connect to the database (what a novel idea) and all was well.

After getting everything to work properly, I actually do have 1 question about the difference between the example on this site and the one I implemented on my site.

When I downloaded the source codes and applied the files to my server, and tried it out, it worked great both on my desktop and on my mobile phone. On my mobile phone, the modal window fits nicely into the size of my screen. However, when I view my version that I altered a bit on my mobile phone, the modal does not shrink down, and most of the important buttons and text fields fall off the screen and makes it impossible to use. Does anybody have an idea of what would make mine differently? Here is my CSS code that I used:

I'm implementing this form into my site as we speak because without doubt, it is unbelievably slick! BUT one problem I've been trying to sort out, can anyone figure out why theres a big blank space in the message text area and it'll only display the placeholder image after deleting some whitespace? thanks

I know you're showing how to make a contact form appear so it's non-obstrusive on a page, but if I just wanted to load the contact form so it appears within a page(without onclick) and still functional, how can it be done?

Hi Matt, still using this great script but I've recently been hit (big time) by spambots.

Rather than mess around with captchas I added a line of code to capture the spammer/bot's IP address and include this in the email I receive from the form, then I add that IP address to a blacklist I use to filter out unwelcome guests and redirect them to somewhere else.

In case this helps anyone else I thought I'd share:

1) Add the following line to processForm.php, at the end of the section near the top which says "// Read the form values"

$message .= "\n" . $_SERVER["REMOTE_ADDR"];

2) Add the following script to the top of the page containing your contact form:

I have two questions. First is there a fix the yahoo mailing problem. I have my mail which is hosted on godaddy.com forward my mail to my gmail. If the sender post their email account with a domain of @gmail and @hotmail it gets forwarded to my mail wit no problems, but if the sender post with @yahoo domain I don't receive anything.

Second question: i'm trying to add the css on to an external stylesheet like I do for all css, but for some reason the css only works when it is embedded in the main html page. Am I missing something?

Greet you the author!This is a great lesson, and the script feedback form - in my opinion, is the best among others.But I have trouble you with my problem. It related with use of the Cyrillic text.I have read and reviewed all the posts about the problem with the UTF-8 here. Made all the changes and additions that you suggested. Namely:

Sender's name - it's OK, however, text of the message looks unpresentable (for example - "абаОаВаЕбаКаА", although it should be "Проверка"), if in the form it was writing in Cyrillic.In addition, viewing the body of the message, I saw that the script does not assign message encoding. In the source code of the letter was written: "...X-Amavis-Alert: BAD HEADER SECTION, Non-encoded 8-bit data..."