{"id":2053,"date":"2014-12-27T09:10:12","date_gmt":"2014-12-27T09:10:12","guid":{"rendered":"http:\/\/www.vishmax.com\/en\/?p=2053"},"modified":"2015-05-10T07:49:58","modified_gmt":"2015-05-10T07:49:58","slug":"free-responsive-form-with-css3-and-html5-with-demo","status":"publish","type":"post","link":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/","title":{"rendered":"Free responsive form with css3 and html5 with demo"},"content":{"rendered":"<p>Today in Labs we are posting a free responsive contact form for web developers. its build on pure CSS with HTML5. You can view source code here with an working example. there is option for download it as zip file for free!. Hope you will enjoy this post.<\/p>\n<h2>Responsive Form CSS code<\/h2>\n<pre lang=\"css\">\r\n\r\n\tform{\r\n\t\twidth:70%;\r\n\t\tmargin:4% 15%;\r\n\t}  \r\n\tinput[type=text]{\r\n\t\tmargin-bottom: 20px;\r\n\t\tmargin-top: 10px;\r\n\t\twidth:95%;\r\n\t\tpadding: 15px;\r\n\t\tborder-radius:5px;\r\n\t\tborder:1px solid #ccc;\r\n\t}\r\n\ttextarea{\r\n\t\twidth:95%;\r\n\t\tpadding: 15px;\r\n\t\tmargin-top: 10px;\r\n\t\tborder:1px solid #ccc;\r\n\t\tborder-radius:5px; \r\n\t\tmargin-bottom: 20px;\r\n\t\tresize:none;\r\n\t  } \r\n\tinput[type=text]:focus,textarea:focus {\r\n\t\tborder-color: #666;\r\n\t}\r\n\tinput[type=submit]{\r\n\t\tmargin-bottom: 20px;\r\n\t\twidth:99%;\r\n\t\tpadding: 15px;\r\n\t\tfont-size:15px;\r\n\t\tcursor:pointer;\r\n\t\tbackground: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);\r\n\t\tbackground: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));\r\n\t\tbackground: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);\r\n\t\tbackground: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);\r\n\t\tbackground: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);\r\n\t\tbackground-color: #FEC95B;\r\n\t\tborder-top: 1px solid #EDB14A;\r\n\t\tborder-bottom: 1px solid #CE922E;\r\n\t\tborder-right: 1px solid #DCA03B;\r\n\t\tborder-left: 1px solid #DCA03B;\r\n\t\tborder-radius: 1px 3px 3px 1px;\r\n\t\tbox-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);\r\n\t\tcolor: #555;\r\n\t\r\n\t}\r\n\t#submit:hover{\r\n\t\tbackground:#fee395;\r\n\t\ttext-shadow: -1px -1px 0 rgba(153,102,51,0.3);\r\n\t}\r\n\r\n\r\n<\/pre>\n<h2>Responsive Form HTML code<\/h2>\n<pre lang=\"html\">\r\n\r\n\t\t<!-- Form -->\r\n\t\t<form action=\"\" method=\"post\">  \r\n\t\t\t<label>Your Name <\/label>\r\n\t\t\t<input type=\"text\" name=\"name\" placeholder=\"Mike Tyson\" width=\"100px;\">\r\n\t\t\t<label>Email Id <\/label>\r\n\t\t\t<input type=\"text\" name=\"email\" placeholder=\"mail@example.com\">\t\t\r\n\t\t\t<label>  Contact Number <\/label>\r\n\t\t\t<input type=\"text\" name=\"contact\" placeholder=\"123456789\">\t\r\n\t\t\t<label>  Website URL <\/label>\r\n\t\t\t<input type=\"text\" name=\"website\" placeholder=\"www.example.com\">\r\n\t\t\t<label>  Message <\/label>\r\n\t\t\t<textarea name=\"message\" rows=\"10\" cols=\"15\" placeholder=\"Message\"><\/textarea>\r\n\t\t\t<input type=\"submit\" value=\"Send Message\" id=\"submit\">\t\t\r\n\t\t<\/form>\r\n\t\t<!-- End of Form -->\r\n\r\n<\/pre>\n<p><a class=\"external-download\" href=\"http:\/\/vishmax.com\/demos\/responsive-contact-form.html\" target=\"_blank\">Live Demo<\/a> <a class=\"zip--download\" href=\"http:\/\/vishmax.com\/demos\/responsive-contact-form.zip\" target=\"_blank\">Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today in Labs we are posting a free responsive contact form for web developers. its build on pure CSS with HTML5. You can view source code here with an working example. there is option for download it as zip file for free!. Hope you will enjoy this post. Responsive Form CSS code form{ width:70%; margin:4% [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2602,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[67,101,96,86,94],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.2.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Free responsive form with css3 and html5 with demo - Vishmax.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Free responsive form with css3 and html5 with demo - Vishmax.com\" \/>\n<meta property=\"og:description\" content=\"Today in Labs we are posting a free responsive contact form for web developers. its build on pure CSS with HTML5. You can view source code here with an working example. there is option for download it as zip file for free!. Hope you will enjoy this post. Responsive Form CSS code form{ width:70%; margin:4% [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Vishmax.com\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-27T09:10:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-10T07:49:58+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/form-400x230.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"230\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\"},\"headline\":\"Free responsive form with css3 and html5 with demo\",\"datePublished\":\"2014-12-27T09:10:12+00:00\",\"dateModified\":\"2015-05-10T07:49:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\"},\"wordCount\":68,\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"keywords\":[\"CSS\",\"Examples\",\"Freebies\",\"Inspiration\",\"Web Design Tips\"],\"articleSection\":[\"Labs\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\",\"url\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\",\"name\":\"Free responsive form with css3 and html5 with demo - Vishmax.com\",\"isPartOf\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\"},\"datePublished\":\"2014-12-27T09:10:12+00:00\",\"dateModified\":\"2015-05-10T07:49:58+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.vishmax.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Free responsive form with css3 and html5 with demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#website\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"name\":\"Vishmax.com\",\"description\":\"Software Company in Calicut for Web Design and eCommerce\",\"publisher\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.vishmax.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#organization\",\"name\":\"Vishmax.com\",\"url\":\"http:\/\/www.vishmax.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"contentUrl\":\"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png\",\"width\":150,\"height\":50,\"caption\":\"Vishmax.com\"},\"image\":{\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g\",\"caption\":\"admin\"},\"url\":\"http:\/\/www.vishmax.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Free responsive form with css3 and html5 with demo - Vishmax.com","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":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/","og_locale":"en_US","og_type":"article","og_title":"Free responsive form with css3 and html5 with demo - Vishmax.com","og_description":"Today in Labs we are posting a free responsive contact form for web developers. its build on pure CSS with HTML5. You can view source code here with an working example. there is option for download it as zip file for free!. Hope you will enjoy this post. Responsive Form CSS code form{ width:70%; margin:4% [&hellip;]","og_url":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/","og_site_name":"Vishmax.com","article_published_time":"2014-12-27T09:10:12+00:00","article_modified_time":"2015-05-10T07:49:58+00:00","og_image":[{"width":400,"height":230,"url":"http:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2014\/12\/form-400x230.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#article","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/"},"author":{"name":"admin","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93"},"headline":"Free responsive form with css3 and html5 with demo","datePublished":"2014-12-27T09:10:12+00:00","dateModified":"2015-05-10T07:49:58+00:00","mainEntityOfPage":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/"},"wordCount":68,"publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"keywords":["CSS","Examples","Freebies","Inspiration","Web Design Tips"],"articleSection":["Labs"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/","url":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/","name":"Free responsive form with css3 and html5 with demo - Vishmax.com","isPartOf":{"@id":"http:\/\/www.vishmax.com\/en\/#website"},"datePublished":"2014-12-27T09:10:12+00:00","dateModified":"2015-05-10T07:49:58+00:00","breadcrumb":{"@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.vishmax.com\/en\/labs\/free-responsive-form-with-css3-and-html5-with-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.vishmax.com\/en\/"},{"@type":"ListItem","position":2,"name":"Free responsive form with css3 and html5 with demo"}]},{"@type":"WebSite","@id":"http:\/\/www.vishmax.com\/en\/#website","url":"http:\/\/www.vishmax.com\/en\/","name":"Vishmax.com","description":"Software Company in Calicut for Web Design and eCommerce","publisher":{"@id":"http:\/\/www.vishmax.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.vishmax.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/www.vishmax.com\/en\/#organization","name":"Vishmax.com","url":"http:\/\/www.vishmax.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","contentUrl":"https:\/\/www.vishmax.com\/en\/wp-content\/uploads\/2023\/03\/logo-vishmax.png","width":150,"height":50,"caption":"Vishmax.com"},"image":{"@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/785fa94b56eb17ae7706d30777d6ab93","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.vishmax.com\/en\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e218268870406c917d20b442936d9e68?s=96&d=monsterid&r=g","caption":"admin"},"url":"http:\/\/www.vishmax.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2053"}],"collection":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/comments?post=2053"}],"version-history":[{"count":0,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/posts\/2053\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media\/2602"}],"wp:attachment":[{"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/media?parent=2053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/categories?post=2053"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.vishmax.com\/en\/wp-json\/wp\/v2\/tags?post=2053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}