{"id":3971,"date":"2015-04-29T12:15:58","date_gmt":"2015-04-29T09:15:58","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3971"},"modified":"2017-12-19T14:04:33","modified_gmt":"2017-12-19T12:04:33","slug":"html5-contact-form-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/","title":{"rendered":"HTML5 Contact Form Example"},"content":{"rendered":"

In this example we will go through a simple clean contact form.<\/p>\n

Contact forms are sections within a webpage that you add with a set of input fields for users to have the possibility to contact the website admins.<\/p>\n

Normally, you can choose how many fields you want the contact form to have, like name, e-mail, subject and message, or more if you need.<\/p>\n

You can also choose different types of field align like inline or block, according to the layout of your website and space available.<\/p>\n

This is how our final contact form is going to look like:
\n

\"Final<\/a>
Final View of the Contact Form<\/figcaption><\/figure>
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Basic Setup <\/h2>\n

Go ahead and create a new html<\/code> file with the basic syntax inside like below:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>HTML5 Contact Form<\/title>\r\n\t<link rel=\"stylesheet\" href=\"css\/font-awesome.min.css\">  <!-- link FontAwesome -->\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\r\n\t<style type=\"text\/css\">\r\n\r\n  \t<\/style>\r\n\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Add these<\/a> two FontAwesome folders inside your project folder (we’ll need font icons):
\n
\"Inside<\/a>
Inside your Project Folder<\/figcaption><\/figure>
\nNotice that I have already linked FontAwesome<\/strong> css file in the head<\/code> section of the basic html.<\/p>\n
2. Step by Step – Contact Form <\/h2>\n
Now let’s code the contact form step by step and see how we can make it better and better.<\/p>\n
2.1 Coding the HTML <\/h3>\n
In the html code section we will have the following components:<\/p>\n
1.<\/strong> A form<\/code> tag – this will wrap all input\/textarea fields. Give it a class of form<\/code>, a method<\/code> and an action<\/code>.<\/p>\n
2.<\/strong> Three div<\/code> tags – these divs will wrap inputs and fonticons, each div is going to have a class of wrapper<\/code>.<\/p>\n
    2.1 – Inputs with a class<\/code>, type<\/code>, name<\/code> and placeholder<\/code>. The class is going to be input-group<\/code> for all of them.<\/p>\n
    2.2 – Icons inside i<\/code> tags and with respective classes according to the fonticon being used.<\/p>\n
3.<\/strong> A textarea<\/code> element – it will be needed for the message section. It will have a class of textarea<\/code> and a placeholder.<\/p>\n
4.<\/strong> A button<\/code> element – it will send\/post the data to the destination. It will have a class of send-btn<\/code> and a href.<\/p>\n
\r\n<!-- HTML SECTION -->\r\n\r\n<form class=\"form\" action=\"\/post\" method=\"post\">\r\n\r\n<h2>Contact Form<\/h2>   <!-- just a title -->\r\n\r\n\t  <div class=\"wrapper\">\r\n   <i class=\"fa fa-user\"><\/i> \t\t <!-- user icon for name field -->\r\n   <input class=\"input-group\" type=\"password\" name=\"name\" placeholder=\"Name (required)\"><\/div>\r\n       <div class=\"wrapper\">\r\n   <i class=\"fa fa-envelope-o\"><\/i>\t<!-- envelope icon for email field -->\r\n   <input class=\"input-group\" type=\"text\" name='email' placeholder=\"E-Mail (required)\"><\/div>\r\n\t   <div class=\"wrapper\">\r\n   <i class=\"fa fa-file-text-o\"><\/i>\t<!-- file text icon for subject field -->\r\n   <input class=\"input-group\" type=\"text\" name='subject' placeholder=\"Subject (optional)\"><\/div>\r\n\r\n\t<textarea class=\"textarea\" placeholder=\"Write your message here...\" ><\/textarea>\r\n\r\n   <button href=\"#\" class=\"send-btn\">Send<\/button>\r\n<\/form>\r\n<\/pre>\n
For now, because only the html section has been coded, you will get a really creepy view of the form like this:
\n
\"HTML<\/a>
HTML Form Coding<\/figcaption><\/figure><\/p>\n
2.2 Styling with CSS <\/h3>\n
This is where the form gets a makeup and becomes in a final state for the website. <\/p>\n
First, we are going to refer to the .input-group<\/code> class to style the input fields.<\/p>\n
Look at the code below:<\/p>\n
\r\n.input-group {\r\n\twidth: 15em;\r\n\theight: 2.5em;\r\n\tmargin-bottom: 1.8em;            \/* some space below other field *\/\r\n\tmargin-right: 1.7em;             \/* some space from the next field *\/\r\n\tpadding-left: 2.5em;             \/* space from left to accommodate icons *\/\r\n\tborder: 0.1em solid #ccc;        \/* light gray border applied *\/\r\n\tborder-radius: 0.3em;            \/* small border radius *\/\r\n\tbackground-color: #ffffea;       \/* light yellow field background color *\/\r\n\t}\r\n<\/pre>\n
Up until now, the three input fields we have styled will look like this:
\n
\"Input<\/a>
Input Fields Styling<\/figcaption><\/figure><\/p>\n
Now lets work with the .wrapper and .wrapper<\/code> .fa classes<\/code> to make icons sit inside the fields.<\/p>\n
By giving these classes relative and absolute positioning in the page, we will be able to stick the fonticons inside the inputs.
\nThis is very tricky and hard to achieve in forms, so look carefully at the code below:<\/p>\n
\r\n.wrapper {\r\n\tposition: relative;\r\n\tdisplay: inline;       \/* displays the three input fields in the same row *\/\r\n}\r\n\r\n.wrapper .fa {\r\n\tposition: absolute;\r\n\tpadding: 0.4em;      \/* sat the icons with a right spacing referring to the border *\/\r\n\tfont-size: 1.2em;   \/* chose a suitable font size according to the size of the field *\/\r\n\tcolor: #ccc;       \/* gave icons a light gray color *\/\r\n}\r\n<\/pre>\n
Done this kind of icon positioning and styling, we’d get the following vieW:
\n
\"Styling<\/a>
Styling the Wrapper and Icons<\/figcaption><\/figure>
\nNow you understand better why we needed all that left padding when styling the input fields.<\/p>\n
It’s time to style the textarea<\/code> element. This element will sit below the input fields.<\/p>\n
\r\n.textarea {\r\n\twidth: 54em;          \/* initial width *\/\r\n\tmax-width: 54em;      \/* maximum width *\/\r\n\theight: 10em;         \/* initial height *\/\r\n\tdisplay: block;       \/* show below input fields *\/\r\n\tpadding: 1.5em;       \/* sit text\/placeholder with some edges padding *\/\r\n\tborder: 0.1em solid #ccc;  \/* same border style as the input fields *\/\r\n\tborder-radius: 0.3em;      \/* same border radius as the input fields *\/\r\n\tbackground-color: #ffffea; \/* same background color as the input fields *\/\r\n}\r\n<\/pre>\n
The textarea will be resizable by height but not by width as that looked better to me.<\/p>\n
I have also given these fields simple hover<\/code> and active<\/code> states like below:<\/p>\n
\r\n.input-group:hover {\r\n\tborder-color: #3399FF;\r\n\tbox-shadow: 0em 0em 0.2em #3399FF;\r\n}\r\n\r\n.input-group:active {\r\n\tborder-color: #006699;\r\n}\r\n\r\n.textarea:hover {\r\n\tborder-color: #3399FF;\r\n\tbox-shadow: 0em 0em 0.2em #3399FF;\r\n}\r\n\r\n.textarea:active {\r\n\tborder-color: #006699;\r\n}\r\n<\/pre>\n
In the image below, the message field is in hover<\/code> state:
\n
\"Contact<\/a>
Contact Form – All Elements Styled<\/figcaption><\/figure><\/p>\n
The last element we need to style is the button:<\/p>\n
\r\n.send-btn {\r\n\tpadding: 0.5em 4em;\r\n\tfont-size: 1em;\r\n\tmargin-top: 2em;\r\n\tbackground-color: #319cd5;\r\n\tcolor: white;\r\n\tborder: none;\r\n\tborder-radius: 0.3em;\r\n\tmargin-left: 37em;   \/* this value depends from page to page *\/\r\n}\r\n<\/pre>\n
And the final view of the form would be:
\n
\"Final<\/a>
Final Form View<\/figcaption><\/figure><\/p>\n
3. Conclusion <\/h2>\n
To conclude, we can say that there are a lot of ways you can code a contact form and it is pretty simple.<\/p>\n
However, do consider design elements like spacing, colors and icons when creating a form to make them more usable.<\/p>\n
Feel free to create forms both from scratch or using css frameworks to help you get through this.<\/p>\n
This was just a nice example of how you can do it yourseld in minutes.<\/p>\n
4. Download <\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: HTML5 Contact Form Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for users to have the possibility to contact the website admins. Normally, you can choose how many fields you want the contact form to have, like name, …<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-3971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Contact Form Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for\" \/>\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.webcodegeeks.com\/html5\/html5-contact-form-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Contact Form Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-29T09:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T12:04:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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.webcodegeeks.com\/html5\/html5-contact-form-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Contact Form Example\",\"datePublished\":\"2015-04-29T09:15:58+00:00\",\"dateModified\":\"2017-12-19T12:04:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\"},\"wordCount\":706,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\",\"name\":\"HTML5 Contact Form Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-04-29T09:15:58+00:00\",\"dateModified\":\"2017-12-19T12:04:33+00:00\",\"description\":\"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Contact Form Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Contact Form Example - Web Code Geeks - 2026","description":"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for","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.webcodegeeks.com\/html5\/html5-contact-form-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Contact Form Example - Web Code Geeks - 2026","og_description":"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-04-29T09:15:58+00:00","article_modified_time":"2017-12-19T12:04:33+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Contact Form Example","datePublished":"2015-04-29T09:15:58+00:00","dateModified":"2017-12-19T12:04:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/"},"wordCount":706,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/","name":"HTML5 Contact Form Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-04-29T09:15:58+00:00","dateModified":"2017-12-19T12:04:33+00:00","description":"In this example we will go through a simple clean contact form. Contact forms are sections within a webpage that you add with a set of input fields for","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-contact-form-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Contact Form Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=3971"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=3971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=3971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=3971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}