{"id":563,"date":"2012-01-23T19:16:38","date_gmt":"2012-01-23T17:16:38","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=563"},"modified":"2022-10-06T11:13:45","modified_gmt":"2022-10-06T09:13:45","slug":"formulaire-de-contact-pur-css3-html5-sans-images","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/","title":{"rendered":"Formulaire de contact pur css3 html5 sans images"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

J’avais envie de m’amuser avec les nouvelles fonctionnalit\u00e9s des formulaires html5 et les gradients css3, et l’id\u00e9e qui m’est venue est est assez simple : cr\u00e9er un formulaire pure html5 Css3 sans utiliser une seule image.<\/em><\/p>\n

Voici le r\u00e9sultat, que vous pouvez voir dans une d\u00e9mo live ici<\/a>.<\/strong><\/p>\n

\"Formulaire<\/a>
\nAttention, ce formulaire utilisant des techniques de css3 et html5 pas encore r\u00e9pandues dans tous les navigateurs, il s’agit d’une d\u00e9monstration de ce qu’on peut faire<\/strong> avec du css3 (\u00e0 ne pas utiliser sur un site live donc). Il vaut mieux l’ouvrir avec la toute derni\u00e8re version de firefox. Vous pouvez \u00e9galement l’ouvrir avec chrome ou safari, mais vous n’aurez pas l’effet de transition sur les ic\u00f4nes, les transitions sur les pseudo-classes :before ne fonctionnant pas encore pour ces navigateurs \u00e0 l’heure o\u00f9 j’\u00e9cris cet article.<\/p>\n

Pour vous r\u00e9sumer quelques unes des techniques au programme : le fond utilise un gradient en css3, le bouton d\u2019envoi utilise des gradients et des box-shadow et les ic\u00f4nes sont en fait une font sp\u00e9ciale appel\u00e9e iconic<\/a>. Au niveau du html5, quelques \u00e9l\u00e9ments comme placeholder, required, autocomplete et les nouveaux input de type url et mail ont \u00e9t\u00e9 utilis\u00e9s.
\nVous trouverez sur onextrapixel le tutoriel expliquant comment ce formulaire a \u00e9t\u00e9 cr\u00e9\u00e9 :<\/p>\n

\u00a0\u00bb Full CSS3 HTML5 Contact Form with No Images \u00a0\u00bb <\/a><\/strong><\/p>\n

\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.J’avais envie de m’amuser avec les nouvelles fonctionnalit\u00e9s des formulaires html5 et les gradients css3, et l’id\u00e9e qui m’est venue est est assez simple : cr\u00e9er un formulaire pure html5 Css3 sans utiliser une seule image. Voici le r\u00e9sultat, que vous pouvez voir dans une d\u00e9mo live ici. Attention, ce formulaire utilisant des techniques de css3 et html5 pas encore r\u00e9pandues dans …<\/p>\n","protected":false},"author":3,"featured_media":564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-563","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"yoast_head":"\nFormulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2012-01-23T17:16:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-06T09:13:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/01\/img-article.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/\",\"name\":\"Formulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg\",\"datePublished\":\"2012-01-23T17:16:38+00:00\",\"dateModified\":\"2022-10-06T09:13:45+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg\",\"width\":700,\"height\":200},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Formulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.","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:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/","og_locale":"fr_FR","og_type":"article","og_title":"Formulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-01-23T17:16:38+00:00","article_modified_time":"2022-10-06T09:13:45+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/01\/img-article.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/","name":"Formulaire de contact pur css3 html5 sans images - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg","datePublished":"2012-01-23T17:16:38+00:00","dateModified":"2022-10-06T09:13:45+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Un formulaire pure html5 Css3 sans utiliser une seule image avec les gradients, box-shadow, et une font ic\u00f4ne.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/formulaire-de-contact-pur-css3-html5-sans-images\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/01\/img-article.jpg","width":700,"height":200},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=563"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/563\/revisions"}],"predecessor-version":[{"id":8184,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/563\/revisions\/8184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/564"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}