Blog do MX Cursos

10 modelos de Checkouts em HTML e CSS Gratuitos

10 modelos de Checkouts em HTML e CSS Gratuitos
5 (100%) 1 voto

Os formulários de pagamento, ou popularmente conhecidos como Checkouts de compras são a parte mais importante da jornada do usuário em um e-commerce ou até em um site de venda de serviços ou assinaturas. Eles significam a conclusão de uma compra e geralmente são otimizados para aumentar as conversões.

Mas se você não tem idéia de onde começar, talvez esses formulários gratuitos de Checkouts em HTML e CSS possam ajudar. Escolhemos 10 dos formulários de Checkout mais legais da CodePen, todos de código aberto, e todos fáceis de clonar para seus próprios sites.

Donut Payment

Este Checkout realmente leva o design a um nível totalmente novo. Essa interface de pagamento do Donut faz parte do desafio diário da interface do usuário e essa interface de Nathaniel Watson merece um prêmio da academia.

Ele usa gradientes CSS para os fundos e o padrão repetitivo dividindo os dois lados. O campo de entrada CC também distribui números em pacotes de 4, o que torna isso incrivelmente simples de usar.

Tipografia, cor, espaço em branco e forma todos se juntam neste formulário de Checkout incrivelmente exclusivo . Certamente será útil em muitos sites ou serve como um exemplo de quanto você pode fazer com o design.

Simple Checkout

Para uma visão mais prática dos campos de Checkout, este simples Checkout oferece tudo o que você precisa. É otimizado, mas faz grande uso do espaço com fontes nítidas e realce de campo de entrada.

Todo o código é CSS puro e você pode copiar/colar diretamente no seu site para uma solução rápida. Entretanto, este é um formulário muito pequeno, então você pode precisar expandi-lo, mas o estilo geral é muito limpo e deve misturar-se bem em qualquer layout.

Shopping Prototype

Protótipos limpos que realçam a estética, deixando apenas a experiência do usuário em foco. Isso é exatamente o que você ganha com este protótipo de compras que oferece muita inspiração para ser implementado em seu e-commerce ou site.

Campos de quantidade usam as entradas de “número” e atualizam automaticamente os subtotais em cada linha. Esse efeito é bem simples de construir com Javascript e ainda mais fácil de ser inserido em seu próprio site.

Tente também clicar no botão “Checkout” e vasculhe todas as outras páginas. O criador deste Checkout, James Mejia, adicionou páginas para inscrições de convidados, envio, pagamento e alguns outros formulários no processo de Checkout.

Credit Card Café

Esta forma divertida e simples de Checkout usa um tema de café com um formulário de pagamento no estilo de de recibo de papel fino. Alguns e-commerces podem precisar de mais espaço, mas isso é perfeito para qualquer restaurante menor ou fabricante de café on-line.

O campo dinâmico de cartão de crédito Visa é o recurso mais interessante de todo este Checkout. É totalmente dinâmico, com rótulos que diminuem automaticamente quando você começa a inserir conteúdo. Os campos suspensos do mês/data são personalizados, além de dar um sentido de vida ao processo de Checkout .

Purchase Payment

Aqui está outro projeto bacana de interface do usuário, criado pela desenvolvedora Maycon Luiz.

Ele usa um design baseado em cartão com os produtos listados no lado esquerdo e os detalhes de check-out à direita.

O recurso que mais gosto é a atualização automática do cartão. Quando você digita números nos campos de pagamento, eles aparecem automaticamente no gráfico do cartão de crédito na parte superior. Isso dá ao usuário algum destaque para que eles inseriram números corretamente.

Vans Checkout

Uma outra interface do usuário sensacional com uma abordagem diferente é o Checkout da Vans, codificado por Tommaso Poletti. Ele tem alguns efeitos de página dinâmica que ocultam todos os itens do carrinho de compras por trás do formulário.

Se você clicar no ícone da sacola de compras, perceberá que todos esses itens voam para o lado. É uma ideia legal, mas provavelmente funcionaria melhor se fosse visível constantemente. Eu realmente gosto do design de campo mantendo o logotipo da marca perto do topo para manter a autoridade.

Progress Checkout

Breadcrumbs e barras de progresso são super comuns em formulários de Checkout. Eles informam ao usuário quanto tempo eles demoram e quanto tempo levará para concluir a compra.

Esse formulário de Checkout coloca a frente e o centro da barra de progresso diretamente aos olhos dos usuários que estão comprando. Ele usa um texto de rótulo claro para mostrar exatamente onde estão e quanto mais precisam ir. Todos os outros campos de formulário usam esse mesmo estilo de design claro para que a tipografia seja incrível.

Eu definitivamente acho que este formulário de check-out pode se encaixar em qualquer site com facilidade.

CC Details

O desenvolvedor Momcilo Popov criou este campo de Checkout CC intacto com uma grande dose de minimalismo. O campo de cartão de crédito personalizado usa caracteres de ponto para segurança e separa seu número CC em pacotes de 4 por padrão.

A foto do cão do exemplo pode funcionar de forma confiável para um aplicativo de compras de animais de estimação, mas você poderia facilmente substituir esta foto com qualquer outra de acordo com seu negócio ou nicho. Este Formulário de Checkout é incrivelmente robusto e deve ser fácil o suficiente para ser adaptado se você quiser replicá-lo em outro lugar.

Embedded Checkout

Enquanto procurava por formulários de Checkout, tropecei neste Checkout que realmente chamou minha atenção. É um bom exemplo de como você pode criar formulários de Checkout personalizados com ótima aparência, sem se preocupar com segurança ou pagamento.

Isso depende de uma plataforma de terceiros, mas também é possível incorporar o formulário e oferecer uma recepção de fatura personalizada para os compradores. Isso certamente oferece alguma inspiração para a interface do usuário, mas também é uma escolha fantástica para desenvolvedores que querem economizar algum tempo em seus projetos.

Credit Card Animation

Por último, mas não menos importante, este incrível formulário Checkout CC animado, usando um cartão de crédito totalmente visível que ilustra um cartão de crédito real. Conforme você preenche o formulário, cada campo é atualizado no cartão em tempo real.

O melhor de tudo é que usa uma animação personalizada para girar entre frente e verso do cartão de crédito. Então, quando você se concentra no campo CCV, o cartão gira automaticamente para mostrar a área posterior. Efeito bacana e definitivamente exclusivo.

Portanto, esta coleção abrange os 10 formulários de Checkout mais legais que pude encontrar, mas tenho certeza de que existem dezenas de outros por aí. Se você construiu um você mesmo ou se você souber de algum outro, sinta-se à vontade para compartilhar na área de discussão abaixo.


Post traduzido pelo MX Cursos e originalmente disponível aqui.

Felipe Cardozo

Felipe Cardozo

Felipe Cardozo é fundador e professor do MX Cursos. Também é publicitário e criador do MX Masters e Video Aulas Brasil, ama tecnologia e como filho de pais professores, não poderia deixar de ser: Compartilha imediatamente tudo que aprende!

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!