{"id":17752,"date":"2019-02-28T17:25:25","date_gmt":"2019-02-28T20:25:25","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=17752"},"modified":"2019-03-17T00:58:09","modified_gmt":"2019-03-17T03:58:09","slug":"10-modelos-de-checkouts-em-html-e-css-gratuitos","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/10-modelos-de-checkouts-em-html-e-css-gratuitos\/","title":{"rendered":"10 modelos de Checkouts em HTML e CSS Gratuitos"},"content":{"rendered":"<p>Os formul\u00e1rios de pagamento, ou popularmente conhecidos como <strong>Checkouts de compras<\/strong> s\u00e3o a parte mais importante da <strong>jornada do usu\u00e1rio em um e-commerce<\/strong> ou at\u00e9 em um site de venda de servi\u00e7os ou assinaturas. Eles significam a conclus\u00e3o de uma compra e geralmente s\u00e3o otimizados para <strong>aumentar as convers\u00f5es<\/strong>.<\/p>\n<p>Mas se voc\u00ea n\u00e3o tem id\u00e9ia de onde come\u00e7ar, talvez esses <strong>formul\u00e1rios gratuitos de Checkouts em HTML e CSS<\/strong> possam ajudar. Escolhemos 10 dos formul\u00e1rios de Checkout mais legais da CodePen, todos de c\u00f3digo aberto, e todos f\u00e1ceis de clonar para seus pr\u00f3prios sites.<\/p>\n<h2>Donut Payment<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/mycnlz\/embed\/preview\/reLOZV?height=300&#038;slug-hash=reLOZV&#038;default-tabs=html,result&#038;host=https:\/\/codepen.io#?secret=oFAKlasjZ0\" data-secret=\"oFAKlasjZ0\" title=\"DailyUI #002 - Credit Card Checkout\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Este Checkout realmente leva o design a um n\u00edvel totalmente novo. Essa interface de <a href=\"https:\/\/codepen.io\/nw\/pen\/BoGyER\" target=\"_blank\" rel=\"noopener noreferrer\">pagamento do Donut<\/a> faz parte do <a href=\"http:\/\/www.dailyui.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">desafio di\u00e1rio da interface do usu\u00e1rio<\/a> e essa interface de Nathaniel Watson merece um pr\u00eamio da academia.<\/p>\n<p>Ele usa gradientes CSS para os fundos e o padr\u00e3o repetitivo dividindo os dois lados. O campo de entrada CC tamb\u00e9m distribui n\u00fameros em pacotes de 4, o que torna isso incrivelmente simples de usar.<\/p>\n<p>Tipografia, cor, espa\u00e7o em branco e forma todos se juntam neste formul\u00e1rio de Checkout incrivelmente exclusivo . Certamente ser\u00e1 \u00fatil em muitos sites ou serve como um exemplo de quanto voc\u00ea pode fazer com o design.<\/p>\n<h2>Simple Checkout<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/opensoorce\/embed\/preview\/zwpNOO?height=300&#038;slug-hash=zwpNOO&#038;default-tabs=css,result&#038;host=https:\/\/codepen.io#?secret=9qdi1MmB8P\" data-secret=\"9qdi1MmB8P\" title=\"Checkout Form\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Para uma vis\u00e3o mais pr\u00e1tica dos campos de Checkout, este <a href=\"https:\/\/codepen.io\/atakan\/full\/gBtef\" target=\"_blank\" rel=\"noopener noreferrer\">simples Checkout<\/a> oferece tudo o que voc\u00ea precisa. \u00c9 otimizado, mas faz grande uso do espa\u00e7o com fontes n\u00edtidas e realce de campo de entrada.<\/p>\n<p>Todo o c\u00f3digo \u00e9 CSS puro e voc\u00ea pode copiar\/colar diretamente no seu site para uma solu\u00e7\u00e3o r\u00e1pida. Entretanto, este \u00e9 um formul\u00e1rio muito pequeno, ent\u00e3o voc\u00ea pode precisar expandi-lo, mas o estilo geral \u00e9 muito limpo e deve misturar-se bem em qualquer layout.<\/p>\n<h2>Shopping Prototype<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/mejiaj\/embed\/preview\/CnDEj?height=300&#038;slug-hash=CnDEj&#038;default-tabs=html,result&#038;host=https:\/\/codepen.io#?secret=OmCGNq2YGJ\" data-secret=\"OmCGNq2YGJ\" title=\"Shopping\/Checkout Prototype\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Prot\u00f3tipos limpos que real\u00e7am a est\u00e9tica, deixando apenas a experi\u00eancia do usu\u00e1rio em foco. Isso \u00e9 exatamente o que voc\u00ea ganha com este <a href=\"https:\/\/codepen.io\/mejiaj\/pen\/CnDEj\" target=\"_blank\" rel=\"noopener noreferrer\">prot\u00f3tipo de compras<\/a> que oferece muita inspira\u00e7\u00e3o para ser implementado em seu e-commerce ou site.<\/p>\n<p>Campos de quantidade usam as entradas de \u201cn\u00famero\u201d e atualizam automaticamente os subtotais em cada linha. Esse efeito \u00e9 bem simples de construir com Javascript e ainda mais f\u00e1cil de ser inserido em seu pr\u00f3prio site.<\/p>\n<p>Tente tamb\u00e9m clicar no bot\u00e3o &#8220;Checkout&#8221; e vasculhe todas as outras p\u00e1ginas. O criador deste Checkout, James Mejia, adicionou p\u00e1ginas para inscri\u00e7\u00f5es de convidados, envio, pagamento e alguns outros formul\u00e1rios no processo de Checkout.<\/p>\n<h2>Credit Card Caf\u00e9<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/tyaq\/embed\/preview\/ZQZxvb?height=300&#038;slug-hash=ZQZxvb&#038;default-tabs=html,result&#038;host=https:\/\/codepen.io#?secret=l5Cxbuszey\" data-secret=\"l5Cxbuszey\" title=\"Credit Card Checkout | Daily UI #002\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Esta forma divertida e simples de Checkout usa um <a href=\"https:\/\/codepen.io\/tyaq\/pen\/ZQZxvb\" target=\"_blank\" rel=\"noopener noreferrer\">tema de caf\u00e9<\/a> com um formul\u00e1rio de pagamento no estilo de de recibo de papel fino. Alguns e-commerces podem precisar de mais espa\u00e7o, mas isso \u00e9 perfeito para qualquer restaurante menor ou fabricante de caf\u00e9 on-line.<\/p>\n<p>O campo din\u00e2mico de cart\u00e3o de cr\u00e9dito Visa \u00e9 o recurso mais interessante de todo este Checkout. \u00c9 totalmente din\u00e2mico, com r\u00f3tulos que diminuem automaticamente quando voc\u00ea come\u00e7a a inserir conte\u00fado. Os campos suspensos do m\u00eas\/data s\u00e3o personalizados, al\u00e9m de dar um sentido de vida ao processo de Checkout .<\/p>\n<h2>Purchase Payment<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/mycnlz\/embed\/preview\/reLOZV?height=300&#038;slug-hash=reLOZV&#038;default-tabs=html,result&#038;host=https:\/\/codepen.io#?secret=oFAKlasjZ0\" data-secret=\"oFAKlasjZ0\" title=\"DailyUI #002 - Credit Card Checkout\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Aqui est\u00e1 outro <a href=\"https:\/\/codepen.io\/mycnlz\/full\/reLOZV\" target=\"_blank\" rel=\"noopener noreferrer\">projeto bacana de interface do usu\u00e1rio<\/a>, criado pela desenvolvedora Maycon Luiz.<\/p>\n<p>Ele usa um design baseado em cart\u00e3o com os produtos listados no lado esquerdo e os detalhes de check-out \u00e0 direita.<\/p>\n<p>O recurso que mais gosto \u00e9 a atualiza\u00e7\u00e3o autom\u00e1tica do cart\u00e3o. Quando voc\u00ea digita n\u00fameros nos campos de pagamento, eles aparecem automaticamente no gr\u00e1fico do cart\u00e3o de cr\u00e9dito na parte superior. Isso d\u00e1 ao usu\u00e1rio algum destaque para que eles inseriram n\u00fameros corretamente.<\/p>\n<h2>Vans Checkout<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/tomma5o\/embed\/preview\/ZOxQrJ?height=300&#038;slug-hash=ZOxQrJ&#038;default-tabs=css,result&#038;host=https:\/\/codepen.io#?secret=8QalkAYcQv\" data-secret=\"8QalkAYcQv\" title=\"DailyUi#002 -  Credit Card Checkout\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Uma outra interface do usu\u00e1rio sensacional com uma abordagem diferente \u00e9 o <a href=\"https:\/\/codepen.io\/tomma5o\/full\/ZOxQrJ\" target=\"_blank\" rel=\"noopener noreferrer\">Checkout da Vans<\/a>, codificado por Tommaso Poletti. Ele tem alguns efeitos de p\u00e1gina din\u00e2mica que ocultam todos os itens do carrinho de compras por tr\u00e1s do formul\u00e1rio.<\/p>\n<p>Se voc\u00ea clicar no \u00edcone da sacola de compras, perceber\u00e1 que todos esses itens voam para o lado. \u00c9 uma ideia legal, mas provavelmente funcionaria melhor se fosse vis\u00edvel constantemente. Eu realmente gosto do design de campo mantendo o logotipo da marca perto do topo para manter a autoridade.<\/p>\n<h2>Progress Checkout<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/hannahtsou\/embed\/preview\/pRBvaN?height=300&#038;slug-hash=pRBvaN&#038;default-tabs=css,result&#038;host=https:\/\/codepen.io#?secret=D4evLKRYMg\" data-secret=\"D4evLKRYMg\" title=\"Check out panel\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Breadcrumbs e barras de progresso s\u00e3o super comuns em formul\u00e1rios de Checkout. Eles informam ao usu\u00e1rio quanto tempo eles demoram e quanto tempo levar\u00e1 para concluir a compra.<\/p>\n<p>Esse <a href=\"https:\/\/codepen.io\/hannahtsou\/pen\/pRBvaN\" target=\"_blank\" rel=\"noopener noreferrer\">formul\u00e1rio de Checkout<\/a> coloca a frente e o centro da barra de progresso diretamente aos olhos dos usu\u00e1rios que est\u00e3o comprando. Ele usa um texto de r\u00f3tulo claro para mostrar exatamente onde est\u00e3o e quanto mais precisam ir. Todos os outros campos de formul\u00e1rio usam esse mesmo estilo de design claro para que a tipografia seja incr\u00edvel.<\/p>\n<p>Eu definitivamente acho que este formul\u00e1rio de check-out pode se encaixar em qualquer site com facilidade.<\/p>\n<h2>CC Details<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/Momciloo\/embed\/preview\/meZMBm?height=300&#038;slug-hash=meZMBm&#038;default-tabs=css,result&#038;host=https:\/\/codepen.io#?secret=rVVzPDWTRp\" data-secret=\"rVVzPDWTRp\" title=\"#codevember Credit Card Checkout\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>O desenvolvedor Momcilo Popov criou este campo de <a href=\"https:\/\/codepen.io\/Momciloo\/full\/meZMBm\" target=\"_blank\" rel=\"noopener noreferrer\">Checkout CC<\/a> intacto com uma grande dose de minimalismo. O campo de cart\u00e3o de cr\u00e9dito personalizado usa caracteres de ponto para seguran\u00e7a e separa seu n\u00famero CC em pacotes de 4 por padr\u00e3o.<\/p>\n<p>A foto do c\u00e3o do exemplo pode funcionar de forma confi\u00e1vel para um aplicativo de compras de animais de estima\u00e7\u00e3o, mas voc\u00ea poderia facilmente substituir esta foto com qualquer outra de acordo com seu neg\u00f3cio ou nicho. Este Formul\u00e1rio de Checkout \u00e9 incrivelmente robusto e deve ser f\u00e1cil o suficiente para ser adaptado se voc\u00ea quiser replic\u00e1-lo em outro lugar.<\/p>\n<h2>Embedded Checkout<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/paystand\/embed\/preview\/BKoxWK?height=300&#038;slug-hash=BKoxWK&#038;default-tabs=js,result&#038;host=https:\/\/codepen.io#?secret=glPPRQun80\" data-secret=\"glPPRQun80\" title=\"Embedded Checkout 2 Example\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Enquanto procurava por formul\u00e1rios de Checkout, tropecei <a href=\"https:\/\/codepen.io\/paystand\/pen\/BKoxWK\" target=\"_blank\" rel=\"noopener noreferrer\">neste Checkout<\/a> que realmente chamou minha aten\u00e7\u00e3o. \u00c9 um bom exemplo de como voc\u00ea pode criar formul\u00e1rios de Checkout personalizados com \u00f3tima apar\u00eancia, sem se preocupar com seguran\u00e7a ou pagamento.<\/p>\n<p>Isso depende de uma plataforma de terceiros, mas tamb\u00e9m \u00e9 poss\u00edvel incorporar o formul\u00e1rio e oferecer uma recep\u00e7\u00e3o de fatura personalizada para os compradores. Isso certamente oferece alguma inspira\u00e7\u00e3o para a interface do usu\u00e1rio, mas tamb\u00e9m \u00e9 uma escolha fant\u00e1stica para desenvolvedores que querem economizar algum tempo em seus projetos.<\/p>\n<h2>Credit Card Animation<\/h2>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/codepen.io\/opensoorce\/embed\/preview\/pPpNXq?height=300&#038;slug-hash=pPpNXq&#038;default-tabs=html,result&#038;host=https:\/\/codepen.io#?secret=e7aPyr9oqF\" data-secret=\"e7aPyr9oqF\" title=\"Daily UI #002: Credit Card Checkout\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Por \u00faltimo, mas n\u00e3o menos importante, este incr\u00edvel <a href=\"https:\/\/codepen.io\/supah\/pen\/OMdPpW\" target=\"_blank\" rel=\"noopener noreferrer\">formul\u00e1rio Checkout CC animado<\/a>, usando um cart\u00e3o de cr\u00e9dito totalmente vis\u00edvel que ilustra um cart\u00e3o de cr\u00e9dito real. Conforme voc\u00ea preenche o formul\u00e1rio, cada campo \u00e9 atualizado no cart\u00e3o em tempo real.<\/p>\n<p>O melhor de tudo \u00e9 que usa uma anima\u00e7\u00e3o personalizada para girar entre frente e verso do cart\u00e3o de cr\u00e9dito. Ent\u00e3o, quando voc\u00ea se concentra no campo CCV, o cart\u00e3o gira automaticamente para mostrar a \u00e1rea posterior. Efeito bacana e definitivamente exclusivo.<\/p>\n<p>Portanto, esta cole\u00e7\u00e3o abrange os 10 formul\u00e1rios de Checkout mais legais que pude encontrar, mas tenho certeza de que existem <a href=\"https:\/\/www.eadfox.com.br\/10-modelos-de-checkouts-em-html-e-css-gratis\/\" target=\"_blank\" rel=\"noopener\">dezenas de outros por a\u00ed<\/a>. Se voc\u00ea construiu um voc\u00ea mesmo ou se voc\u00ea souber de algum outro, sinta-se \u00e0 vontade para compartilhar na \u00e1rea de discuss\u00e3o abaixo.<\/p>\n<hr \/>\n<p><em>Post traduzido pelo MX Cursos e originalmente dispon\u00edvel <a href=\"https:\/\/1stwebdesigner.com\/free-open-source-css3-checkout-forms\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqui<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os formul\u00e1rios de pagamento, ou popularmente conhecidos como Checkouts de compras s\u00e3o a parte mais importante da jornada do usu\u00e1rio em um e-commerce ou at\u00e9 em um site de venda de servi\u00e7os ou assinaturas. Eles significam a conclus\u00e3o de uma compra e geralmente s\u00e3o otimizados para aumentar as convers\u00f5es. Mas se voc\u00ea n\u00e3o tem id\u00e9ia [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":18295,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1199,1181,1201,1200],"class_list":["post-17752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-checkout","tag-css3","tag-free","tag-html5"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/17752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=17752"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/17752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18295"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=17752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=17752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=17752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}