PHP Contact Form with jQuery Validation
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PHP Contact Form with JQuery Validation</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="contact-wrapper">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>
<label for="name"><strong>Name:</strong></label>
<input type="text" size="50" name="contactname" id="contactname" value="" />
</div>
<div>
<label for="email"><strong>Email:</strong></label>
<input type="text" size="50" name="email" id="email" value="" />
</div>
<div>
<label for="subject"><strong>Subject:</strong></label>
<input type="text" size="50" name="subject" id="subject" value="" />
</div>
<div>
<label for="message"><strong>Message:</strong></label>
<textarea rows="5" cols="50" name="message" id="message"></textarea>
</div>
<input type="submit" value="Send Message" name="submit" />
</form>
</div>
</body>
</html>
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.
body {
font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
}
form#contactform textarea {
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
}
If you’re following along, your contact form should look like this:
Step Three: Validate using JQuery
We already loaded JQuery in case you haven’t noticed in our initial contact form markup:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
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.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.validate.pack.js" type="text/javascript"></script>
Now we need to initialize the JQuery:Validation plugin in order to use it. Take note that #contactform is the id value of the form.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate();
});
</script>
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.
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>
<label for="name"><strong>Name:</strong></label>
<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
</div>
<div>
<label for="email"><strong>Email:</strong></label>
<input type="text" size="50" name="email" id="email" value="" class="required email" />
</div>
<div>
<label for="subject"><strong>Subject:</strong></label>
<input type="text" size="50" name="subject" id="subject" value="" class="required" />
</div>
<div>
<label for="message"><strong>Message:</strong></label>
<textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
</div>
<input type="submit" value="Send Message" name="submit" />
</form>
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.
<?php
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'youremail@yoursite.com'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
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.
<?php if(isset($hasError)) { //If errors are found ?>
<p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<p><strong>Email Successfully Sent!</strong></p>
<p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
<?php } ?>
Finished Code
<?php
//If the form is submitted
if(isset($_POST['submit'])) {
//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == '') {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}
//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == '') {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//Check to make sure comments were entered
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'youremail@yoursite.com'; //Put your own email address here
$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PHP Contact Form with JQuery Validation</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate();
});
</script>
<style type="text/css">
body {
font-family:Arial, Tahoma, sans-serif;
}
#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
}
form#contactform textarea {
font-family:Arial, Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<div id="contact-wrapper">
<?php if(isset($hasError)) { //If errors are found ?>
<p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
<?php } ?>
<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<p><strong>Email Successfully Sent!</strong></p>
<p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
<?php } ?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>
<label for="name"><strong>Name:</strong></label>
<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />
</div>
<div>
<label for="email"><strong>Email:</strong></label>
<input type="text" size="50" name="email" id="email" value="" class="required email" />
</div>
<div>
<label for="subject"><strong>Subject:</strong></label>
<input type="text" size="50" name="subject" id="subject" value="" class="required" />
</div>
<div>
<label for="message"><strong>Message:</strong></label>
<textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
</div>
<input type="submit" value="Send Message" name="submit" />
</form>
</div>
</body>
</html>
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.
Trackbacks and Pingbacks
- Formulario de contacto con PHP y jQuery | Código-Fuente
- apadmedia.com » PHP Contact Form with jQuery Validation
- What Should I Write About? | Raymond Selda
- Web Form Validation: Best Practices and Tutorials | Desinine
- Web Form Validation: Best Practices and Tutorials « Ramesh
- Web Form Validation: Best Practices and Tutorials | Results videos photos news blogs At I google wiki . com
- Web Form Validation: Best Practices and Tutorials — missrix
- Web Form Validation: Best Practices and Tutorials
- The Blog of Hanas › Dave Hanas finds random links around the web
- This Week in jQuery, vol. 5 | Jquery Cave
- This Week in jQuery, vol. 5 « Articles
- Web Form Validation: Best Practices and Tutorials « Smashing Magazine
- 10 Useful jQuery Form Validation Techniques and Tutorials : Speckyboy Design Magazine
- 25 jQuery Tutorials for Creating and Working with Forms « Freelance Web Designer from Hyderabad, India.
- Web Form Validation: Best Practices and Tutorials | WebsGeek
- 10 Useful jQuery Form Validation Techniques and Tutorials « Om Net Solution
- 25 jQuery Tutorials for Creating and Working with Forms | Son Of Byte - Web Design & Development
- jQuery Form Validation Techniques and Tutorials | WEBAXES.COM
- Useful jQuery Form Validation Techniques and Tutorials « Ulancer
- Geek is a Lift-Style. » Web Form Validation: Best Practices and Tutorials
- Best PHP Contact Form with jQuery Validation Tutorial
Would use $_SERVER['SCRIPT_NAME']; on form.
Thanks.
This was the best tutorial i found on the topic – simple, well structured and explanatory, thank you so much. My current assignment got a lot easier.
Its an elegant contact created form using jquery
Hi there, thanks for the tutorial.
However, have you check the finished code?
It has errors:
‘ . “\r\n” . ‘Reply-To: ‘ . $email; mail($emailTo, $subject, $body, $headers); $emailSent = true; } } ?>
That sits on top of the form when finished? Missing some code in the top part of the PHP code. What would you recommend?
Hi. Great Tutorial!
Just want to ask, how do i edit the error message?
For example “This field is required.” to “Please enter username”.
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!
How do I CC / BCC someone?
Awesome tutorial BTW.
Thanks!
Why after i press the send button the text with the thanks message doesn’t appear?
Can anyone help me?
This is the code:
<?php
//apas pe trimite
if(isset($_POST['submit'])) {
//nume este gol?
if(trim($_POST['nume']) == '') {
$hasError = true;
} else {
$nume = trim($_POST['nume']);
}
//prenume gol
if(trim($_POST['prenume']) == '') {
$hasError = true;
} else {
$prenume = trim($_POST['prenume']);
}
//telefon gol
if(trim($_POST['tel']) == '') {
$hasError = true;
} else {
$tel = trim($_POST['tel']);
}
//adresa mail valida
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//comnetarii
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}
//formular corect trimite mail
if(!isset($hasError)) {
$sendTo = "kondrei@gmail.com"; //adresa la care vrei sa se trimita mesajul
$subject = "Mesaj de pe site-ul WoodArt";
$headers = "From: " . $_POST["nume"] . " " . $_POST['prenume'] . " \r\n”;
$headers .= “Reply-To: ” . $_POST["mail"] . “\r\n”;
$headers .= “Return-path: ” . $_POST["mail"];
$message = ”;
$message = ” Nume: “.$_POST['nume'].”\n Prenume: “.$_POST['prenume'].”\n Telefon: “.$_POST['tel'].”\n E-mail: “.$_POST['email'].”\n Mesaj: “.$_POST['message'];
mail($sendTo, $subject, $message, $headers);
}
}
?>
WoodArt – Contact
$(document).ready(function(){
$(“#contactform”).validate();
});
label.error {
font-weight: bold;
color: #742c30;
}
Home
Produse
Tehnologie
Garanţii
Recomandări
Contact
ENGLISH
Please check if you’ve filled all the fields with valid information. Thank you.
Vă mulţumim pentru mesaj!
Un coleg vă va răspunde la solicitare în cel mai scurt timp posibil.
Contacteazã-ne!
Showroom
BucureÅŸti, Str. EpureÅŸti, Nr. 11
Tel./Fax 021.668.47.26, 021.668.47.30
Producţie
FloreÅŸti, Jud. Cluj, Str. prof. Ioan Rusu, Nr. 3
Tel. 0264.265.530, Fax 0264.265.150
Solicitare ofertă de preţ
<form method="post" action="” id=”contactform”>
Numele tău:
Prenumele tău:
Telefon:
Adresa de e-mail:
Message:
* Toate câmpurile sunt obligatorii
Copyright, 2010 SC General Comexim SRL •
Developed by MediaOne
• Valid
XHTML • Valid
CSS
Great form and great tutorial!! Thanks a lot!
Once the form is e-mailed i would like it to be replaced with the thank you text. Can anyone help me with the code to do this?
Great tutorial..It saves my time. Big thanks to Raymond
I have got right to the end of this tutorial. Then when I put the PHP above the Doctype and previewed it in browser.
The form did not display at all only the PHP code I pasted in.
It looks just like yours I’m not sure whats going on.
Thanks Raymond Selda you done a great work..
this script is using to learn something about you.
once again thanks to Raymond Selda..
Thanks a lot..!
Hi guys, good job really usefull and easy to costumize thanks for share it.
matvespa try in jquery.validate.pack.js looking for the words in the example of message error.
dan Bad sintaxis mate just check the code.
.
Justin Gray is very easy just try to understand what Raymond is doing.
The code is fully commented if you try and you get some is better than just ask
Good luck!
Nice tutorial
I’ve tried looking in the folder ( jquery.validate.pack.js ), but it’s all keywords! I know there’s a easy method for that but I did grasp the coding part of it yet..
Look at the source of this site, you see that they changed the error description
http://jquery.bassistance.de/validate/demo/
Anyone can bring some methods on how to achieve this ?
thanks.
I got it working with my own error comments. I also tried by erasing the javascript and it gives me the simple php error, so it works if someone dosen’t have the javascript enable.
Now the form is up to my expectation but I would’nt of been able without this script. Thanks again.
If someone needs help setting up their own error comments, I’ll be willing to help
Justin.
Just discovered that eregi is deprecated in php 5.3+. Found that stristr worked for me.
hmm, I can’t seem to put an optional field! The simplest thing, haha!
@Justin: Great job and thank you so much for lending a helping hand. Hope you get the option field.
@Ty Hatch: Thanks for the update
hi,
I’m trying to modify the error message but didn’t know how to do it.
Instead of This is a required field” I need it to change something like… “Name of the field” missing
how can I place the Label of the field in the error message?
Thank you, by the way this is a great tutorial
Has anyone successfully moved the errorElement? I have the labels and input fields on separate lines and I would like to have the errors appear next to the labels.
I also figured out how to change the errors from being a label to a span, but cannot figure out how to remove the attributes such as “for” or “generated” without breaking the script.
Can someone who’s good with jQuery lend me a hand?
Thanks Selda for sharing great recipe.
If anyone can integrate the http://www.google.com/recaptcha, then it would be a great work.
Great tutorial, forms have baffled me for so long and finally I think I can make sense of it all!
I was just wondering, how effective this form would be against spam and also can I make input type=”hidden” or would that not work?
Thanks
@sarah
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']);
}
//Check to make sure that the phone field is not empty. Required
if(trim($_POST['phone']) == '') {
$hasError = true;
} else {
$phone = trim($_POST['phone']);
}
//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']);
}
//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}
//If you don't want the striplashes, simply place the last line of the 2nd else statement.
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$message = stripslashes(trim($_POST['message']));
} else {
$message = trim($_POST['message']);
}
}
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = 'name@business.com'; //Put your own email address here
$subject = 'New comment received'; //Put your own subject here
$body = "Name: $name \n\nEmail: $email \n\nTelephone: $phone \n\nCar: $car \n\nMessage:\n $message";
$headers = 'From: My Website ‘ . “\r\n” . ‘Reply-To: ‘ . $email;
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
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:
label {display:block;float:none;width:auto;}
.error {color:#ad0000;}
Hope this will help some of you.
Sorry, forgot to add an important detail!
Below the scripts add the following to edit your error messages. For the fields that are optional you do not add them here. Don’t forget to change the “#yourformid” to your own id :
$().ready(function() {
// validate signup form on keyup and submit
$(“#yourformid”).validate({
rules: {
name: “required”,
email: {
required: true,
email: true
},
phone: “required”,
},
messages: {
name: “Please enter your firstname”,
email: “Please enter a valid email address”,
phone: “Please enter a phone number”,
}
});
});
Hi Raymond,
I am using GoDaddy hosting and once i have submitted the form on their servers, it says it sends but i receive no email at all.
Plus at the top of the screen, i receive this error message:-
Warning: mail() [function.mail]: SMTP server response: 451 See http://pobox.com/~djb/docs/smtplf.html. in D:\Hosting\5………\html\contact.php on line 45
Line 45 appears to be – mail($emailTo, $subject, $body, $headers);
Are you able to be of any assistance? Thank you.
Regards,
Richard
Great tutorial!
But the error message and ‘Thank you’ message doesn’t appear!
@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.
Good luck!
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!
I´ve done a little tutorial with jQuery and CodeIgniter:
http://www.karrock.de/daf/2009/10/how-to-validate-forms-with-jquery-and-codeigniter/
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.
THANK YOU!
This is a better one.
http://madebyblaze.com/examples/awesomeform/
The whole point of using Ajax is to improve interaction and feedback to users. So please don’t wait to validate forms before the user presses the send button.
Great tutorial, many thanks!
Thanks for the tutorial. It’s great contact form. That’s what I was looking for!!!!
I’ve put it on my website. http://www.mbdizajn.com Working great, without any bug…
Thanks again! Best regards!!!
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.
Hi,
Your jquery contact php code works perfectly without any modifications other than changing the email address for my http://proxylist.co web site.
Nice job!
Excellent working form…..i ever seen on the net.
Its the easiest form.
Thanks alot – may GOD bless you – dear friend.
oopz.. what race are u?
hi
brilliant tutorial really clear and well documented
I get the php validate messages ontop of the contact form when I load the page in a browser??
can this be fixes? surely these messages should only show up when you click send and nothing is added in each input field??
Thanks in advance for any help
b
Thanks. Worked great!
I made a slight adjust to make sure no ugly php errors and warnings where thrown at the top. Instead, if there were errors, they were displayed nicely in the form.
1) Changed the php.ini config by adding this line to the top of your code….
ini_set(‘display_errors’, 0);
2) Then, added error notification in the header’s javascript
//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = ‘email@youremail.com’; //Put your own email address here
$body = “Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments”;
$headers = ‘From: My Site ‘ . “\r\n” . ‘Reply-To: ‘ . $email;
if (mail($emailTo, $subject, $body, $headers)) {
$emailSent = true;
} else {
$emailSent = false;
}
}
3) Added this line in the html above the form
Email Was Not Sent!
If problems persist please contact us and let us know!
err sorry.. my #3 turned into html … let me repost
3) Put this above the form
Email Was Not Sent!
If problems persist please contact us and let us know!
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.
Thanks and Regards
Devendra Pawar
devendra.pawar@quadrabiz.co.in