PHP Contact Form with jQuery Validation

Hi there! You need a jQuery contact form for your website but don’t know how to create one? Please read along and maybe you’ll get lucky. A contact form is very helpful in giving your visitors a way to contact you. In this tutorial, I will help you on how to create your own jQuery contact form using PHP and JQuery.

Let’s start with the basics. We only need a single page for our contact form and this page will contain the markup, PHP to process our contact form and JQuery validating. For those who need to see a working demo of the jQuery contact form, you can check it out here.

Step One: jQuery Contact Form Markup

First, let’s create the markup for our contact form. Create a new page called contact.php (or whatever name you want as long as it has a PHP extension). Having a PHP file affords us the luxury of only having a single page to display and at the same time process our contact form. We also used a PHP constant for the action value of our contact form. That constant is the filename of the current file, relative to the document root. This is to ensure us that our form will go to the same page after sending our form.

Step Two: Give it some style

We’re going to apply some styling to our contact form using CSS to make it more interesting. For the purposes of this tutorial we’re going to embed our CSS right inside contact.php inside the head section and in between the style tags.

Step Three: Validate using JQuery

Loading JQuery alone only gets half of the job done. We still need a JQuery plugin called Validation to help us validate our contact form. After you’ve downloaded and extracted the plugin, look for jquery.validate.pack.js file and save it where your contact.php is saved and reference it from the file just like what you did with JQuery.

After that, we now need to add a class attribute to our input fields. If you just need a required field you just add class=”required” to the input tag and when you need to require and validate an email so that the format is correct then you need to add class=”required email”. Here’s the updated markup for our jQuery contact form with the classes already added.

Now refresh your jQuery contact page and submit the contact form without entering any data. Your contact page will catch the errors and hopefully will look like the image below. Also try entering a different format for the email field and you should see a different message. Try reading the Validation documentation for more validation options.

Step Four: Submit and process the form using PHP

Now it’s time to add some PHP magic to our jQuery contact form! Place this code on the topmost section of your file (just above your DOCTYPE declaration). You might be wondering why we need to validate the inputs again even if we already validated the inputs using Javascript. The reason is that PHP will act as our second level of validation in case Javascript is turned off on the client’s machine. I highly suggest that you don’t rely on Javascript alone for validating form inputs. Aside from validating inputs, PHP will also be responsible for sending out the email in case no errors were found.

I’ve stripped down and borrowed the code below from this very helpful article. The green comments should basically explain what each code snippet is doing.

We’re almost finished! All we have to do is insert a little more PHP to output two kinds of messages. The first message is to notify us in case there were errors after our submission, and the other is a message to tell us that the email was already sent and no errors were found. The code for that will just sit right inside the contact-wrapper div but right before the jQuery contact form markup.

We are Done!

You have created a jQuery contact form using PHP and JQuery for validation all contained in a single page! All you have to do is put your email address in line 41 and off you go! Great job! I hope you will find this tutorial helpful as I’ve carefully detailed all the steps needed to create our contact form. Please tell me what you think and I would appreciate your comment. Thank you so much for reading and hope to see you again.

@Jitendra Vyas: Please check your spam folder. I noticed that Gmail tends to classify the email as spam. I tried using a Yahoo mail and everything was sent to my inbox. I guess this has something to do with the headers from the email.

You might want to wrap the input in the label tag too. Some people prefer that method, however you’d need to wrap the label’s text in another tag, or add some more styling to the strong tag to format it in the correct manner.

Ideally you’d submit the form to another php page too, because if someone refreshes after sending an email it’ll send it again.

I copied and pasted the code exactly from the ‘Finished Code’ step, changed $emailTo = ‘youremail@yoursite.com’; using my own e-mail and also checked that the path for the js links were correctly but, when I tested it, it just didn’t work. Some help needed. http://www.danalberto.com/danalberto/contact.php

I’m here to help. What do you mean by “it just didn’t work”? What message did you get after you submit the contact form? Did you get the info details from the contact form to your email? I sent a message using the contact form you provided in the link and I got a confirmation message that my email was sent.

I also tried what you did by copying the finished code. I changed the email and it worked out just fine.

Try checking your spam folder. If nothing really works out just double check everything and try out different email addresses or just try different approaches. Sometimes you really have to troubleshoot in order to find out what’s really happening. Thank you and good luck

@Randy: Yes, you could try putting the PHP code into another file then include it at the topmost part of the file that displays the form. Just make sure that all files are in PHP. Let me know if you’re successful with that. Thanks.

Thanks for the tutorial. Now i am implementing most of your code within my client website! as they doesn’t require a very dynamic website (which i prefer to use WordPress, usually), your code seem to fit the bill for most of the basic website need today. Thanks Raymond!

I was wondering if Randy got it working linking it to a Contact.html page rather than PHP page?

We’re working on a site that doesn’t have PHP on the hosting but just want to point the form to execute on another server location that has PHP hosting.

Example:
Contact.html will be part of the site. And form to post through to contact-form.php on another server

I’d like to do it this way rather than using an iFrame. Have you any suggestions apart from just making the files PHP?

Thanks,
Scott

@Randy: Yes, you could try putting the PHP code into another file then include it at the topmost part of the file that displays the form. Just make sure that all files are in PHP. Let me know if you’re successful with that. Thanks.

I think you cannot call it from another server. The files should reside in the same server. If you don’t have PHP in your server, you could try to process the form the old school way by using CGI. I never tried it though.

Hi, great tutorial – really clear and you have gone though the process stage by stage but, I’m still stuck.
I copied the code, saved it into a file called contact.php and changed the email to my own. I then uploaded this file along with the jquery.validate.pack and tested it entering http://www.lexinc.biz/contact.php.

when I come to that address all I can see is code on a white background, no form to be found!?
soooo frustrating, i’m obviously doing something daftly wrong and I’m sure its simple…please help!
the hosting package include php…

what could be the problem, I would be most grateful for a response! thanks, Lloyd

Hi Raymond,
I found out that the hosting package didnt support PHP!! argh!
Just one other thing, the form looks different between firefox and IE….In firefox if you dont enter the required information it comes up under the field box saying “information required” whereas in IE, it comes up with the informaiton at the top of the form “Please check if you’ve filled all the fields with valid information…etc”

Is there are reason that it is different?

Thanks for your help, I really appreciate it – if you need to show people working examples please refer them to http://www.lexinc.biz if you need.

Good thing you figured that one out. Your site’s contact form is looking nice. I believe it’s the plugin’s feature that’s causing that behavior in IE6. It’s nice because it has an extra support for IE6. Looks okay in IE7 and 8.

I’m glad you already visited the documentation page. Just do and follow the example code. Nothing will really happen if you just stare at it. 😉 Good luck and please let me know if you’re still having problems.

Warning: mail() [function.mail]: SMTP server response: 554 The message was rejected because it contains prohibited virus or spam content in D:\———–form.php on line 19
or
Warning: mail() [function.mail]: SMTP server response: 451 See http://pobox.com/~djb/docs/smtplf.html. in D:\———-contact.php on line 45

this form gave me 451

i added the ———- but i don’t think its the code.Ive did some reading and SMTP come up also im with Godaddy.

Nice to know you’re trying things out. I also tried to work this one out and I have to admit that it’s kinda tricky. After trying a few things out, I finally got it to work. Just change your code (head section) to:

what shall I say, you put the sugar in my coffee, now it taste good. I thank you very much, it works.

There is just one little more thing for betterment, after the mail was sent, it is possible to refresh the page which send with every reload the mail again.
When the mail was sent, how I can redirect to another page after a few seconds?

Good to hear it’s working Coffee. As for the redirection, one way to accomplish this is you can put a header redirect function header("Location:http://www.domain.com/page.php") after the conditional statement that checks whether the email is sent inside the body. Try that one. Good luck.

this script is great and works well on my server, however, I get the following error message when I upload it to the clients server. Could it be because their host doesnt support php? cant think of another reason???
Notice: Undefined variable: subject in \\NAS42ENT\domains\s\s…….

I’ve uploaded all of my files and everything looks/works great. I just tried to submit a form in IE8 and it didn’t work. The fields cleared, but neither the success/failure messages appeared and no e-mail came through. I’ve submitted the form successfully in both Firefox and Chrome so I’m not sure what the problem could be.

Thanks again for an awesome tutorial and any feedback you can provide.

Thanks for the comment. Try to copy and paste the code from this tutorial. I would recommend you write it manually to learn more efficiently but you have to check carefully. Check everything. I’ve tested the form in IE8 and it’s working okay (I received the message and email). Good luck. I know you can pull it off.

Thanks for the quick reply. After copying the final code at the end of the tutorial, I tried it in iE8 and it worked. I had a look and I figured out what the problem was. I had created a submit graphic to replace the gray box in order to match the look of the page. I was using this:

Second, I have this problem with cyrillic text. When I tested the form by typing in cyrillic text, which is important for me, and sent the message, I received complete nonsense like: Ð¿Ñ€Ð¸Ð²ÐµÑ‚ instead of the cyrillic text. Can you help me?

Great script thank you. Only problem is that when viewing the demo and trying it on my own site i get a page error in IE6? You know the little yellow icon that is next to ‘Done’ in the status bar..any ideas what is causing that?

No prob Raymond – just wanted to make sure it wasn’t something I was doing – checked more into it and it seems other forms that are out there and built w/ the jquery validation don’t play nice w/ ie6 either – just going to use a simple redirect for those users to a more basic page – nice tut! very useful!

I don’t know if I am lost or just have a brain-freeze but here it goes. In order to have the field validated you said to put in “class=”required”. But then how would you be able to style the required message?? For example if you style the message to RED font then that also means whatever you type in the input box is also RED….

When you send the form with errors, the plugin will insert a label (This field is required) with class in the code. You can now style that label using CSS. You don’t have really to put any CSS for the ‘required’ class because it’s needed by the plugin. Hope that answers your question. Thanks for asking.

Thanks for the quick reply. What I mean is I want to style the required field label to RED for example. So when the message comes out, it is visible. But since the class=”required” is inside the input tag, it makes the text inputted RED also….Hope that is more clear on what I am trying to do..

Thanks also for the quick reply. hehehe. You will give the red styling to label.error and not to the input tag. If you want to style the input tag you can do so by ‘class=”required yourclass” />’ and then style “yourclass”. Again, if you want to style the ‘field is required’ messages, you can do so by applying CSS to label.error instead. Hope that helps Keay (having troubles pronouncing your name. hehehe).

One more question. How could you go about validating an input field but not have it required? For example the contact number field I want to make it optional but if the user types the number in, I want to make sure it is sanitized but also validated to make sure it’s all numbers..etc…

hey i used the code here verbatim and it sends me the email from the form, however with just the text result, the actual form input data is not there. its like the variables are not translating over what they really stand for. any help would be great

Ray, Thanks so much for all the help you have provided as well as the awesome contact form.

Is anyone having trouble with using this on a GoDaddy Server? I can get this to work on a friend’s server, but for some reason, when I transfer everything over and test it out – I get an error:
“Warning: mail() [function.mail]: SMTP server response: 451 See http://pobox.com/~djb/docs/smtplf.html. in D:\Hosting\3320592\html\contact3.php on line 45″

Line 45 is the mail function.

I ran my server’s php info and it reads that I have PHP Version 5.2.5

I also created a blank php page and tested the mail function with something like this:

Success – I got an email.

I can’t figure this out on my own and any support would be greatly appreciated from me and fellow GoDaddy users.

I contacted GoDaddy about the problem. They wern’t much help but recommended the following:
1. specify an outgoing mail server
2. specify the relay hosting server. They said relay-hosting.secureserver.net with port 25 works
3. specify SMTP settings

I’m very new to php and contact forms – any help would be appreciated. Thanks!

Yeah. I think I wouldn’t include the script inside WordPress articles either. It all depends on the platform that you use. I don’t have any experience with Joomla so I can’t be sure how you would approach it. But I have to say that it can be done using separate files. Good luck with that.

Hi, nice great stuff!
but can I call this jQuery and PHP form validation from external file, like say not embedding all the codes in contact.php because I don’t want my email address to be displayed to everyone?

Ray, THANK YOU SOOOO MUCH for taking the time and energy to share your wisdom, your tutorial is EXCELLENT!!!

I know you are bombarded by requests, but if you have an easy answer would you please help me.

what I am baffled by is-
when someone fills out my contact form on my site it sends me an email (duh) and then when I hit reply…it is (supposed to be) programmed to reply to THEIR EMAIL ADDRESS. which it always did before.

now either I accidentally changed the code, which I have checked thoroughly and appears to be correct:

{
$additionalHeaders .= “\r\nReply-To: $email”;
}

OR MY GOOGLE ACCOUNT HAS LOST IT’S MIND!

because here is EXACTLY what the google email header says when I get an email from my contact form, which is correct:

Hi, trying to implement this form but when I submit it always shows the message “Please check if you’ve filled all the fields with valid information. Thank you.” rather than the ajax validation messages….?

Hi Great tutorial. Very easy to understand. But I have a question.
If you have two forms on a page how can you include them both. Im not sure how to add this function. I think it needs to go in the head before the DOC TYPE code. Really really new to all this.

R/Sir/Madam
Sir, myself Ashish working as a PHP programmer in greycells. I want to learn jQuery as soon as possible and also sir I have to make such a function that , ” to allow website visitors to search for phrases and words and find pages with content that matches” in jquery and it should run without need of google or any searchengine and sir my website generates pages from database, Sir if its possible then please send me the script as early as possible

Okay I tested your demo form and I see the screen shot where it says “this field is required” — I also see the tip about reading the documentation. Sorry for the hasty reply….and I think I understand which part I skipped.

Hey, great tutorial! Got this thing up and running with relative ease.

Question though, my website is setup using jquery to show/hide divs based on the page you’re viewing. Basically, if you’re at index.php#home, you’re on the home page. index.php#contact, you’re on the contact page.

The problem I have is, whenever the form is submitted, it reloads index.php rather than index.php#contact. How can I direct the contact form to #contact?

Many, many thanks for such a useful and readable tutorial! It’s just what I was looking for.

I have a question regarding possible spam issues with the form. I’ve placed the actual PHP submit script in a folder on my server and linked to it with a require_once statement. It works great! I am however a little worried about the possible spam implications of the script (if any). I don’t know enough about how it works to say one way or the other!

I’m probably being very paranoid, but any advice in this regard would be most welcome.

Again, many thanks for taking time to write the tutorial and for sharing the code!

I have everything worked perfectly, but was wondering how to redirect to an anchor within the same page. I am using jquery sliders to direct the user around the page. When I click submit it just reverts back to the initial area when the page is first loaded, not the area where the contact form is. You can view the problem at http://www.unkemptbeard.com

First off. Just wanted to say how much I really appreciate you sharing this. It is an amazing tutorial and was easy to follow.

One major issue I had was that after submitting the form, the form fields were still there! I just added a simple Else statement and after submission only the response appears. I have pasted the code below. Second, I noticed that if I use test@test.com as the submitters email it will go through, but I won’t get the email (in my inbox, or in my spam). Does this deal with the validation javascript?

<?php if(isset($emailSent) && $emailSent == true) { //If email is sent
echo "Email Successfully Sent!
Thank you for using my contact form! Your email was successfully sent and I will be in touch with you soon.
";
}
else{

Hi I really like your form. I have a stupid question. I have a four page website and I would like to use the form on every page (for quotes I am a designer), is this the right type of form or is this gonna mess up my whole site?
Thank you for your help

Actually that’s a very good question. I think you can use that form in any page and it won’t mess up anything. That would actually be a nice experiment for you. Maybe you could try putting the form on your sidebar. Try it and good luck.

I started working on the form. I put it on my first page. It looks great, I have done some css changes and it matches my website. On technical side – all the functions work properly, except for one important thing 🙂 – it does not send the email. I have tried mac mail, yahoo mail, nothing. The website is not finished yet, so I am testing the PHP page it through MAMP. Could that be the problem or what am I possibly doing wrong? Please help.

You need to upload your php file to the server, than the form works perfectly. The problem with MAMP or WAMP is that it will let you test the page and the jquery functions, but the form just doesn’t send out emails from there. Maybe the “pro” version does who knows :-).

This is a great tutorial and so far only contact form that actually works, but this guy Raymond doesn’t seem to be answering posts anymore, so good luck!

Thanks Eva for taking the time to answer the question. I know that will help many people with their issues with the contact form. Everything is laid out in this form and I don’t plan to update it. If everything doesn’t work for the first time then don’t give up. Look at every line and test everything. Actually I didn’t get this to work the first time and it took me quite a long time to make it really work. Just don’t quit. This is only a basic form and you can take it to the next level if you want to. Honestly it’s been a while since I’ve programmed in PHP. hahaha.

Raymond lives! hahaha, what a surprise, I thought you have abandoned the page.

Anyway, since I’ve answered a question for you, perhaps you can help me with this issue – I have asked you above whether the form won’t mess up my page. Well it did.
I have a lightbox 2.04 on one page and the contact form coding knocked off the function, so now it does not work at all – aaaaahhh. I am not skilled enough to fix the javascript code. Any suggestions?

You have a very nice website and I love your work. Believe it or not I’m not really that much skilled in Javascript either. Honestly, I hate JS. hehehe. What you can try is also use jQuery for your lightbox functions just to avoid Prototype/Scriptaculous functions from conflicting with jQuery. Hope this helps and good luck.

I love this – it works great with one problem; it fires off an email (with blank fields, of course) when the page loads. Once the fields are filled out and submit is pressed it works perfectly.

I think the problem is this:

When the page loads the first two functions seem to load. The first function will only trigger if there was a Submit, which there isn’t. The second function will actually run because the hasError variable was never initiated and does NOT resolve to ‘true’.

Hey, I love this tutorial and I am about to implement it into a new design. I kept getting my mail in my spam folder in gmail so I changed the $headers line to $headers = ‘From: My Site ‘ . “\r\n” . ‘Reply-To: ‘ . $email; – works great now!

just wanna ask..why is that everytime i fill up the form i didn’t received any message to my email..all i want is after fill-up the form…on my yahoo mail “jheyven_05@yahoo.com” will send directly the message that i put it on the form?? how can i do this???

Hello Raymond. My question is: I’ve test the form on a Linux server and the email arrives ok… but I’ve also test on a Windows Server, and the mial doesn’t arrives…. I mean.. the email seems to be sent, but nothing arrives… Any suggestion?

Firstly.. thank you so much, I really appreciate the effort put into making this tutorial so easy to understand.. It is exactly what I wanted :). I have got the script working perfectly but I have a query. Is there a way to display the thank you message ( or the error message) in a pop up style dialogue box, like within a JQUERY UI style box instead of displaying it in the default position above the form. If you see http://twitaflick.com/avatar and click contact you will see why I require this. Once a user hits submit, the page is reloaded and no thank you message is displayed unless they were to press contact again, as the contact form is within a slide panel located at the top of the page. If a pop up message was to appear it would be cool and solve a problem 🙂

thanks for the wonderful form, works like a charm! I do have a question though. I wanted to add a couple of fields that aren’t required. I really don’t know php and only just found out you can’t lookup php code by looking in the source 🙂

I was reading through the comments but couldn’t find the solution. Could someone help me out with the code?

I also had the problem, that no mails came in. Perhaps you can solve the problem by changing the settings in the administration of your provider. I had to define a mail address as default first and then it worked.

I was wondering how, instead of the email being from “My Email” if you could make it from the email entered in the form. I tried putting a ‘$email’ after $headers = ‘From: but it just made the text ‘$email’. I also tried copying the ‘ . “\r\n” . ‘Reply-To: ‘ . $email; and changing it to $emailFrom but I got an error. I’m sure this is a simple thing to do, I’m bad at php. I apologize if this has been addressed already. Thanks for the tutorial!

If you want custom error fields, it would require some tweaking. The following is a short tutorial for those of you who would like to modifiy the error messages. By the way, if you would like to change the style of the error message, it’s all done within your stylesheet with the “label” tag.

The form itself is like Selda’s except there’s no class for the required, so build your form without them but remember to give your fields unique ID’s.

Within the header of your contact page, you will need the following links, which are provided by Bassistance :

Like Selda’s, you will need to put the following above the doctype ( This is an example of the error messages or optional fields, modify to your own requirements. ) :

<?php
//If the form is submitted
if(isset($_POST['submit'])) {

//Check to make sure that the name field is not empty. This is required because of $hasError = true;
if(trim($_POST['name']) == '') {
$hasError = true;
} else {
$name = trim($_POST['name']);
}

//This one is optional, I added the striplashes to take out the / when " or ' is added.
if(function_exists('stripslashes')) {
$car = stripslashes(trim($_POST['car']));
} else {
$car = trim($_POST['car']);
}

Next we will place the error message in PHP in case the user has deactived javascript for some reason and we will place the Thank you message that will appear above the form. Both of theses could be placed above your form in contact.php…

Error message:

Please check if you’ve filled all the fields with valid information. Thank you.

Thank you message:

Email Successfully Sent!
Thank you for your interest in our site. I will contact you shortly if needed.

That’s it. Here’s a little help for the css styles, but you can add your own to .error and label:

@Jason, you cannot preview php-code in the browser, it is a server-side script and has to be compiled by a server which has php installed. So you need to upload the file to a web-server with php and then type in the address in the browser to that file to see it rendered as it should. Another way you can do it is to install a wamp (windows) or mamp (mac), a package with web server, php and mysql and then you can test it on your own computer.

This in your tutorial is the most important sentence: “I highly suggest that you don’t rely on Javascript alone for validating form inputs. Aside from validating inputs, PHP will also be responsible for sending out the email in case no errors were found.”

It´s a matter of security to validate in two steps. Javascript will be executed on the clients machine and it is not secure to let the user validate the data you need maybe for sending an e-mail. A client e.g. can build a own little page without validation and send you some shit just as an attack …
So it must be to have two way validation!

I tip: Use REST-api for validation. Send the form-data via JS to the api (which is maybe written in PHP) and let it do the tests. Later you can reuse the validation functions in PHP before you send the E-Mail!

Many many thanks for sharing this form ! It was so much help. Finally I got a form working : ) I still need to change the “this field is required” field to spanish but I already read all questions and comments and found your explanation to “Coffee”. Tomorrow I’ll try it and I’m pretty sure it will work since everything you share with us did.

I would like for the script to send an auto response to the senders email address. How do I do this please. Please indicate where exactly to put the code. I’ve been trying to add another mail() to the script but it stops the page working…

@Richard (and anyone else who is on a Windows/IIS server at GoDaddy or anywhere else):
You will need to change all instances of “\n\n” in the email scripts into “\r\n” due to differences in the way that Linux/Unix servers and Windows servers process line feeds.

Thanks to Raymond for putting this together – made things quicker and easier for me today.

Hello, Contact Form is very Nice and well executed, but when i use this i found some error while sending email, it is giving error like this

Warning: mail() [function.mail]: Failed to connect to mailserver at “localhost” port 25, verify your “SMTP” and “smtp_port” setting in php.ini or use ini_set() in C:\wamp\www\Contact_Form\contact1.php on line 45

and 1 more, i didn’t able to find “This is required”, i have to replace with “User name required”…

If you will have time then please help me, you can send solution on my email id, i will wait for your response.

Great tutorial. This is perfect for my site. Just one question. How would I go about having the error messages appear above the form fields, and next to the name of the field rather than below the form fields. I managed to absolutely position the ‘label.error’ css value to minus co-ordinates, which does work, but there must be a simpler way to achieve this. Something in the order of the way the html form code is placed. I can’t seem to work it out though.
Any help with this would be appreciated.

Great tutorial – but hoping to expand the form to include a newsletter signup checkbox. I don’t know how add that so it emails if the the checkbox was selected or not? Any help would be much appreciated – I’ve been trying to figure it out for way too long!

I gave this an honest shot. I want to use the form to redirect the user to another page where they can download an ebook while the email sends me their contact information. After some troubleshooting, I finally got the form to submit without error and to redirect to the download page. BUT, the email that’s sent to me is devoid of the required information. This is what I get:

Is there a way to add 2 of these forms to the same page. I want to use for both a simple newsletter signup in the left column that just takes an email address and is on every page. Then I want to use it for a full form on the contact page with many fields. The problem I am having is that when you get to the contact page and it has the newsletter signup in the left column as well, it gives a “false positive” to the newsletter signup if the user fills out the contact form. Any help would be great. Thank you.

I figured out the above issue, but now running into another issue. I added several new fields and now it is giving me an error saying i have not filled out all the fields. If anyone can help me with figuring out this problem I would appreciated it. I can post the code here if needed but hate to take up too much room in the comments. Thanks.

Hello
I am struggling to incorporate a redirect via either [php] header(); located after the mail() command, or [javascript] window.location within the $(form).validate(); function.

I can get the email to send without redirect or I can get it to redirect without sending the email. It looked like someone earlier was able to get it to do both, but it would appear that perhaps a setting in the javascript or in the form declaration was also revised. Does the form action=”” need to change from PHP->self to something else maybe? HELP!!!

not to be a pest but I am also using jquery to prompt the field values so I don’t need to put labels in them
for instance:$("#middleinit").focus(function () {
$("#middleinit").val('');
});
$("#middleinit").blur(function () {
if($("#middleinit").val() ==''){
$("#middleinit").val('Middle Initial');
}
});
This means that the field label is in the field until a user fills it out. if a user clicks on the field the label in it disappears and if they move to another field without entering it fills in the field with the label again.

The problem I am having is that if the form doesn’t validate it wipes the information a user has entered. I want to know how to access the values of the fields that do validate so I can keep them filled out when the form validation fails.

Can anyone point me in the right direction for setting it up as an html page with the php in an externally referenced file? Is that easy to do or would it be a complete nightmare? The whole php thing is still a bit of a mystery to me…. = )

So, how do I implement this into a lightbox? I am building a site but I don’t want a full dedicated page for a contact form. The code works for validation, but I want it to pop up. I see you got it to work, Ken. Can you (or anyone) assist me in placing in a lightbox? I’ve tried to download and follow instructions for prettyPopin, lightbox, etc.. but not sure how to go about it.. Thanks for any help guys!

Hi,
first of all thank you for sharing this. I’ve been looking for a solution like this and this is a great tutorial.

I initially found myself with the same problem that Marcus did.
““Warning: mail() [function.mail]: SMTP server response: 451 See http://pobox.com/~djb/docs/smtplf.html. in D:\Hosting\7009516\html\contact.php on line 45″”

After a little bit of research I found that if the “from” email is one from your domain this problem disappears. You still get the senders email on the message, so my solution was to create a bespoke email address on my domain for comment sending.

Hi! I would like to add more fields. How can I do that? I’ve been trying to add a last name field, for example and it doesn’t work properly! I need to put some extra fields for “city”, “job”, “telephone” and few others… Also, if someone knows any way to include a submit field for attach a .pdf or .jpg file would be great! Thanks a lot for this great tutorial and thanks in advance for your reply!

Hi everybody! I´m from Argentina and we use the accents and the “ñ” letter, I’m testing this great form and I like it!! However I’ve a problem with special characters: Does it support utf-8? How can I set up it? Anybody can help me? Thank you very much!

Hi I’m using the form exactly as explained and have read all of the comments looking for deprecated PHP, but I can’t seem to get the form to send emails. I had it working in a test location, but now that it’s in the root directory it’s not working for some reason. Any help would be greatly appreciated. Thanks for the hard work regardless!

One of the best tutorials. Well done! I’ve used with contact form very easily. Usually it takes so long to make it and finally is not working after a big process. Is that possible to ask the author to add recaptcha also please?

Thank you SO much for taking the time to write this tutorial. I’ve found it invaluable so far. If you will let me know what your paypal account is I’ll be happy to make a contribution.

They say a teacher usually knows more because “the more he/she teaches the more he/she learns”. Hopefully you’ve learned more by being generous with us.

Your script is working, and I’m so happy about this.
A couple of things are not working quite right, though:
1) The string “This field is required” does not appear under each field as your tutorial shows. This string is linked to the “required” class and jQuery code. Instead, I get a string at the top of the box that says “Please check if you’ve filled all the fields with valid information. Thank you.” – that is being generated through the PHP script, though. So maybe the jQuery validation I’m using isn’t working, and I’m trying to figure out why.
2) While linking to a jQuery API hosted by Google isn’t really my preference, it works and I can see why you’d use it (speed). I’m using jQuery 1.5.1, which appears to be the latest.

This is a great tutorial; about a year old, but know that I spent almost 6 months looking for a tutorial like this one. Thanks a bunch.

Thanks for this great tutorial. Worked like a charm from the first time. The comments also made me search less the web for minor improvements. Great work! Take care, and thanks again!

Comments are closed.

Welcome my friend!

I'm Raymond Selda, a wannabe professional drummer and Internet marketer.

I learned how to build websites back in 2009 and I've been working for myself ever since. I'm here to help you if you're interested in doing the same but do know that you will have to take action because this will involve a lot of perseverance and determination in order to succeed.