index.html<\/code> so we can come back to it a little later to finish off.<\/p>\nWriting the PHP email form script<\/h4>\n
Now we have the form, we need to be able to take the information submitted by the user and do something with it (i.e. email it to an address of your choosing.<\/p>\n
We also need some error handling in case the visitor forgets to enter one of the values in the form, and we also need to check they have entered a valid email address as well.<\/p>\n
For the email address, we can do a check to make sure they are using a valid domain name extension as well as only alphanumeric characters (letters a-z and numbers 0-9). To do that we can use preg_match which can search the entered email address to check it matches our criteria:<\/p>\n
\r\nfunction isEmail($email) {\r\n\treturn(preg_match("\/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$\/i",$email));\r\n}\r\n<\/pre>\nNext, we can check to see whether or not our contact form submission has all of the information we need from the visitor, and if not we can display an error message on the page to let them know what they did wrong:<\/p>\n
\r\nif (!defined("PHP_EOL")) define("PHP_EOL", "\\r\\n");\r\n\r\n$name = $_POST['name'];\r\n$email = $_POST['email'];\r\n$phone = $_POST['phone'];\r\n$subject = $_POST['subject'];\r\n$comments = $_POST['comments'];\r\n$verify = $_POST['verify'];\r\n\r\nif(trim($name) == '') {\r\n\techo '<div class="error_message">Whoops! You must enter your name.<\/div>';\r\n\texit();\r\n} else if(trim($email) == '') {\r\n\techo '<div class="error_message">Oops! Please enter a valid email address.<\/div>';\r\n\texit();\r\n} else if(trim($phone) == '') {\r\n\techo '<div class="error_message">Uh oh! Please enter a valid phone number.<\/div>';\r\n\texit();\r\n} else if(!is_numeric($phone)) {\r\n\techo '<div class="error_message">Yikes! Phone number can only contain digits.<\/div>';\r\n\texit();\r\n} else if(!isEmail($email)) {\r\n\techo '<div class="error_message">Sorry! You have enter an invalid e-mail address, try again.<\/div>';\r\n\texit();\r\n}\r\n\r\nif(trim($subject) == '') {\r\n\techo '<div class="error_message">Eek! Please enter a subject.<\/div>';\r\n\texit();\r\n} else if(trim($comments) == '') {\r\n\techo '<div class="error_message">Oh no! Please enter your message.<\/div>';\r\n\texit();\r\n} else if(!isset($verify) || trim($verify) == '') {\r\n\techo '<div class="error_message">Forgot something? Please enter the verification number.<\/div>';\r\n\texit();\r\n} else if(trim($verify) != '4') {\r\n\techo '<div class="error_message">Shucks! The verification number you entered is incorrect.<\/div>';\r\n\texit();\r\n}\r\n<\/pre>\nNow that we have some error-handling sorted out, the next step is to decide where we want to email this contact form, and what we want to put in that message. We'll put these in as options that you can change if you want to, but with default values.<\/p>\n
OPTION 1: The email address to send the feedback form to<\/h5>\n\r\n\/\/ OPTION 1: Where do you want to send the completed contact form?\r\n\/\/ Enter the email address that you want forms to be sent to.\r\n\/\/ Example $address = "john.smith@example.com";\r\n\r\n$address = "john.smith@example.com";\r\n<\/pre>\nJust change john.smith@example.com<\/code> to the email address you want to receive the forms to.<\/p>\nOPTION 2: The subject line for your contact form email<\/h5>\n\r\n\/\/ OPTION 2: What do you want the subject line of your contact form to say? \r\n\/\/ The standard subject will appear as, "[New Feedback] You have an enquiry from John Smith."\r\n\r\n$e_subject = '[New Feedback] You have an enquiry from ' . $name . '.';\r\n<\/pre>\nBy default, this will say [New Feedback] You have an enquiry from John Smith.<\/strong> but you can change this if you'd like to.<\/p>\nOPTION 3: The body content of your contact form email<\/h5>\n\r\n$e_subject = '[New Feedback] You have an enquiry from ' . $name . '.';\r\n\r\n\r\n\/\/ OPTION 3: What do you want your contact form email to actually say?\r\n\/\/ Modify the body of the email here.\r\n\/\/ If you want to add more fields to the form - add them here too.\r\n\r\n$e_body = "You have been contacted by $name with a message for $subject. Here is their message:" . PHP_EOL . PHP_EOL;\r\n$e_content = "\\"$comments\\"" . PHP_EOL . PHP_EOL;\r\n$e_reply = "You can contact $name by email at $email or call them at $phone";\r\n<\/pre>\nThis is how the email message will appear in your inbox. By default it will appear as:<\/p>\n
You have been contacted by John Smith with a message for Questions. Here is their message:<\/p>\n
“This is where the message will be displayed.”<\/p>\n
You can contact John Smith by email at john.smith@example.com or call them at 0123456789.<\/p><\/blockquote>\n
The final part of this script is to put the entire email message together and if it is successfully sent, display a confirmation message on the page:<\/p>\n
\r\n$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );\r\n\r\n$headers = "From: $email" . PHP_EOL;\r\n$headers .= "Reply-To: $email" . PHP_EOL;\r\n$headers .= "MIME-Version: 1.0" . PHP_EOL;\r\n$headers .= "Content-type: text\/plain; charset=utf-8" . PHP_EOL;\r\n$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;\r\n\r\nif(mail($address, $e_subject, $msg, $headers)) {\r\n\r\n\t\/\/ Email has sent successfully, so let the user know.\r\n\r\n\techo "<fieldset>";\r\n\techo "<div id='success_page'>";\r\n\techo "<h1>Thanks for getting in touch!<\/h1>";\r\n\techo "<p>Thanks <strong>$name<\/strong>! Your message has been sent and we'll be in touch soon.<<\/p>";\r\n\techo "<\/div>";\r\n\techo "<\/fieldset>";\r\n\r\n} else {\r\n\r\n\techo 'Something went wrong!';\r\n\r\n}\r\n<\/pre>\nAnd that's it! Your PHP email form is complete and will send the information to the email address of your choosing. The last step is to use some Javascript\/JQuery to make this happen seamlessly, without the page loading.<\/p>\n
Adding AJAX to a PHP email form<\/h4>\n
Ajax is a way of sending and receiving information to a web page without changing or reloading that page. So when you post a status update to Facebook, for example, it gets added automatically without the page and all the images etc being loaded again.<\/p>\n
To do this with our feedback form, we need to use a small JQuery script:<\/p>\n
\r\njQuery(document).ready(function(){\r\n\r\n\t$('#contactform').submit(function(){\r\n\r\n\t\tvar action = $(this).attr('action');\r\n\r\n\t\t$("#message").slideUp(750,function() {\r\n\t\t$('#message').hide();\r\n\r\n \t\t$('#submit')\r\n\t\t\t.after('<img src="assets\/ajax-loader.gif" class="loader" \/>')\r\n\t\t\t.attr('disabled','disabled');\r\n\r\n\t\t$.post(action, {\r\n\t\t\tname: $('#name').val(),\r\n\t\t\temail: $('#email').val(),\r\n\t\t\tphone: $('#phone').val(),\r\n\t\t\tsubject: $('#subject').val(),\r\n\t\t\tcomments: $('#comments').val(),\r\n\t\t\tverify: $('#verify').val()\r\n\t\t},\r\n\t\t\tfunction(data){\r\n\t\t\t\tdocument.getElementById('message').innerHTML = data;\r\n\t\t\t\t$('#message').slideDown('slow');\r\n\t\t\t\t$('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});\r\n\t\t\t\t$('#submit').removeAttr('disabled');\r\n\t\t\t\tif(data.match('success') != null) $('#contactform').slideUp('slow');\r\n\r\n\t\t\t}\r\n\t\t);\r\n\r\n\t\t});\r\n\r\n\t\treturn false;\r\n\r\n\t});\r\n\r\n});\r\n<\/pre>\nThis code adds a simple loading animation and submits the information via email without reloading the page. Once the information has been sent, it will use a slide animation to display the success message. We'll save this as contact.js<\/code> so we can use it in our form.<\/p>\nBringing the contact form together<\/h4>\n
At this point, your form should be fully functional as a PHP email contact form, but we need to make some final adjustments to our index.html<\/code> file to make it work as expected.<\/p>\nWe need to add the JQuery script we just saved, and also the latest version of JQuery itself, so our script will run. Also, we can add a stylesheet to make the contact form look more presentable. To do this, we can add the following code to the <head><\/code> section of your web page:<\/p>\n\r\n<link href="style\/contact.css" rel="stylesheet" type="text\/css" \/> <!-- Some simple styling for this form -->\r\n<script type="text\/javascript" src="http:\/\/code.jquery.com\/jquery-latest.js"><\/script> <!-- The latest version of JQuery so our contact.js works -->\r\n<script type="text\/javascript" src="js\/contact.js"><\/script> <!-- Our JQuery code to send the information without reloading the page -->\r\n<\/pre>\nDownload the free AJAX PHP email form<\/h4>\n
If you'd rather not go through this tutorial to build your own PHP feedback form, you can download the demo instead and experiment for yourself. Remember: You'll need to run it on a server running PHP for the code to work.<\/p>\n
You can download the demo here:<\/p>\n
\n[download id=”1085″]\n<\/p>\n
Finally, make sure to backup any files or scripts before modifying them to avoid inadvertently crashing your website.<\/p>\n","protected":false},"excerpt":{"rendered":"
A complete tutorial for building a PHP email contact form using AJAX. Working code examples and a free download to use on your own website.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":""},"categories":[66],"tags":[],"_links":{"self":[{"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/posts\/1074"}],"collection":[{"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/comments?post=1074"}],"version-history":[{"count":0,"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/posts\/1074\/revisions"}],"wp:attachment":[{"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/media?parent=1074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/categories?post=1074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitebeginner.com\/wp-json\/wp\/v2\/tags?post=1074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}