{"id":9845,"date":"2017-06-21T10:42:13","date_gmt":"2017-06-21T09:42:13","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=9845"},"modified":"2020-11-12T13:27:32","modified_gmt":"2020-11-12T13:27:32","slug":"dear-developers-forms-avoiding-backend-mysteries","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/","title":{"rendered":"Dear Developers, Forms and Avoiding Backend Mysteries"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Welcome to Dear Developer\u2019s entry seven. It\u2019s the dawn of summer in London, providing bundles of vitamin D and some once in a blue moon smiling faces. Including my own. And what better to whack a smile on your face on top of the sunny weather than a little HTML hack? That's what I thought. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you've been following this series, you'll know I\u2019ve been working towards <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-the-universe-is-telling-me-to-code\/\">building my first website<\/a>. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-dont-let-prototypes-dreams\/\">Last time<\/a>, you saw a preview of my homepage and all the code behind it. It was all about getting accustomed to HTML layout and growing more comfortable with divs, classes and unique IDs. There were a couple of bits and bobs I diverged from, so this time I'm revisiting an element which is slightly more technical. Forms. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">Forms generally act as an interactive dialogue which retrieves information from the user. That information can be anything from an email address to credit card details. It\u2019s something we\u2019re all familiar with seeing on the day to day, I\u2019m talking sign up forms, login forms and payment forms. Which all factor in a range of different elements as well such as text fields, drop down menus, check boxes etc.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For my own website, I\u2019d like to add one form to my homepage which acts as a way for visitors to get in touch with me, should they want to. The second will sit on my blog, which will act as a way for users to sign up to my newsletter. Again, should they want to. In this post I'll be establishing the components you need to write form syntax and also how to code forms without a need for backend management.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Form syntax is made up of two main elements, <code class=\"fontSize-s language-html centered\">&lt;form&gt;<\/code> and <code class=\"fontSize-s language-html centered\">&lt;input&gt;<\/code>. The <code class=\"fontSize-s language-html centered\">&lt;form&gt;<\/code> element opens the syntax and closes it, wrapping the <code class=\"fontSize-s language-html centered\">&lt;input&gt;<\/code> tags within it. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Like so: <\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">&lt;form&gt;\r\n    &lt;input&gt;\r\n&lt;\/form>\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However, this is a little bare. Both the <code class=\"fontSize-s language-html centered\">&lt;form&gt;<\/code> element and the <code class=\"fontSize-s language-html centered\">&lt;input&gt;<\/code> element are then paired with a range of attributes. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For the <code class=\"fontSize-s language-html centered\">&lt;form&gt;<\/code> element, these include action, method, enctype and target. The two essentials to know are <code class=\"fontSize-s language-html centered\">action<\/code> and <code class=\"fontSize-s language-html centered\">method<\/code>, before I go any further here\u2019s the low-down on what each of them controls.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Form element attributes<\/h2>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Action<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">This attribute defines the action which will be performed when the form is submitted. Normally, when the user hits submit this is sent to a web page on the server. If the action button is omitted, the action carried out is set to the current page.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Beginning to understand servers is backend territory that frankly makes my brain want to melt and wither away like maths did in secondary school. However, thanks to the wonderful number of incredibly useful services that are around today, it\u2019s not something you and I need to grasp just yet. Thanks to a little site known as Formspree. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/formspree.io\/\">Formspree<\/a> gives us an easy way out with forms and has created a way to create functional HTML forms for static sites (sites made up of HTML and CSS). Whatever your form might be for, you can simply send the data to their URL and they'll forward it to your email. No Javascript, no PHP, no nothing! <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To set it up simply follow these steps: <\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Setup the HTML form<\/strong><br \/>\nChange your form's action attribute to this link https:\/\/formspree.io\/your@email.com replacing \u2018your@email.com\u2019 with your own email.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Add a name attribute to every field<\/strong><br \/>\nEnsure all <code class=\"fontSize-s language-html centered\">&lt;input&gt;<\/code>, <code class=\"fontSize-s language-html centered\">&lt;select&gt;<\/code> and <code class=\"fontSize-s language-html centered\">&lt;text&gt;<\/code> elements inside your form have a name attribute, otherwise you will not receive the data filled in these fields.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Submit the form and confirm your email address<\/strong><br \/>\nGo to your website and submit the form once. Formspree will then send you an email asking to confirm your email address. (If you display the same form in multiple URLs of your site you'll have to confirm it multiple times.)<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">All set, receive emails<\/strong><br \/>\nFrom now on, when someone submits that form, Formspree will forward you the data as email.<\/li>\n<\/ol>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Method<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This attribute determines which method should be used to upload the data and most commonly has the values of <code class=\"fontSize-s language-html centered\">GET<\/code> and <code class=\"fontSize-s language-html centered\">POST<\/code>. How do you determine between GET and POST?<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><code class=\"fontSize-s language-html centered\">GET<\/code> is a forms default setting and means that all the data submitted will be accessible in the page address field where you actioned your data. Only to be used for <em>non-sensitive<\/em> information.<\/li>\n<li><code class=\"fontSize-s language-html centered\">POST<\/code> is to be used for all <em>sensitive<\/em> data, it\u2019s a more secure way to receive personal information from users. The <code class=\"fontSize-s language-html centered\">&lt;POST&gt;<\/code> method does not display the submitted form data in the page address field.<\/li>\n<\/ul>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Input element attributes<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The second component needed to complete form syntax is the <code class=\"fontSize-s language-html centered\">&lt;input&gt;<\/code> element, using this allows you to add multiple input fields. There's no limit, just add a new input element underneath an other. Go crazy. These fields can be displayed in several ways due to its varied attributes: <code class=\"fontSize-s language-html centered\">type<\/code>, <code class=\"fontSize-s language-html centered\">name<\/code>, <code class=\"fontSize-s language-html centered\">value<\/code>, <code class=\"fontSize-s language-html centered\">size<\/code>, and of course, <code class=\"fontSize-s language-html centered\">max length<\/code>. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s how they function: <\/strong><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Type<\/strong>: Indicates what kind of data this field will hold for input control. So for example, \u2018text\u2019 would represent free text. For example for password input control the password. <\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Name<\/strong>: This gives your input tags individual titles which will then be sent to the server to be recognized and get the value. (The value can be anything you like.)<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Value<\/strong>: With this attribute you can add some text which will appear in the text field for users to see. <\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Size<\/strong>: Allows you to specify the width of the input box in terms of characters<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Max-length<\/strong>: Restrict the number of characters users can input into the text field <\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example: <\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">&lt;form action=\"https:\/\/formspree.io\/naomi@marveling.com\" method=\"POST\"&gt;\r\n    &lt;input type=\"text\" name=\"Name\" value=\"Your name\"&gt;\r\n    &lt;input class=\"message\" type=\"text\" name=\"Message\" value=\"Your message\"&gt;\r\n    &lt;input id=\"submit\" type=\"submit\" value=\"BREAK ICE\"&gt;\r\n &lt;\/form&gt;\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Will appear:<br \/>\n<center><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-13-at-11.41.55.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-13-at-11.41.55.png\" alt=\"screen-shot-2017-06-13-at-11-41-55\" width=\"395\" height=\"113\" class=\"alignnone size-full wp-image-10020\" \/><\/a><\/center><br \/>\n<br \/><\/br><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Which doesn't look all too appealing, so with some of the basic formatting we've learned over the last few weeks we can change all of that. Using the below CSS, I've transformed the above unhealthy looking form, into one that is on brand with the rest of my website. It's the small things you have to change to make sure they belong there. Here are the links if you need to refresh on making changes to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-im-brink-typography\/\">fonts<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-css-structures-colour-spectrums-check\/\">colours<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-box-model-blessing\/\">padding and margins<\/a>. <\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">input {\r\n   font-family: \"Karla\";\r\n   font-size: 12px;\r\n   color: #A2A7A5;\r\n   height: 32px; \r\n   line-height: 32px;\r\n   margin-right: auto;\r\n   margin-left: auto;\r\n   margin-top: 5px;\r\n   max-width: 350px;\r\n   width: 100%;\r\n   display: block;\r\n   padding-left: 7px;\r\n   border-radius: 7px;\r\n   border: none;\r\n}\r\n\r\n.message {\r\n\theight: 50px;\r\n\tpadding-bottom: 15px;\r\n}\r\n\r\n#submit {\r\n\tcolor: white;\r\n\tbackground: #6D696A;\r\n\tfont-size: 13px;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With the above code, my form has now morphed into the much more visually aesthetic form below. Voila.  <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-06-at-12.58.48.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/06\/Screen-Shot-2017-06-06-at-12.58.48.png\" alt=\"screen-shot-2017-06-06-at-12-58-48\" width=\"428\" height=\"199\" class=\"alignnone size-full wp-image-10014\" \/><\/a><\/center><br \/>\n<br \/><\/br><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>For those of you on this journey with me, I hope this article was helpful! Follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/naomfranci\">Twitter<\/a> for updates on the next post, or just to ask me a question.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Dear Developer\u2019s entry seven. It\u2019s the dawn of summer in London, providing bundles of vitamin D and some once in a blue moon smiling faces. Including my own. And what better to whack a smile on your face on top of the sunny weather than a little HTML hack? That&#8217;s what I thought. If you&#8217;ve been following this&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":10033,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[504],"tags":[],"class_list":["post-9845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, Forms and Avoiding Backend Mysteries | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Welcome to Dear Developer\u2019s entry seven. It\u2019s the dawn of summer in London, providing bundles of vitamin D and some once in a blue moon smiling faces. Including my own. And what better to whack a smile on your face on top of the sunny weather than a little HTML hack? That&#039;s what I thought. If you&#039;ve been following this... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-21T09:42:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T13:27:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/06\/forms.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.shopjessicabuckley.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/wp-content\/uploads\/2017\/06\/forms.png\",\"width\":1100,\"height\":600},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#webpage\",\"url\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/\",\"name\":\"Dear Developers, Forms and Avoiding Backend Mysteries | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#primaryimage\"},\"datePublished\":\"2017-06-21T09:42:13+00:00\",\"dateModified\":\"2020-11-12T13:27:32+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, Forms and Avoiding Backend Mysteries\",\"datePublished\":\"2017-06-21T09:42:13+00:00\",\"dateModified\":\"2020-11-12T13:27:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#primaryimage\"},\"articleSection\":\"Web Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.shopjessicabuckley.com\/blog\/dear-developers-forms-avoiding-backend-mysteries\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.shopjessicabuckley.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/9845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/comments?post=9845"}],"version-history":[{"count":0,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/posts\/9845\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media\/10033"}],"wp:attachment":[{"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/media?parent=9845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/categories?post=9845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shopjessicabuckley.com\/blog\/wp-json\/wp\/v2\/tags?post=9845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}