Nós criamos esta lista de 15 exemplos de formulários web que demonstram a criação web no seu melhor. Estas obras de arte inspiradoras vão estimular sua criatividade para aplicar recursos amigáveis ao usuário e melhores práticas a todos os formulários de site.
Formulários de site são um componente essencial em qualquer site, landing page ou loja de e-commerce. Não importa se o objetivo do formulário é entrar em contato com o proprietário do site, preencher um questionário, fazer login em uma conta, comprar um item, inscrever-se para uma nova conta, fazer uma reserva ou inscrever-se para um teste gratuito – cada detalhe granular do design e layout do formulário da web é crucial.
Você pode ter se perguntado essas questões no passado: Qual layout de design funcionará melhor para meu formulário? O que envolverá mais os usuários? Como posso implementar meus motivos de design e identidade de marca ? Devo colocar o formulário dentro de um pop-up de site ou um formulário de rodapé funcionaria melhor?
Entre a longa lista de tipos de formulários de site e seus casos de uso, identificar o que considerar quando no design do seu formulário pode ser intimidador, para dizer o mínimo. Fique tranquilo, criar um formulário de site de alto desempenho logo será uma experiência de criação web sem estresse, desafiadora, mas gratificante.
Para fortalecer nossa estratégia e fluxos de trabalho de web design, compilamos uma lista de 15 exemplos que mostrarão do que são feitos os melhores formulários.
15 Exemplos Inesquecíveis de Design de Formulários
Estamos prestes a embarcar em uma jornada lotada por formulários de site de todos os formatos, cores, layouts e tamanhos. Prepare-se para se surpreender com esta lista de 15 formulários de site 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 fazer ou quebrar essa meta. Decisões básicas como se e quando adicionar animações ou indicadores de progresso, quão grandes ou negritos seus títulos devem ser, quão largos devem ser seus campos de formulário – todos esses fatores contribuem para a taxa de conclusão de cada formulário e impactam a experiência do usuário do seu site.
#1 Brandingo
Brandingo é uma agência e escola de design armênia que escolhemos em janeiro de 2021 para nossa vitrine dos 10 melhores sites Elementor do mês. O site Brandingo foi criado para “mostrar o talento e o conhecimento da agência em design, ilustração, UI/UX e branding para clientes e alunos em potencial”.
O que sempre se destacou para nós no site da Brandingo é o uso de tantos efeitos de movimento e interativos que se encaixam como uma luva. Eles claramente dominaram a arte de encontrar um equilíbrio entre recursos interativos envolventes que não são demais para o olho humano lidar.
Nossas coisas favoritas:
- Os muitos usos das animações Lottie que aparecem conforme você rola a página.
- O caminho do texto que circunda o fundo circular do formulário quando você chega ao final.
#2 O Cubo Espacial
O Space Cube é um produto de organização de mesa criado por Carol Havener de Sydney, Austrália. Construído pensando tanto em proprietários de casas quanto em escritórios, o produto aborda o ponto problemático de organizar espaços limitados (como uma mesa de escritório, um escritório, uma sala de estar familiar, etc.)
Carol construiu seu site de produto com Elementor, usando o construtor WooCommerce para atender às necessidades de seu site de e-commerce. Dado seu amplo público-alvo, o site do produto usa um esquema de cores branco e preto sabiamente. Os motivos são responsáveis pelo esquema de design moderno, fino e minimalista do produto, e a página de contato e seu formulário atingem o mesmo objetivo.
Nossas coisas favoritas:
- A elegante combinação de fontes combina caligrafia, estilo manuscrito com a fonte sem serifa “Bodoni”.
A imagem de fundo sofisticada colocada atrás do fundo branco sólido e quadrado do formulário. Isso realmente dá vida ao caso de uso do produto, lembrando sutilmente o usuário de como é bom sentar em uma mesa limpa, organizada e que acolhe a tranquilidade.
#3 Mudanças na Metrópole
A Metropolis Moving é uma empresa de mudanças da cidade de Nova York, sediada no Brooklyn, NY. O esquema de cores e o design do site usam cores temáticas de NYC, como amarelo táxi, marinho e cinza, para visualizar a essência do serviço personalizado para mudanças na movimentada “Big Apple”. O formulário de contato do site é um formulário breve e de várias etapas para o cliente em potencial preencher e receber um orçamento.
Nossas coisas favoritas:
- A rota demarcada no mapa e os pontos de localização capturam a experiência imprevisível (caminho) entre a movimentação de um endereço para outro.
- Os campos do formulário são projetados com todas as regras básicas dos formulários da web:
- Número mínimo de campos de formulário
- Campos de formulário alinhados à esquerda e marcadores de posição
- Layout de coluna única
- Indicador de passo claramente esculpido
Formulários de questionário
Fazer perguntas ao seu público sobre seus interesses, preferências, objetivos, etc. é uma ótima maneira de estabelecer um diálogo. Mas quais são as melhores maneiras de apresentar suas perguntas? Você deve criar uma atmosfera informal? Qual formato funcionará melhor para seu público? Todas essas considerações são de igual importância, mas as opções de como lidar com cada uma delas são incrivelmente variadas.
#4 Animais de estimação do Spotify
Spotify Pets é um recurso de playlist dentro do serviço de música digital, podcast e vídeo Spotify. Essa adição única e peculiar ao Spotify usa o algoritmo da plataforma para criar playlists para o animal de estimação e o dono do animal ouvirem – com base nos hábitos de audição do usuário e nos atributos do animal.
Nossas coisas favoritas:
- A animação da barra de arrasto ajustável que o usuário ajusta para descrever as características do 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 mistura ao fundo otimista e ilustrado.
- O formulário de questionário multitelas tem uma pergunta por tela, sendo cada uma delas supercompatível com dispositivos móveis.
#5 Red Bull
Red Bull é uma bebida energética disponível internacionalmente cujo slogan é “Red Bull dá asas a você”. Na página de produto do site, a Red Bull envolve o visitante na narrativa da marca, com um quiz interativo sobre sustentabilidade e segurança ambiental – dois dos valores fundamentais da marca.
Nossas coisas favoritas:
- O cronômetro de contagem regressiva para cada pergunta cria suspense e urgência para responder.
- Os grandes botões de seleção tornam as opções de resposta superacessíveis e fáceis de clicar.
- O vídeo de fundo animado do teste da página inicial .
Formulários de login
Formulários de login são um componente incrivelmente significativo na interface do seu produto ou serviço. Os usuários provavelmente verão esse formulário repetidamente, e familiaridade e simplicidade são essenciais. Seu formulário deve ser convidativo, intuitivo e direto – mas excitar o usuário o máximo possível. Muitas vezes, os menores detalhes e ilustrações podem fazer toda a diferença.
#6 gidimo
gidimo é uma empresa nigeriana de EdTech cuja plataforma de aprendizado online atende a alunos de todas as origens e estágios da vida. A tecnologia da plataforma usa técnicas de gamificação e jornadas de usuário personalizadas que “tornam divertido e fácil aprender qualquer coisa em qualquer lugar”.
A página de login do site Elementor da gidimo ostenta um layout limpo com uma galeria deslizante ao lado do formulário de login. Isso dá à página uma camada adicional de engajamento e apelo: os usuários podem navegar por ilustrações alternadas que reforçam as vibrações positivas da plataforma.
Nossas coisas favoritas:
- A cor de fundo do controle deslizante alterna entre verde e branco conforme o usuário navega.
- Cada linha do formulário tem a mesma largura, permitindo um layout uniforme e organizado que gera clareza e consistência.
#7 Boca-de-lobo
Snappet é uma plataforma educacional online para dispositivos tablet usada por professores de matemática que buscam personalizar os caminhos de aprendizagem de alunos individuais e, simultaneamente, monitorar seu desempenho. A ferramenta de aprendizagem é para o aprendizado de alunos em idade escolar do Ensino Fundamental, o que é fácil de entender pelo esquema de cores amigável e colorido e pelas ilustrações vetoriais do site.
Nossas coisas favoritas
- O caso de uso ilustrado na página de login do aluno transmite uma mensagem emocional : lembrando os alunos do encorajamento (embora virtual) e da positividade que eles sentirão ao usar a plataforma.
- O esquema tipográfico single-typeface usa variações de uma fonte (cores e tamanhos diferentes). Evitando a monotonia, usar duas cores e tamanhos diferentes indica a hierarquia de informações entre os elementos do texto.
Formulários de página de destino do produto
As landing pages de produtos são profundamente cruciais no design de formulários de sites, já que muitos dos comportamentos de compra de um visitante são um resultado direto do design da página do produto. Dadas todas as informações que os consumidores querem saber sobre cada produto individual, decidir o que e como incluir em cada página do produto deve ser feito com cuidado.
#8 Brama
Um vencedor do nosso showcase de sites WooCommerce , Bram é um fabricante de carteiras de couro artesanais com sede em Barcelona. O layout do design da página do produto foi uma inspiração particular (essencialmente um formulário de envio) para nós.
Nossas coisas favoritas:
- A grande variedade de opções de cores é mostrada em uma 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 encontrar, colocado no topo do conteúdo em vez de ser o último componente da página (após os detalhes do produto e as guias recolhíveis).
- O amplo espaço em branco na página torna os detalhes do produto claros e legíveis, e os detalhes em couro do produto são facilmente visíveis.
#9 ABATTOIR VÉGÉTAL
ABATTOIR VÉGÉTAL é um bistrô e mercearia vegano localizado em Paris, França. O site de e-commerce apresenta tanto o bistrô para viagem quanto os menus de mercearia, onde o usuário pode escolher ingredientes e pratos para pedir online.
Nossas coisas favoritas:
- O uso de campos personalizados do WordPress ; A página do produto e seu formulário de pedido reúnem todas as informações básicas da refeição em um formato eficiente e envolvente.
- Os formatos envolventes usados no carrinho WooCommerce da página : o indicador de itens, bem como o botão “Adicionar ao carrinho”, recebem uma cor de fundo brilhante, adicionando diversão e estilo ao fluxo do usuário no checkout e à experiência geral de compras online.
- As fontes coloridas e brilhantes e as fotografias detalhadas comunicam as informações verbais e visuais com clareza – uma maneira emocionante de começar uma experiência de compra culinária.
Formulários de inscrição
Um processo de inscrição bem-sucedido atende aos desejos de qualquer criador de sites que esteja construindo um formulário de site. Então, é realmente possível transformar esse sonho em realidade? Tudo é possível, mas os passos que você toma para satisfazer seus visitantes podem ter implicações poderosas. Cada detalhe, da visibilidade do botão ao contraste entre os elementos, indicará os resultados do envio do formulário.
#10 Duolingo
Duolingo é um site e aplicativo móvel de aprendizado 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 sua meta de aprendizado de idiomas e escolhe um caminho de aprendizado.
Nossas coisas favoritas:
- Os avatares de design plano e as ilustrações usadas em todo o site, são usados como botões de miniatura de imagem dentro do formulário.
- O layout de grade justificado simplifica as sete ilustrações – unindo seus diferentes tamanhos, cores e formas.
#11 Listra
Stripe é um software de processamento de pagamentos usado por sites de e-commerce e aplicativos móveis. Usar o Stripe permite que empresas aceitem pagamentos, enviem pagamentos e gerenciem seus negócios online. O registro da conta é direto e fácil, facilitado por um formulário de inscrição simples, mas envolvente.
Nossas coisas favoritas:
- A sombra projetada ao redor do fundo do formulário de envio distingue entre o formulário de inscrição e os marcadores no lado esquerdo da página.
- Os marcadores organizados e concisos declaram três principais benefícios do produto, reforçando o valor agregado da criação de uma conta Stripe.
Formulários de reserva
Formulários de reserva on-line bem-sucedidos prosperam em atmosferas positivas e encorajadoras. Quando seus visitantes chegam ao ponto de pesquisar como reservar seu serviço, você deve fazer tudo o que puder para mantê-los atentos, interessados e felizes com o que eles logo experimentarão.
#12 Seja um Roshan
Be A Roshan é um centro de terapia energética e meditação na ilha Maurício. O site Elementor do Be A Roshan oferece agendamento online e reserva de eventos para clientes. Os motivos de design (como o fundo da página inicial do dia ensolarado) escolhidos para o site refletem a atmosfera das experiências relaxantes de Reiki e meditação.
Nossas coisas favoritas:
- A interface do calendário visual mostra 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 impactarão sua decisão de como preencher o formulário.
- O formulário de inscrição no evento foi criado para coletar dados rapidamente e criar uma experiência tranquila para os inscritos, sem confundi-los ou distraí-los.
#13 Presídio
Presidio Speech and Learning é uma clínica de terapia infantil de São Francisco que atende crianças que precisam de suporte em fala, linguagem, leitura e escrita. O site Presidio construído pela Elementor foi elogiado por seus motivos de design em aquarela pastel e adequados para crianças. Esses detalhes acomodam o público-alvo do centro: pais que buscam consultar e receber informações atentas e sensíveis sobre as necessidades individuais de seus filhos.
Nossas coisas favoritas:
- A paleta de cores azul e verde usada no formulário de reserva estende as vibrações positivas do site por todo o fluxo do usuário no processo de agendamento de consultas.
- A cor de fundo dos campos do formulário permite um layout atraente e convidativo para um processo de envio agradável.
Formulários de teste grátis
Testes gratuitos são sempre apreciados por clientes e clientes em potencial. Acima de tudo, enfatizar as vantagens e o valor agregado em experimentar seu serviço ou produto ajuda os visitantes a tomarem sua decisão final. Quanto mais incentivo você der a eles para seguirem em frente, maior a probabilidade de que eles o façam.
#14 Afiar
Outro vencedor do showcase de novembro de 2020, Hone é uma plataforma de aprendizado online que fornece aulas ao vivo sobre assuntos como liderança de equipe, gestão e habilidades de comunicação interpessoal. A plataforma facilita uma abordagem proativa e fortalecedora em relação à liderança de equipe e à comunicação interna. Esses ideais são transmitidos com sucesso por meio do esquema de cores rosa e roxo otimista e energizante do site, e pela voz e tom do conteúdo escrito do site.
Nossas coisas favoritas:
- O efeito sublinhado rosa cria uma indicação visual para enfatizar as palavras poderosas do formulário, enfatizando ao possível usuário que o teste de 30 dias do Hone é totalmente gratuito.
- Os marcadores colocados ao lado do formulário identificam o valor agregado do produto e os principais benefícios.
- Os ícones usados para cada marcador lembram a experiência do usuário e a interface do produto.
Formulários de Assinatura
Depois que você convencer seu usuário de que seu conteúdo vale a pena assinar, ele conta com você para entregar conteúdo que ele vai querer continuar lendo. Ser transparente sobre o que você planeja enviar a ele sempre pode ajudar muito para que ele saiba o que esperar e fique ansioso para fazer isso.
#15 Código Puffin
Codepuffin é o site de negócios e portfólio de Amy Nortje, uma desenvolvedora web baseada na Nova Zelândia. Amy construiu seu site com 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 relacionamentos com clientes, e servem como um recurso pessoal e informal de percepção e suporte para seus leitores.
Nossas coisas favoritas:
- O conteúdo e a linguagem do formulário de inscrição estão alinhados com a mensagem do blog em si: anedotas engraçadas entrelaçadas com informações profissionais valiosas.
- O título do formulário, “Quer algo legal?” vai direto ao ponto. Esta pergunta enquadra o benefício do usuário em assinar a newsletter em um tom de conversa, criando um relacionamento com o visitante que desperta o interesse no insight e nas experiências variadas de Amy.
Forme uma obra-prima
Não há dúvidas sobre isso: nada é mais gratificante do que um painel que mostra resultados de envio de formulários bem-sucedidos. Agora que aprendemos com os melhores, é seguro dizer que o melhor ainda está por vir. Você está destinado a criar muitos formulários de site ao longo de sua carreira de criação web, e agora que você viu 15 obras de arte de formulários de site, é hora de começar a imaginar, projetar e construir o formulário web dos seus sonhos.
0 comentários