Hosting Solutions
mobile_logo Table of Contents

Contact Form Web Application Tutorial Ajax HTML5 PHP

In this exercise we will demonstrate how to build a modern all-purpose website contact form that uses new HTML5 features, Ajax and PHP. Everything happens without reloading the page or navigating to another document to parse the data. You can put this form to work on any website that processes PHP, and you can modify it for other purposes.

Research the terms Cross-site Scripting (XSS) and Cross-Site Request Forgeries (CSRF) attacks in a search engine to find numerous methods to defend your forms against spam and automated attacks from malicious third party servers.

example.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Website Contact Form</title> <script> function _(id){ return document.getElementById(id); } function submitForm(){ _("mybtn").disabled = true; _("status").innerHTML = 'please wait ...'; var formdata = new FormData(); formdata.append( "n", _("n").value ); formdata.append( "e", _("e").value ); formdata.append( "m", _("m").value ); var ajax = new XMLHttpRequest(); "POST", "example_parser.php" ); ajax.onreadystatechange = function() { if(ajax.readyState == 4 && ajax.status == 200) { if(ajax.responseText == "success"){ _("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>'; } else { _("status").innerHTML = ajax.responseText; _("mybtn").disabled = false; } } } ajax.send( formdata ); } </script> </head> <body> <form id="my_form" onsubmit="submitForm(); return false;"> <p><input id="n" placeholder="Name" required></p> <p><input id="e" placeholder="Email Address" type="email" required></p> <textarea id="m" placeholder="write your message here" rows="10" required></textarea> <p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p> </form> </body> </html> example_parser.php <?php if( isset($_POST['n']) && isset($_POST['e']) && isset($_POST['m']) ){ $n = $_POST['n']; // HINT: use preg_replace() to filter the data $e = $_POST['e']; $m = nl2br($_POST['m']); $to = ""; $from = $e; $subject = 'Contact Form Message'; $message = '<b>Name:</b> '.$n.' <br><b>Email:</b> '.$e.' <p>'.$m.'</p>'; $headers = "From: $from\n"; $headers .= "MIME-Version: 1.0\n"; $headers .= "Content-type: text/html; charset=iso-8859-1\n"; if( mail($to, $subject, $message, $headers) ){ echo "success"; } else { echo "The server failed to send the message. Please try again later."; } } ?>

JavaScript Videos

Form Programming

Contact Form Web Application Tutorial Ajax HTML5 PHPCheckbox Toggle Tutorial Select Deselect All ElementsIn Place Editing CMS Development HTML JavaScript TutorialCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepRestrict Text Input Characters HTML JavaScript TutorialMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming Tutorialtextarea Form Field Character Counting and LimitingBuilding a WYSIWYG Rich Text Editor Textarea Replacement Part 1Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2Div contenteditable Click Select All Text execCommand selectAllToggle Password Security Form Input Characters TutorialTrap User Check for Unsaved Written Work TutorialReal Time Text Input or Textarea Filter TutorialForm Select Change Dynamic List Option Elements Tutorial