Formulários de website são um componente essencial em qualquer website, página de destino ou loja de comércio eletrônico. Seja o objetivo do formulário contatar o proprietário do website, preencher um questionário, acessar uma conta, adquirir um item, registrar-se para uma nova conta, fazer uma reserva ou inscrever-se para um teste gratuito — cada detalhe minucioso do design e layout do formulário web é crucial.

Você pode ter se feito estas perguntas no passado: Qual layout de design funcionará melhor para meu formulário? O que mais engajará os usuários? Como posso implementar meus motivos de design e identidade de marca? Devo colocar o formulário dentro de um popup do website, ou um formulário no rodapé funcionaria melhor?

Entre a longa lista de tipos de formulários de website e seus casos de uso, identificar o que considerar em seu design de formulário pode ser intimidante, para dizer o mínimo. Fique tranquilo, criar um formulário de website de alto desempenho em breve será uma experiência de criação web livre de estresse, desafiadora, mas gratificante.

Para potencializar nossa estratégia e fluxos de trabalho de web design, compilamos uma lista de 15 exemplos que lhe mostrarão do que são feitos os melhores formulários.

Domine o Design de Formulários de Website Com Nosso Guia para Formulários Web

Índice

15 Exemplos Inesquecíveis de Design de Formulário

Estamos prestes a embarcar em uma jornada repleta de formulários de website de todas as formas, cores, layouts e tamanhos. Prepare-se para ficar maravilhado com esta lista de 15 formulários de website cujo design e estrutura revolucionarão suas habilidades de criação web.

Formulários de Contato

Quando você está determinado a ver cada usuário clicar em “Enviar” antes de sair do seu site, seu formulário de contato pode ser decisivo para este objetivo. Decisões básicas como se e quando adicionar animações ou indicadores de progresso, quão grandes ou enfáticos seus cabeçalhos devem ser, quão largos fazer seus campos de formulário — todos esses fatores contribuem para a taxa de preenchimento de cada formulário e impactam a experiência do usuário em seu website.

#1 Brandingo

Interactive Website Form Example

Brandingo é uma agência e escola de design armênia que escolhemos em janeiro de 2021 para nossa exibição dos 10 melhores sites Elementor do mês. O website da Brandingo foi construído para “exibir o talento e conhecimento da agência em design, ilustração, UI/UX e branding para potenciais clientes e estudantes.”

O que sempre se destacou para nós no site da Brandingo é sua utilização de numerosos efeitos de movimento e interativos que se harmonizam perfeitamente. Eles claramente dominaram a arte de encontrar um equilíbrio entre recursos interativos envolventes que não sobrecarregam excessivamente a percepção visual humana.

Nossos Elementos Favoritos:

  • Os múltiplos usos de animações Lottie que surgem conforme se realiza a rolagem da página.
  • O caminho de texto que circunda o plano de fundo circular do formulário ao atingir o final.

#2 O Cubo Espacial

Contact Form Example Elementor

O Cubo Espacial é um produto de organização para desktop criado por Carol Havener, de Sydney, Austrália. Concebido tanto para residências quanto para escritórios, o produto aborda a problemática da organização de espaços limitados (como uma mesa de escritório, um estúdio, uma sala de estar familiar, etc.)

Carol desenvolveu o site de seu produto utilizando Elementor, empregando o construtor WooCommerce para atender às necessidades de seu site de comércio eletrônico. Considerando seu amplo público-alvo, o site do produto utiliza sabiamente um esquema de cores preto e branco. Os motivos levam em conta o design moderno, esbelto e minimalista do produto, e a página de contato e seu formulário alcançam o mesmo objetivo.

Nossos Elementos Favoritos:

  • A elegante combinação de fontes associa um estilo caligráfico manuscrito com a fonte sem serifa “Bodoni”.

A sofisticada imagem de fundo posicionada atrás do plano de fundo branco, sólido e quadrado do formulário. Isto realmente traz à vida o caso de uso do produto, lembrando sutilmente o usuário da sensação agradável de sentar-se em uma mesa limpa, organizada e que proporciona tranquilidade.

#3 Metropolis Moving

Elementor Progress Indicator Form Example

Metropolis Moving é uma empresa de mudanças da cidade de Nova York sediada no Brooklyn, NY. O esquema de cores e o design de seu site utilizam cores temáticas de Nova York, como o amarelo dos táxis, azul marinho e cinza, para visualizar a essência de seu serviço personalizado para mudanças na agitada “Big Apple”. O formulário de Contato do site é um breve formulário de múltiplas etapas para o potencial cliente preencher e receber uma cotação de preço.

Nossos Elementos Favoritos:

  • A rota demarcada no mapa e os pontos de localização capturam a experiência imprevisível (trajetória) entre a mudança de um endereço para outro.
  • Os campos do formulário são projetados com todas as regras básicas de formulários web:

Formulários de Questionário

Fazer perguntas ao seu público sobre seus interesses, preferências, objetivos, etc. é uma excelente maneira de estabelecer um diálogo. Mas quais são as melhores formas de apresentar suas perguntas? Deve-se criar uma atmosfera informal? Qual formato funcionará melhor para o seu público? Todas essas considerações são de igual importância, no entanto, as opções de como abordar cada uma são incrivelmente variadas.

#4 Spotify Pets

Spotify Questionnaire Form

Spotify Pets é um recurso de playlist dentro do serviço de música digital, podcast e vídeo Spotify. Esta adição singularmente peculiar ao Spotify utiliza o algoritmo da plataforma para criar playlists para o animal de estimação e seu dono ouvirem — baseadas nos hábitos de escuta do usuário e nas características do animal.

Nossos Elementos Favoritos:

  • A animação da barra de arrastar ajustável que o usuário ajusta para descrever as características de seu animal de estimação — é um método de entrada envolvente que também elimina a atividade de digitação.
  • O indicador de progresso se funde ao plano de fundo ilustrado e animado.
  • O formulário de questionário multi-tela possui uma pergunta por tela, sendo cada uma altamente compatível com dispositivos móveis.

#5 RedBull

Red Bull Questionnaire Form

Red Bull é uma bebida energética internacionalmente disponível cujo slogan é “Red Bull te dá asas”. Em sua página de produto no site, a Red Bull envolve o visitante em uma narrativa de marca, com um quiz interativo sobre sustentabilidade e segurança ambiental — dois dos valores fundamentais da marca.

Nossos Elementos Favoritos:

  • O contador regressivo para cada pergunta cria suspense e urgência para responder.
  • Os grandes botões de seleção tornam as opções de resposta super acessíveis e fáceis de clicar.
  • O vídeo de fundo animado do quiz na página inicial.

Formulários de Login

Os formulários de login são um componente extraordinariamente significativo na interface de seu produto ou serviço. Os usuários provavelmente visualizarão este formulário repetidamente, sendo a familiaridade e a simplicidade fatores cruciais. Seu formulário deve ser convidativo, intuitivo e direto — contudo, deve entusiasmar o usuário tanto quanto possível. Frequentemente, os detalhes e ilustrações mais sutis podem ter um impacto considerável.

#6 gidimo

Login Form Example Elementor

A gidimo é uma empresa nigeriana de tecnologia educacional cuja plataforma de aprendizagem online atende a estudantes de todas as origens e estágios da vida. A tecnologia da plataforma utiliza técnicas de gamificação e jornadas de usuário personalizadas que “tornam divertido e fácil aprender qualquer coisa em movimento”.

A página de login do site da gidimo, construído com Elementor (vencedor de nossa exposição de março de 2021), ostenta um layout limpo com uma galeria deslizante ao lado do formulário de login. Isso confere à página uma camada adicional de engajamento e atratividade: os usuários podem navegar por ilustrações alternadas que reforçam as vibrações positivas da plataforma.

Nossos Aspectos Favoritos:

  • A cor de fundo do slider alterna entre verde e branco conforme o usuário navega.
  • Cada linha do formulário possui a mesma largura, permitindo um layout uniforme e organizado que propicia clareza e consistência.

#7 Snappet

Log In Form Illustration Example

A Snappet é uma plataforma educacional online para dispositivos tablet utilizada por professores de matemática que buscam personalizar os percursos de aprendizagem individuais dos alunos e, simultaneamente, monitorar seu desempenho. A ferramenta de aprendizagem é destinada a estudantes do Ensino Fundamental, o que é facilmente compreensível pelo esquema de cores amigável e colorido do site, bem como pelas ilustrações vetoriais.

Nossos Aspectos Favoritos

  • O caso de uso ilustrado na página de login do Estudante transmite uma mensagem emocional: lembrando os estudantes do encorajador (embora virtual) “toca aqui” e da positividade que sentirão ao utilizar a plataforma.
  • O esquema tipográfico de fonte única utiliza variações de uma única fonte (diferentes cores e tamanhos). Evitando a monotonia, o uso de duas cores e tamanhos diferentes indica a hierarquia de informações entre os elementos textuais.

Formulários em Páginas de Destino de Produtos

As páginas de destino de produtos são profundamente cruciais no design de formulários de websites, pois grande parte dos comportamentos de compra dos visitantes é resultado direto do design da página do produto. Considerando todas as informações que os consumidores desejam saber sobre cada produto individual, a decisão sobre o que incluir e como fazê-lo em cada página de produto deve ser tratada com extremo cuidado.

#8 Bram

Product Landing Page Example Elementor

Vencedor de nossa exposição de sites WooCommerce, a Bram é uma fabricante de carteiras de couro artesanais sediada em Barcelona. O layout de design da página do produto foi particularmente inspirador para nós (essencialmente um formulário de submissão).

Nossos Aspectos Favoritos:

  • A grande variedade de opções de cores é exibida em uma única linha para visualização simultânea, sem necessidade de clicar em um menu suspenso para ver cada opção de cor.
  • O botão “Adicionar ao Carrinho” é fácil de localizar, posicionado no topo do conteúdo em vez de ser o último componente da página (após os detalhes do produto e as abas retráteis).
  • O abundante espaço em branco na página torna os detalhes do produto claros e legíveis, e o detalhe em couro do produto é facilmente visível.

#9 ABATTOIR VÉGÉTAL

Product Landing Page Form Elementor

O ABATTOIR VÉGÉTAL é um bistrô vegano e mercearia localizado em Paris, França. O site de comércio eletrônico (construído com Elementor e WooCommerce, e vencedor da exposição de agosto de 2020) apresenta tanto o menu para viagem do bistrô quanto os menus da mercearia, onde o usuário pode escolher ingredientes e pratos para pedidos online.

Nossos Aspectos Favoritos:

  • O uso de campos personalizados do WordPress; A página do produto e seu formulário de pedido contêm todas as informações básicas da refeição em um formato eficiente e envolvente.
  • Os formatos envolventes utilizados no carrinho WooCommerce da página: o indicador de itens, bem como o botão “Adicionar ao Carrinho”, recebem uma cor de fundo vibrante, adicionando diversão e estilo ao fluxo de checkout do usuário e à experiência geral de compra online.
  • As fontes de cores vibrantes e as fotografias detalhadas comunicam as informações verbais e visuais de forma clara — uma maneira empolgante de iniciar uma experiência de compra culinária.

Formulários de Inscrição

Um processo de inscrição bem-sucedido atende aos anseios de qualquer criador web ao construir um formulário de website. Portanto, é realmente possível transformar esse sonho em realidade? Qualquer coisa é possível, mas os passos que se tomam para satisfazer os visitantes podem ter implicações poderosas. Cada detalhe, desde a visibilidade dos botões até o contraste entre os elementos, indicará os resultados da submissão do formulário.

#10 Duolingo

Duolingo Sign Up Form

O Duolingo é um website e aplicativo móvel de aprendizagem de idiomas. Como marca, a missão da empresa é “tornar a educação gratuita, divertida e acessível a todos”. A tela mostrada acima aparece dentro do processo de integração da plataforma, onde o usuário define seu objetivo de aprendizagem de idiomas e escolhe um caminho de aprendizagem.

Nossos Elementos Favoritos:

  • Os avatares e ilustrações de design plano utilizados em todo o site, empregados como botões de miniaturas de imagens dentro do formulário.
  • O layout de grade justificada racionaliza as sete ilustrações — unificando seus variados tamanhos, cores e formas.

#11 Stripe

Stripe Sign Up Form Example

O Stripe é um software de processamento de pagamentos utilizado por websites de comércio eletrônico e aplicações móveis. A utilização do Stripe permite que as empresas aceitem pagamentos, enviem desembolsos e gerenciem seus negócios online. O registro de conta é direto e fácil, facilitado por um formulário de inscrição simples, porém envolvente.

Nossos Elementos Favoritos:

  • A sombra projetada ao redor do fundo do formulário de envio distingue entre o formulário de inscrição e os tópicos à esquerda da página.
  • Os tópicos organizados e concisos declarando três benefícios-chave do produto, reforçando o valor agregado da criação de uma conta Stripe.

Formulários de Reserva

Formulários de reserva online bem-sucedidos prosperam em atmosferas positivas e encorajadoras. Quando seus visitantes chegam ao ponto de investigar como reservar seu serviço, você deve fazer tudo o que puder para mantê-los atentos, interessados e satisfeitos com o que em breve experimentarão.

#12 Be A Roshan

Booking Form Example

Be A Roshan é um centro de terapia energética e meditação na ilha Maurício. O site do Be A Roshan, construído com Elementor, oferece agendamento de consultas e eventos online para clientes. Os motivos de design (como o fundo da página inicial de um dia ensolarado) escolhidos para o site refletem a atmosfera das experiências tranquilizantes de Reiki e meditação.

Nossos Elementos Favoritos:

  • A interface visual do calendário mostrando os tratamentos de Reiki disponíveis durante todo o mês.
  • Os elementos de texto informativos acima do calendário informam o usuário sobre detalhes importantes que influenciarão sua decisão sobre como preencher o formulário.
  • O formulário de inscrição em eventos é projetado para coletar os dados rapidamente e criar uma experiência fluida para os inscritos, sem confundi-los ou distraí-los

#13 Presidio

Booking Form Example Elementor

Presidio Speech and Learning é uma clínica de terapia infantil de São Francisco que atende crianças que necessitam de support em fala, linguagem, leitura e escrita. O site do Presidio, construído com Elementor, foi apresentado em nossa mostra de novembro de 2020, elogiado por seus motivos de design em aquarela pastel, amigáveis para crianças. Esses detalhes acomodam o público-alvo do centro: pais que buscam consultar e receber orientações atentas e sensíveis sobre as necessidades individuais de seus filhos.

Nossos Elementos Favoritos:

  • A paleta de cores azul e verde utilizada no formulário de reserva estende as vibrações estimulantes do website ao longo do fluxo de usuário de agendamento de consultas.
  • A cor de fundo dos campos do formulário permite um layout atraente e convidativo para um processo de submissão agradável.

Formulários de Teste Gratuito

Testes gratuitos são sempre apreciados por potenciais clientes. Acima de tudo, enfatizar as vantagens e o valor agregado ao experimentar seu serviço ou produto ajuda os visitantes a tomar sua decisão final. Quanto mais incentivo você lhes der para avançar, mais provável será que o façam.

#14 Hone

Free Trial Form Elementor

Outro vencedor da mostra de novembro de 2020, o Hone é uma plataforma de aprendizagem online que oferece aulas ao vivo sobre temas como liderança de equipe, gestão e habilidades de comunicação interpessoal. A plataforma facilita uma abordagem capacitadora e proativa em relação à liderança de equipe e comunicação interna. Esses ideais são transmitidos com sucesso através do esquema de cores vibrante em rosa e roxo do website, e pelo tom e voz do conteúdo escrito do site.

Nossos Elementos Favoritos:

  • O efeito sublinhado rosa cria uma indicação visual para enfatizar as palavras-chave do formulário — ressaltando ao potencial usuário que o período de teste de 30 dias da Hone é completamente gratuito.
  • Os marcadores posicionados ao lado do formulário identificam o valor agregado do produto e seus principais benefícios.
  • Os ícones utilizados para cada marcador assemelham-se à experiência do usuário e à interface do produto.

Formulários de Assinatura

Uma vez que você tenha convencido seu usuário de que seu conteúdo vale a pena ser assinado, ele conta com você para entregar conteúdo que ele desejará continuar lendo. Ser transparente sobre o que você planeja enviar a ele pode sempre ser benéfico, de modo que ele saiba o que esperar e aguarde ansiosamente por isso.

#15 Codepuffin

Elementor Subscription Form Example

Codepuffin é o website comercial e portfólio de Amy Nortje, uma desenvolvedora web baseada na Nova Zelândia. Amy construiu seu website com o Elementor, onde ela lista seus serviços e apresenta seu portfólio e blog pessoal. As entradas do blog de Amy focam em suas “lições aprendidas” de diferentes projetos e relações com clientes, e servem como um recurso pessoal e informal de insights e support para seus leitores.

Nossos Elementos Favoritos:

  • O conteúdo e a linguagem do formulário de assinatura estão alinhados com a mensagem do próprio blog: anedotas humorísticas que se entrelaçam com valiosos insights profissionais.
  • O cabeçalho do formulário, “Deseja algo interessante?”, vai direto ao ponto. Esta pergunta enquadra o benefício do usuário em assinar a newsletter em um tom conversacional, criando uma conexão com o visitante que desperta interesse nos insights e experiências variadas de Amy.

Compor uma Obra-Prima

Não há dúvida: nada é mais gratificante do que um painel que exibe resultados bem-sucedidos de submissão de formulários. Agora que aprendemos com os melhores, é seguro dizer que o melhor ainda está por vir. Você está destinado a criar muitos formulários de website ao longo de sua carreira de criação web, e agora que você viu 15 obras de arte em formulários de website, é hora de começar a imaginar, projetar e construir o formulário web dos seus sonhos.

Originally posted 2021-05-03 04:00:00.