{"id":10301,"date":"2011-08-23T21:03:16","date_gmt":"2011-08-23T13:03:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10301"},"modified":"2025-04-04T00:43:13","modified_gmt":"2025-04-03T16:43:13","slug":"ajax-html5-css3-contact-form-tutorial","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/","title":{"rendered":"How to Build an Ajax-Based HTML5 Contact Form"},"content":{"rendered":"

A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While there are numerous contact forms<\/a> available online, many lack detailed explanations of their internal workings. This comprehensive tutorial will guide you through creating an advanced contact form from scratch, utilizing popular technologies like HTML5<\/a> and CSS3<\/a>.<\/p>\n

This task requires knowledge of both front-end and back-end development. We\u2019ll explore PHP for the backend to handle email sending and jQuery to enhance the user interface. By the end of this tutorial, you will have a fully dynamic and functional contact form that is designed with future customization in mind.<\/p>\n

<\/i> Download files <\/span><\/a><\/p>\n

Setting Up Your Development Environment<\/h2>\n

To begin, you\u2019ll need a web server. For those on a Windows platform, WAMP<\/a> is an excellent choice. Mac users can opt for a similar solution called MAMP<\/a>, which is equally straightforward to install.<\/p>\n

\"WAMP<\/figure>\n

These applications provide a local server environment on your computer, allowing full access to PHP. Alternatively, if you have access to your own server space or can connect to a remote server, that could be used as well. No MySQL databases are required for this project, which simplifies the setup.<\/p>\n

After your server is ready, create a new folder to store the application<\/strong>. You can name it anything as it does not impact the final result. This folder structure will come into play when accessing your files through a web browser, like in the example http:\/\/localhost\/ajaxcontact\/contact.php<\/strong><\/p>\n

Creating Our Core Files<\/h2>\n

We will be working with two primary files. First, we need a .php<\/em> file that will contain both our application logic and the front-end HTML markup. Below is a sample code snippet from our starting file.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html xmlns:fb=\"https:\/\/www.facebook.com\/\/2008\/fbml\" xml:lang=\"en\" lang=\"en\">\r\n<head>\r\n  <title>HTML5\/CSS Ajax Contact Form with jQuery<\/title>\r\n  <script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"><\/script>\r\n  <link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<\/head>\r\n<\/pre>\n
We start with a simple header section in our document. It includes a Doctype declaration for HTML5<\/strong>, and various HTML\/XML elements that, while not strictly necessary, help ensure consistent rendering across different browsers. Additionally, providing more information generally enhances compatibility and functionality.<\/p>\n
Further in the document, just before the closing head tag, we include two crucial lines. The first line adds a jQuery script from the Google Code Repository<\/strong>, essential for handling dynamic page functionalities. Right below that, we link a basic CSS file<\/strong> that applies styles to our webpage.<\/p>\n
In the document body, we feature several container divisions<\/strong> that encapsulate the main contact form. This form includes input fields for the user\u2019s name<\/strong>, e-mail address<\/strong>, and personal message<\/strong>. The HTML structure is straightforward and should be easily understood by an intermediate developer.<\/p>\n
\r\n<!-- @begin contact -->\r\n<div id=\"contact\" class=\"section\">\r\n  <div class=\"container content\">\r\n\r\n  <?php if(isset($emailSent) && $emailSent == true) { ?>\r\n    <p class=\"info\">Your email was sent. Huzzah!<\/p>\r\n  <?php } else { ?>\r\n<\/pre>\n
Here, we have straightforward PHP conditional code<\/strong> embedded within a few page containers. It checks whether a variable named $emailSent<\/code> is set and true, displaying a success message if the conditions are met.<\/p>\n
Details of the Form HTML Structure<\/h2>\n
The else<\/strong> statement will be executed on the initial page load when no data has been sent. This section includes a collection of form elements<\/strong> and a submit button<\/strong>.<\/p>\n
\r\n<div id=\"contact-form\">\r\n  <?php if(isset($hasError) || isset($captchaError)) { ?>\r\n    <p class=\"alert\">Error submitting the form<\/p>\r\n  <?php } ?>\r\n\r\n  <form id=\"contact-us\" action=\"contact.php\" method=\"post\">\r\n    <div class=\"formblock\">\r\n      <label class=\"screen-reader-text\">Name<\/label>\r\n      <input type=\"text\" name=\"contactName\" id=\"contactName\" value=\"<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>\" class=\"txt requiredField\" placeholder=\"Name:\"\/>\r\n\r\n      <?php if($nameError != '') { ?>\r\n        <br\/><span class=\"error\"><?php echo $nameError;?><\/span> \r\n      <?php } ?>\r\n    <\/div>\r\n\r\n    <div class=\"formblock\">\r\n      <label class=\"screen-reader-text\">Email<\/label>\r\n      <input type=\"text\" name=\"email\" id=\"email\" value=\"<?php if(isset($_POST['email'])) echo $_POST['email'];?>\" class=\"txt requiredField email\" placeholder=\"Email:\"\/>\r\n\r\n      <?php if($emailError != '') { ?>\r\n        <br\/><span class=\"error\"><?php echo $emailError;?><\/span>\r\n      <?php } ?>\r\n    <\/div>\r\n\r\n    <div class=\"formblock\">\r\n      <label class=\"screen-reader-text\">Message<\/label>\r\n      <textarea name=\"comments\" id=\"commentsText\" class=\"txtarea requiredField\" placeholder=\"Message:\"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?><\/textarea>\r\n\r\n      <?php if($commentError != '') { ?>\r\n        <br\/><span class=\"error\"><?php echo $commentError;?><\/span> \r\n      <?php } ?>\r\n    <\/div>\r\n\r\n    <button name=\"submit\" type=\"submit\" class=\"subbutton\">Send us Mail!<\/button>\r\n    <input type=\"hidden\" name=\"submitted\" id=\"submitted\" value=\"true\"\/>\r\n  <\/form>\r\n<\/div>\r\n\r\n<?php } ?>\r\n<\/div>\r\n<\/div><!-- End #contact -->\r\n<\/pre>\n
Notice the additional conditional block<\/strong> immediately following the form\u2019s start. It checks for errors using variables like $hasError<\/code> and displays an error message if any are found. This method acts as a fallback when JavaScript is disabled, as the dynamic error handling won\u2019t function.<\/p>\n
Further down, we handle individual PHP error checks<\/strong> for each input field. These checks ensure that even if the form is submitted with incomplete data, the filled fields will retain their values, enhancing the user experience.<\/p>\n
Following the form, there are several jQuery functions<\/strong> implemented. We\u2019ll discuss these first since they are the default handling method on page load. However, if JavaScript is not supported by the browser, the PHP code will serve as a reliable fallback.<\/p>\n
Introduction to jQuery<\/h2>\n
The best way to start discussing jQuery is to dive straight into an example. I will break down individual blocks of code line-by-line so you can understand what the script checks for.<\/p>\n
If you find yourself getting lost, simply review the project code files<\/strong>. All code blocks are pre-written and well-documented on the jQuery website<\/a>. We begin our code in a standard manner:<\/p>\n
\r\n<script type=\"text\/javascript\">\r\n  <!--\/\/--><![CDATA[\/\/><!--\r\n  $(document).ready(function() {\r\n    $('form#contact-us').submit(function() {\r\n<\/pre>\n
The initial lines check for specific events<\/strong>. After using CDATA comments to shield the script from older browsers, we start by checking if the document is ready for manipulation \u2013 a fundamental jQuery practice.<\/p>\n
We then look for submissions of a form with the ID \u201ccontact-us<\/strong>\u201c, which triggers another function that handles either displaying error messages or executing a slideUp()<\/code> effect upon successful submission.<\/p>\n
\r\n$('form#contact-us .error').remove();\r\nvar hasError = false;\r\n$('.requiredField').each(function() {\r\n  if($.trim($(this).val()) == '') {\r\n    var labelText = $(this).prev('label').text();\r\n    $(this).parent().append('<span class=\"error\">You forgot to enter your '+labelText+'.<\/span>');\r\n    $(this).addClass('inputError');\r\n    hasError = true;\r\n  } else if($(this).hasClass('email')) {\r\n    var emailReg = \/^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$\/;\r\n    if(!emailReg.test($.trim($(this).val()))) {\r\n      var labelText = $(this).prev('label').text();\r\n      $(this).parent().append('<span class=\"error\">Sorry! You\\'ve entered an invalid '+labelText+'.<\/span>');\r\n      $(this).addClass('inputError');\r\n      hasError = true;\r\n    }\r\n  }\r\n});\r\n<\/pre>\n
We begin by removing any existing error messages to ensure we start fresh. Next, we target elements with the class \u201crequiredField<\/strong>\u201c, which include the name, e-mail, and message fields.<\/p>\n
jQuery checks each field\u2019s value and alerts the user if it is empty, or if the e-mail does not match the regular expression pattern, indicating an invalid input.<\/p>\n
If no errors are found, we proceed to submit the form via jQuery\u2019s post()<\/code> method. Assuming no server-side errors, a slideUp()<\/code> animation is used to hide the form and show a \u201csuccess!<\/strong>\u201d message.<\/p>\n
\r\nif(!hasError) {\r\n  var formInput = $(this).serialize();\r\n  $.post($(this).attr('action'), formInput, function(data){\r\n    $('form#contact-us').slideUp(\"fast\", function() { \r\n      $(this).before('<p class=\"tick\"><strong>Thanks!<\/strong> Your email has been delivered. Huzzah!<\/p>');\r\n    });\r\n  });\r\n}\r\n\r\nreturn false; \r\n});\r\n});\r\n\/\/-->!]]>\r\n<\/script>\r\n<\/pre>\n
The use of callbacks<\/strong> in jQuery is also demonstrated here. A callback is a smaller function called in response to data received from another function. For instance, when our jQuery.post()<\/code> successfully sends an email, it triggers a function that initiates the sliding animation. This approach allows us to keep the callback inline for simplicity in this tutorial.<\/p>\n
Navigating Through Our PHP Logic<\/h2>\n
The final key component to discuss is the logic<\/strong> behind our PHP backend. This system is responsible for invoking a mail function<\/strong> and sending out the message<\/strong>. You can find all the code for this at the top of our main .php<\/em> file, before any HTML is output.<\/p>\n
Additionally, a few internal styles help enhance the page\u2019s appearance. There isn\u2019t anything particularly new here, so we won\u2019t delve into details. The styles.css<\/em> file included in the project uses basic CSS3 techniques.<\/p>\n
\r\n<?php \r\n\/\/ If the form is submitted\r\nif(isset($_POST['submitted'])) {\r\n<\/pre>\n
We begin by checking if the form was submitted<\/strong>, using the POST<\/strong> variable \u201csubmitted<\/strong>\u201d which is a hidden input field placed at the end of our form. This check helps avoid unnecessary server resource use if no data has been submitted.<\/p>\n
Following this, we have three separate if\/else<\/strong> statements checking if each input field is filled out<\/strong>. Here\u2019s an example of the e-mail verification logic:<\/p>\n
\r\n\/\/ Need valid email\r\nif(trim($_POST['email']) === '') {\r\n  $emailError = 'Forgot to enter in your e-mail address.';\r\n  $hasError = true;\r\n} else if (!preg_match(\"\/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\\.[a-z]{2,4}$\/i\", trim($_POST['email']))) {\r\n  $emailError = 'You entered an invalid email address.';\r\n  $hasError = true;\r\n} else {\r\n  $email = trim($_POST['email']);\r\n}\r\n<\/pre>\n
PHP trims all whitespace from the email value and verifies it against a Regular Expression (Regex)<\/strong> to ensure it matches a typical email pattern.<\/p>\n
You don\u2019t need to be an expert in preg_match()<\/code> to use this script. It\u2019s a powerful function used to enforce specific data types and patterns<\/strong>, like ensuring an email includes valid characters and a domain.<\/p>\n
Once all checks are passed with no errors, it\u2019s time to send our message! Here\u2019s how we configure the email parameters and headers:<\/p>\n
\r\n\/\/ Upon no failure errors, let's email now!\r\nif(!isset($hasError)) {\r\n  $emailTo = 'youremailhere@googlemail.com';\r\n  $subject = 'Submitted message from '.$name;\r\n  $sendCopy = trim($_POST['sendCopy']);\r\n  $body = \"Name: $name \\n\\nEmail: $email \\n\\nComments: $comments\";\r\n  $headers = 'From: ' .' <'.$emailTo.'>' . \"\\r\\n\" . 'Reply-To: ' . $email;\r\n\r\n  mail($emailTo, $subject, $body, $headers);\r\n  \r\n  \/\/ Set our boolean completion value to TRUE\r\n  $emailSent = true;\r\n}\r\n<\/pre>\n
If you\u2019ve ever wondered how the script identifies your email address to send messages to, here\u2019s where you specify it in the $emailTo<\/code> variable.<\/p>\n
The $body<\/code> of the email uses the \\n delimiter to format the message with lines for the sender\u2019s name, email address, and their message content. This format is simple yet effective for reading the message clearly.<\/p>\n
Conclusion<\/h2>\n
This concludes our tutorial on creating an advanced contact form. If you want to style your elements similar to the provided example, you can refer to the styles.css<\/em> file included in the project. However, the structure is straightforward enough that you could easily design your own aesthetic.<\/p>\n
Feel free to download the source code<\/a> to examine the project more closely. It\u2019s beneficial to follow a tutorial, but accessing the source directly can be invaluable. A brief stylesheet is also included to facilitate easy customizations. Thanks for following along!<\/p>","protected":false},"excerpt":{"rendered":"
A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While there are numerous contact forms available online, many lack detailed explanations of their internal workings. This comprehensive tutorial will guide you through creating an advanced contact form from…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,1312,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Build an Ajax-Based HTML5 Contact Form - Hongkiat<\/title>\n<meta name=\"description\" content=\"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build an Ajax-Based HTML5 Contact Form\" \/>\n<meta property=\"og:description\" content=\"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-23T13:03:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:43:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"How to Build an Ajax-Based HTML5 Contact Form\",\"datePublished\":\"2011-08-23T13:03:16+00:00\",\"dateModified\":\"2025-04-03T16:43:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/\"},\"wordCount\":1331,\"commentCount\":46,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-css3-contact-form\\\/wampserver.jpg\",\"keywords\":[\"CSS\",\"Forms\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/\",\"name\":\"How to Build an Ajax-Based HTML5 Contact Form - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-css3-contact-form\\\/wampserver.jpg\",\"datePublished\":\"2011-08-23T13:03:16+00:00\",\"dateModified\":\"2025-04-03T16:43:13+00:00\",\"description\":\"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-css3-contact-form\\\/wampserver.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-css3-contact-form\\\/wampserver.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/ajax-html5-css3-contact-form-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build an Ajax-Based HTML5 Contact Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Build an Ajax-Based HTML5 Contact Form - Hongkiat","description":"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Build an Ajax-Based HTML5 Contact Form","og_description":"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While","og_url":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-08-23T13:03:16+00:00","article_modified_time":"2025-04-03T16:43:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"How to Build an Ajax-Based HTML5 Contact Form","datePublished":"2011-08-23T13:03:16+00:00","dateModified":"2025-04-03T16:43:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/"},"wordCount":1331,"commentCount":46,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg","keywords":["CSS","Forms","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/","url":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/","name":"How to Build an Ajax-Based HTML5 Contact Form - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg","datePublished":"2011-08-23T13:03:16+00:00","dateModified":"2025-04-03T16:43:13+00:00","description":"A contact form is crucial for any website as it serves as a conduit, allowing visitors to relay their thoughts or queries directly to the webmaster. While","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-css3-contact-form\/wampserver.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/ajax-html5-css3-contact-form-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build an Ajax-Based HTML5 Contact Form"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2G9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=10301"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10301\/revisions"}],"predecessor-version":[{"id":73503,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10301\/revisions\/73503"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10301"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}