{"id":1758,"date":"2011-06-29T16:39:11","date_gmt":"2011-06-29T06:39:11","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1758"},"modified":"2012-08-05T12:30:00","modified_gmt":"2012-08-05T02:30:00","slug":"creating-a-contact-form-in-jquery-mobile-and-php","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/","title":{"rendered":"Creating a Contact Form in jQuery Mobile and PHP"},"content":{"rendered":"<p>This is a step-by-step tutorial on how to create a contact form in jQuery Mobile.  I have also included complete php source code that can be used as a web service to send emails from your server.  <\/p>\n<div class=\"download\">\n<h3>Download<\/h3>\n<p>[purchase_link id=\"1910\" text=\"Download complete source code $10.00\" style=\"button\" color=\"gray\"]\n<\/p><\/div>\n<p><strong>1. Create a folder structure<br \/>\n<\/strong>The first thing you need to do is create a folder structure where all your files will live.  My folder structure is as follows:<\/p>\n<pre>- www\r\n-- api\r\n--- send.php\r\n-- js\r\n--- contact.js\r\n-- css\r\n--- contact.css\r\n-- index.html\r\n<\/pre>\n<p><strong>2. Copy and paste the following boilerplate template<\/strong><br \/>\nThis will go into index.html file that you've created.  Note that we are including the Javascript and CSS files from the jQuery Mobile server.  You can also download the latest version of <a href=\"http:\/\/jquerymobile.com\/\">jQuery Mobile<\/a> from the website and include the local copy.  <\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n\t&lt;head&gt; \r\n\t&lt;title&gt;Contact Us&lt;\/title&gt; \r\n\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; \/&gt;\r\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/code.jquery.com\/mobile\/1.0b1\/jquery.mobile-1.0b1.min.css&quot; \/&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/code.jquery.com\/jquery-1.6.1.min.js&quot;&gt;&lt;\/script&gt;\r\n\t&lt;script type=&quot;text\/javascript&quot; src=&quot;http:\/\/code.jquery.com\/mobile\/1.0b1\/jquery.mobile-1.0b1.min.js&quot;&gt;&lt;\/script&gt;\r\n&lt;\/head&gt; \r\n&lt;body&gt; \r\n\r\n&lt;div data-role=&quot;page&quot;&gt;\r\n\r\n\t&lt;div data-role=&quot;header&quot;&gt;\r\n\t\t&lt;h1&gt;Contact Us&lt;\/h1&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/header --&gt;\r\n\r\n\t&lt;div data-role=&quot;content&quot;&gt;\t\r\n\t\t&lt;!-- Content goes here --&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/content --&gt;\r\n\r\n\t&lt;div data-role=&quot;footer&quot;&gt;\r\n\t\t&lt;p&gt;Source code by &lt;a href=&quot;https:\/\/eisabainyo.net\/weblog&quot; rel=&quot;external&quot;&gt;Web Development Blog&lt;\/a&gt;.  Check out &lt;a href=&quot;https:\/\/eisabainyo.net\/weblog\/tips-resources&quot; rel=&quot;external&quot;&gt;tip &amp;amp; resources&lt;\/a&gt; for Web Developers.&lt;\/a&gt;&lt;\/p&gt;\r\n\t&lt;\/div&gt;&lt;!-- \/footer --&gt;\r\n&lt;\/div&gt;&lt;!-- \/page --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><strong>3. Add HTML form in the content area<\/strong><br \/>\nAdd the following code into &lt;div data-role=\"content\"&gt;<\/p>\n<pre>\r\n\t\t&lt;div class=&quot;contact-thankyou&quot; style=\"display: none;\"&gt;\r\n\t\t\tThank you.  Your message has been sent.  We will get back to you as soon as we can.\r\n\t\t&lt;\/div&gt;\r\n\t\t&lt;div class=&quot;contact-form&quot;&gt;\r\n\t\t\t&lt;p class=&quot;mandatory&quot;&gt;* indicates Manadatory Field&lt;\/p&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot; class=&quot;text-field&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;firstname&quot;&gt;First Name*:&lt;\/label&gt;\r\n\t\t\t\t&lt;input type=&quot;text&quot; name=&quot;firstname&quot; value=&quot;&quot; placeholder=&quot;&quot; class=&quot;required&quot; id=&quot;firstname&quot; \/&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot; class=&quot;text-field&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;surname&quot;&gt;Last Name:&lt;\/label&gt;\r\n\t\t\t\t&lt;input type=&quot;text&quot; name=&quot;surname&quot; value=&quot;&quot; placeholder=&quot;&quot; id=&quot;surname&quot; \/&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot; class=&quot;text-field&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;email&quot;&gt;Email Address*:&lt;\/label&gt;\r\n\t\t\t\t&lt;input type=&quot;email&quot; name=&quot;email&quot; value=&quot;&quot; placeholder=&quot;&quot; class=&quot;required&quot; id=&quot;email&quot;  \/&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot; class=&quot;text-field&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;mobilephone&quot;&gt;Mobile Number:&lt;\/label&gt;\r\n\t\t\t\t&lt;input type=&quot;number&quot; name=&quot;mobilephone&quot; value=&quot;&quot; placeholder=&quot;&quot; id=&quot;mobilephone&quot; \/&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;state&quot;&gt;State:*&lt;\/label&gt;\r\n\t\t\t\t\t&lt;select name=&quot;state&quot; class=&quot;required&quot; id=&quot;state&quot;&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;&quot; data-placeholder=&quot;true&quot;&gt;Please select your state&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;ACT&quot;&gt;ACT&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;NSW&quot;&gt;NSW&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;NT&quot;&gt;NT&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;QLD&quot;&gt;QLD&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;SA&quot;&gt;SA&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;TAS&quot;&gt;TAS&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;VIC&quot;&gt;VIC&lt;\/option&gt;\r\n\t\t\t\t\t\t&lt;option value=&quot;WA&quot;&gt;WA&lt;\/option&gt;\r\n\t\t\t\t\t&lt;\/select&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div data-role=&quot;fieldcontain&quot;&gt;\r\n\t\t\t\t&lt;label for=&quot;message&quot;&gt;Message*:&lt;\/label&gt;\r\n\t\t\t\t&lt;textarea name=&quot;message&quot; id=&quot;message&quot; placeholder=&quot;&quot; class=&quot;required&quot;&gt;&lt;\/textarea&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t\t&lt;div class=&quot;send&quot;&gt;&lt;a href=&quot;javascript:;&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot; data-iconpos=&quot;right&quot; id=&quot;send-feedback&quot;&gt;send feedback&lt;\/a&gt;&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;&lt;!-- \/\/.contact-form --&gt;\r\n\t\t<\/pre>\n<p><strong>4. Create a web service in PHP to send email<br \/>\n<\/strong>We have a folder called api and we will create a new file called send.php in the api folder.  You will need to change the $recipient variable.<\/p>\n<pre>\r\n&lt;?php \r\nheader('content-type: application\/json; charset=utf-8');\r\n\r\nif (isset($_GET[&quot;firstname&quot;])) {\r\n\t$firstname = strip_tags($_GET['firstname']);\r\n\t$surname = strip_tags($_GET['surname']);\r\n\t$email = strip_tags($_GET['email']);\r\n\t$mobilephone = strip_tags($_GET['mobilephone']);\r\n\t$state = strip_tags($_GET['state']);\r\n\t$message = strip_tags($_GET['message']);\r\n\t$header = &quot;From: &quot;. $firstname . &quot; &lt;&quot; . $email . &quot;&gt;rn&quot;; \r\n\r\n\t$ip = $_SERVER['REMOTE_ADDR']; \r\n\t$httpref = $_SERVER['HTTP_REFERER']; \r\n\t$httpagent = $_SERVER['HTTP_USER_AGENT']; \r\n\t$today = date(&quot;F j, Y, g:i a&quot;);    \r\n\t\r\n\t$recipient = 'YOUREMAILADDRESS@DOMAIN.COM';\r\n\t$subject = 'Contact Form';\r\n\t$mailbody = &quot;\r\nFirst Name: $firstname \r\nLast Name: $surname \r\nEmail: $email \r\nMobile Phone: $mobilephone \r\nState: $state\r\nMessage: $message\r\n\r\nIP: $ip\r\nBrowser info: $httpagent\r\nReferral: $httpref\r\nSent: $today\r\n&quot;;\r\n\t$result = 'success';\r\n\r\n\tif (mail($recipient, $subject, $mailbody, $header)) {\r\n\t\techo json_encode($result);\r\n\t}\r\n}\r\n?&gt;\r\n<\/pre>\n<p><strong>5. Add Javascript code to handle form onsubmit<br \/>\n<\/strong>Create a file called contact.js with the following content and include it in your HTML file.<\/p>\n<pre>\r\n$('#send-feedback').live(&quot;click&quot;, function() {\r\n\tvar url = 'api\/send.php';\r\n\tvar error = 0;\r\n\tvar $contactpage = $(this).closest('.ui-page');\r\n\tvar $contactform = $(this).closest('.contact-form');\r\n\t$('.required', $contactform).each(function (i) {\r\n        if ($(this).val() === '') {\r\n\t\t\terror++;\r\n        } \r\n\t}); \/\/ each\r\n\tif (error &gt; 0) {\r\n\t\t\talert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');\t\r\n\t} else {\r\n\t\tvar firstname = $contactform.find('input[name=&quot;firstname&quot;]').val();\r\n\t\tvar surname = $contactform.find('input[name=&quot;surname&quot;]').val();\r\n\t\tvar state = $contactform.find('select[name=&quot;state&quot;]').val();\r\n\t\tvar mobilephone = $contactform.find('input[name=&quot;mobilephone&quot;]').val();\r\n\t\tvar email = $contactform.find('input[name=&quot;email&quot;]').val();\t\r\n\t\tvar message = $contactform.find('textarea[name=&quot;message&quot;]').val();\t\r\n\r\n\t\t\/\/submit the form\r\n\t\t$.ajax({\r\n\t\t\ttype: &quot;GET&quot;,\r\n\t\t\turl: url,\r\n\t\t\tdata: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},\r\n            success: function (data) {\r\n\t\t\t\tif (data == 'success') {\r\n\t\t\t\t\t\/\/ show thank you \r\n\t\t\t\t\t$contactpage.find('.contact-thankyou').show();\r\n\t\t\t\t\t$contactpage.find('.contact-form').hide();\r\n\t\t\t\t}  else {\r\n\t\t\t\t\talert('Unable to send your message. Please try again.');\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}); \/\/$.ajax\r\n\r\n\t}\r\n\treturn false;\r\n});\r\n<\/pre>\n<p>After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.<\/p>\n<div class=\"download\">\n<h3>Download<\/h3>\n<p>[purchase_link id=\"1910\" text=\"Download complete source code $10.00\" style=\"button\" color=\"gray\"]\n<\/p><\/div>\n<p>If you would like to get a sample phonegap project (uses jQuery mobile), you can download <a href=\"https:\/\/eisabainyo.net\/weblog\/2012\/08\/05\/phonegap-app-using-jquery-mobile\/\">PhoneGap App using jQuery Mobile<\/a> source code. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg\" alt=\"\" title=\"Contact Form in jQuery Mobile\" width=\"320\" height=\"928\" class=\"alignnone size-full wp-image-1774\" srcset=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg 320w, https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile-103x300.jpg 103w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\nScreenshot of Contact Form in jQuery Mobile<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a step-by-step tutorial on how to create a contact form in jQuery Mobile.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,7,11],"tags":[],"class_list":["post-1758","post","type-post","status-publish","format-standard","hentry","category-javascript","category-php","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating a Contact Form in jQuery Mobile and PHP  | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Contact Form in jQuery Mobile and PHP  | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"This is a step-by-step tutorial on how to create a contact form in jQuery Mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2011-06-29T06:39:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-05T02:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Creating a Contact Form in jQuery Mobile and PHP\",\"datePublished\":\"2011-06-29T06:39:11+00:00\",\"dateModified\":\"2012-08-05T02:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/\"},\"wordCount\":280,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"image\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2011\\\/06\\\/contact-jquerymobile.jpg\",\"articleSection\":[\"Javascript\",\"PHP\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/\",\"name\":\"Creating a Contact Form in jQuery Mobile and PHP | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2011\\\/06\\\/contact-jquerymobile.jpg\",\"datePublished\":\"2011-06-29T06:39:11+00:00\",\"dateModified\":\"2012-08-05T02:30:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2011\\\/06\\\/contact-jquerymobile.jpg\",\"contentUrl\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/wp-content\\\/uploads\\\/2011\\\/06\\\/contact-jquerymobile.jpg\",\"width\":\"320\",\"height\":\"928\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/2011\\\/06\\\/29\\\/creating-a-contact-form-in-jquery-mobile-and-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Contact Form in jQuery Mobile and PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#website\",\"url\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/eisabainyo.net\\\/weblog\\\/#\\\/schema\\\/person\\\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a Contact Form in jQuery Mobile and PHP  | Tech Leadership Advice &amp; Resources","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:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Contact Form in jQuery Mobile and PHP  | Tech Leadership Advice &amp; Resources","og_description":"This is a step-by-step tutorial on how to create a contact form in jQuery Mobile.","og_url":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2011-06-29T06:39:11+00:00","article_modified_time":"2012-08-05T02:30:00+00:00","og_image":[{"url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg","type":"","width":"","height":""}],"author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Creating a Contact Form in jQuery Mobile and PHP","datePublished":"2011-06-29T06:39:11+00:00","dateModified":"2012-08-05T02:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/"},"wordCount":280,"commentCount":8,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg","articleSection":["Javascript","PHP","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/","url":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/","name":"Creating a Contact Form in jQuery Mobile and PHP | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#primaryimage"},"image":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#primaryimage"},"thumbnailUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg","datePublished":"2011-06-29T06:39:11+00:00","dateModified":"2012-08-05T02:30:00+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#primaryimage","url":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg","contentUrl":"https:\/\/eisabainyo.net\/weblog\/wp-content\/uploads\/2011\/06\/contact-jquerymobile.jpg","width":"320","height":"928"},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2011\/06\/29\/creating-a-contact-form-in-jquery-mobile-and-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Creating a Contact Form in jQuery Mobile and PHP"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1758"}],"version-history":[{"count":24,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1758\/revisions"}],"predecessor-version":[{"id":1936,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1758\/revisions\/1936"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}