9 modelos de checkouts em HTML e CSS grátis

COMPARTILHE ESTE POST

4.8/5 - (17 votos)

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.

1. Donut Payment

Este Checkout realmente leva o design a um nível totalmente novo. Essa interface de Donut Payment 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.

Download e mais informações

2. 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.

Download e mais informações

3. 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.

Download e mais informações

4. 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.

Download e mais informações

5. Vans Checkout

Uma outra interface do usuário sensacional com uma abordagem diferente é o Vans Checkout, 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.

Download e mais informações

6. 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.

Download e mais informações

7. 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.

Download e mais informações

8. 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.

Download e mais informações

9. Credit Card Animation

Por último, mas não menos importante, este incrível Credit Card Animation, 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.

Download e mais informações

APRENDA TRÁFEGO PAGO

Aprimore suas habilidades em anúncios digitais com o meu curso completo de MetaAds e Google Ads! Domine as estratégias essenciais, desde o básico até o avançado, e transforme seu conhecimento em resultados reais. Inscreva-se agora e comece a criar campanhas eficazes que geram impacto e impulsionam seu sucesso online. Não perca essa oportunidade de se tornar um especialista em publicidade digital!

Picture of Felipe Cardozo

Felipe Cardozo

Fundador do MX e desenvolveu diversos cursos para o portal. Além disso, 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 e compartilhar imediatamente tudo que aprende!