8 Boas Práticas de Layout de Formulários para um Design Amigável

Procura os melhores layouts de formulário para melhorar os seus formulários de contacto? Desenhar layouts de formulário para maximizar conversões pode ser complicado se não tiver muita experiência em que se apoiar.

Para esta publicação, compilei 7 práticas recomendadas de design de formulários para levar o seu layout de formulário para o próximo nível e aumentar as conversões.

Crie o Seu Formulário WordPress Agora

Desenhar Layouts de Formulários para Melhores Conversões

Descobri que a melhor forma de desenhar um formulário web é pensar na experiência do utilizador. Os seus visitantes não terão vontade de preencher um formulário longo e complicado, especialmente se parecer intimidante.

Usar colunas é apenas uma técnica que pode usar para tornar os seus designs de formulário mais apelativos. Outra é usar formulários de várias páginas com barras de progresso. Em última análise, o seu formulário deve ser limpo, conciso e fácil de seguir para os utilizadores.

1. Use um Layout de 2 Colunas para Condensar Formulários

Acredita-se amplamente que os formulários de coluna única oferecem melhores taxas de conversão do que os formulários de várias colunas.  Mas a verdade é que não existe uma abordagem única para layouts de formulário.

Na verdade, os testes A/B de conversão de formulários da HubSpot mostram que os formulários de 2 colunas convertem melhor do que os formulários de coluna única em situações específicas.

Por exemplo, geralmente não é bom para a experiência do utilizador (UX) ter uma longa lista de campos empilhados numa única coluna.

O exemplo de formulário online de coluna única abaixo tem uma rolagem vertical considerável com ainda mais campos abaixo do que é mostrado aqui, pelo que podemos esperar que os utilizadores encontrem algum inconveniente ao preencher este.

Mas o formulário torna-se muito mais compacto se organizarmos o mesmo número de campos de forma organizada em 2 colunas em vez disso.

O bom é que pode criar facilmente layouts de várias colunas usando o campo WPForms Layout.

Depois de adicionar o campo Layout ao seu formulário, pode selecionar quantas colunas deseja usar e arrastar e soltar outros campos no seu layout escolhido.

Se usar numerosos campos de formulário, pode sempre experimentar diferentes layouts para encontrar um que possa reduzir o comprimento do formulário e melhorar as conversões.

Leia Também: Formulários de Coluna Única: Exemplos e Inspiração

2. Combine Layouts de Formulário com Requisitos de Entrada

Ao desenhar formulários com layouts avançados, a largura das suas colunas é tão importante quanto o número de colunas que está a usar.

Por exemplo, se espera que os utilizadores insiram texto detalhado no seu campo de caixa de texto à direita, faz mais sentido tornar a coluna para esse campo mais larga.

Outra forma de usar este layout seria ter informações de contacto numa lateral e um campo de entrada de número de cartão de crédito na lateral mais larga.

Em outros cenários onde ambas as colunas do seu formulário têm campos semelhantes, pode usar colunas de tamanho igual. Isto funciona bem com campos de entrada menores, como números de telefone, caixas de seleção, listas suspensas e botões de rádio.

A WPForms tem layouts muito flexíveis e inclui 8 predefinições de layout diferentes para escolher. Pode alternar de um layout para outro com um único clique.

Cada layout de formulário oferece benefícios para diferentes situações. É apenas uma questão de usar o seu melhor julgamento de marketing para escolher o layout mais apropriado para os seus campos.

3. Divida Formulários Longos com Layouts de Várias Páginas

Quando tem um formulário curto, todos os campos devem caber naturalmente numa única página sem problemas. Mas as coisas complicam-se quando tem muitos campos.

Não é uma boa ideia colocar todos os campos numa única página se o seu formulário for muito longo e tiver um tempo de conclusão maior. Em vez disso, pode tornar formulários mais longos mais fáceis de gerir e melhorar a usabilidade dividindo-os em várias páginas.

A WPForms permite-lhe criar formulários de várias páginas. Cada página contém tipicamente apenas uma pergunta ou duas. Isto mantém os formulários compactos e cria uma boa experiência de utilizador enquanto ainda recolhe a informação necessária.

A minha parte favorita? Criar um formulário de várias páginas é tão fácil como arrastar e largar um Divisor de Página onde quer que queira dividi-lo.

Estes formulários também incluem uma barra de progresso que ajuda os utilizadores a verem quanto do formulário completaram e o que lhes resta para terminar.

Pode até combinar layouts de duas colunas num formulário de várias etapas. Se uma das suas páginas de formulário for mais longa do que as outras, pode usar um layout de duas colunas para essa secção para fazer o seu formulário parecer mais uniforme de página para página.

Se quiser aumentar as taxas de conversão com os seus formulários, recomendo experimentar o complemento WPForms Lead Forms. Também lhe permite criar um formulário de várias páginas, mas com o único propósito de geração de leads.

O complemento Lead Forms dá-lhe a capacidade de personalizar e estilizar um pouco mais o seu formulário. O WPForms tem muitas funcionalidades diferentes para o ajudar a minimizar o abandono de formulários e a melhorar a sua taxa de conclusão de formulários.

No final, cabe-lhe inteiramente a si decidir se quer usar layouts diferentes para obter mais conversões ou simplesmente adicionar uma barra de progresso no topo.

4. Use Layouts Adaptados a Dispositivos Móveis

Layouts de formulário sofisticados ficam ótimos e até convertem bem em desktops. Mas o mobile é um animal diferente.

Um formulário de várias colunas a funcionar perfeitamente em desktop pode falhar ou renderizar incorretamente quando visto em mobile se não tiver cuidado.

Alguns construtores de formulários não são responsivos para mobile, a menos que se esforce extra para ajustar códigos CSS. Claro, isso exige que tenha conhecimento de CSS.

Felizmente, a WPForms tem funcionalidade de topo. Mesmo os formulários de várias colunas mais avançados criados com a WPForms são responsivos para mobile por design. Não é necessário CSS.

Isto significa que os formulários mobile colapsarão numa única coluna automaticamente se um dispositivo não conseguir carregar o seu layout de várias colunas corretamente.

Como resultado, pode ter a certeza de que os seus visitantes terão sempre a melhor experiência, mesmo em dispositivos móveis. Se quiser controlar esse comportamento, veja como exibir campos numa única coluna em dispositivos móveis.

5. Use Formulários Conversacionais

Os formulários conversacionais permitem que os utilizadores respondam a uma pergunta de cada vez. Este layout de formulário pode ser muito útil quando pretende que os utilizadores se concentrem em cada pergunta específica com o mínimo de distrações.

Geralmente, é uma boa ideia usar o layout conversacional para inquéritos ou formulários de feedback. O complemento Conversational Forms, disponível com o WPForms Pro, transforma qualquer formulário neste formato de uma pergunta de cada vez.

Se usar lógica condicional com os seus formulários conversacionais, pode direcionar os respondentes diretamente para a página de que necessitam. Isto significa que não perdem tempo a analisar perguntas irrelevantes do formulário. Em vez disso, o formulário quase imita uma espécie de chat responsivo.

6. Personalize os Estilos do Seu Formulário

Dê um toque especial ao estilo do seu formulário! Criar um formulário moderno e profissional não significa que tenha de ser aborrecido. O WPForms permite-lhe estilizar os seus formulários para corresponder às cores ou ao tema do seu site, o que significa que é mais fácil do que nunca integrar o seu formulário no seu site.

Depois de ter criado e incorporado o seu formulário num rascunho de publicação ou página no seu site WordPress, pode facilmente editar estilos para rótulos de campos, botão de envio e muito mais. Não precisa de saber nada sobre código CSS para usar esta funcionalidade e criar formulários bonitos.

Nada disto requer uma única linha de CSS. Se quiser ver todas as opções, veja como escolher as suas definições de estilo de formulário. Pequenos toques como espaçamento consistente, cor do botão e estilo do rótulo contribuem muito para que um formulário pareça confiável.

7. Use Mensagens de Erro e Validação Inline

Independentemente de quão bem desenhado o seu formulário esteja, deve esperar que os utilizadores cometam erros de introdução ocasionalmente. Por exemplo, podem deixar campos obrigatórios em branco ou introduzir informações no formato errado.

Como resultado, é inteligente mostrar mensagens de validação em linha que destaquem claramente o problema e ofereçam orientação para o corrigir facilmente.

O WPForms usa automaticamente mensagens de erro em linha que aparecem logo abaixo de um campo em questão. Isto permite aos visitantes corrigir erros em tempo real e reduz proativamente a confusão do utilizador.

Existem muitos tipos diferentes de mensagens de validação de campos no WPForms que aparecem dependendo da natureza do erro de introdução. Assim, pode implementar os seus formulários livremente e deixar o WPForms tratar de quaisquer problemas de validação.

Outra forma de minimizar a confusão com os seus utilizadores para que não cometam erros é adicionar texto de placeholder aos seus campos. Isto mostrará aos visitantes como preencher o seu formulário com texto instrutivo ou um exemplo de como a introdução deve parecer.

8. Posicione os Seus Rótulos para uma Leitura Fácil

Onde coloca os rótulos dos seus campos tem um efeito real na rapidez com que as pessoas conseguem percorrer um formulário. Os rótulos colocados diretamente acima de cada campo são os mais fáceis de ler, porque o olhar viaja diretamente para baixo no formulário sem saltar de um lado para o outro.

Mantenha cada rótulo perto do campo que descreve para que não haja dúvidas a que pertence. E resista à tentação de usar texto de placeholder como o seu único rótulo, pois ele desaparece no momento em que alguém começa a digitar e deixa-os a adivinhar.

O WPForms coloca os rótulos acima dos seus campos por defeito, garantindo uma estrutura limpa e fácil de ler desde o início. Pode ajustar a posição e o estilo dos rótulos no construtor de formulários e no editor de blocos sempre que um layout específico exigir algo diferente.

Perguntas Frequentes sobre Design de Layout de Formulários

O design de layout de formulários surge com frequência quando as pessoas tentam tirar mais proveito dos seus formulários. Aqui ficam respostas rápidas às perguntas que mais ouço sobre a estruturação e o layout de formulários WordPress.

Como devem os formulários ser estruturados?

Recomendo estruturar os seus formulários com base no tipo de informação que recolhe em cada secção. Comece com informações pessoais e agrupe esses campos, depois passe para o próximo grupo lógico.

No WPForms, pode usar Divisores de Secção para adicionar cabeçalhos, de modo a que a estrutura do seu formulário permaneça clara e fácil de seguir. Agrupar campos relacionados sob cabeçalhos claros faz com que mesmo um formulário longo pareça organizado e fácil de percorrer.

Porque devo limitar o número de campos no meu formulário?

Limitar os campos ajuda a prevenir o abandono de formulários, que ocorre quando alguém começa a preencher o seu formulário mas desiste antes de o submeter. Acontece frequentemente porque os utilizadores se sentem sobrecarregados com o comprimento de um formulário. Reduzir campos e outras melhores práticas de design de formulários ajudam muito a manter as pessoas envolvidas até ao botão de submissão.

Devo usar um layout de formulário de coluna única ou de múltiplas colunas?

Para a maioria dos formulários, uma coluna única é a escolha mais segura porque é fácil de ler e raramente falha em dispositivos móveis. Opte por múltiplas colunas quando quiser emparelhar campos curtos relacionados, como cidade e código postal, ou encurtar um formulário que pareça demasiado alto. Qualquer que seja a sua escolha, pré-visualize sempre o formulário num telemóvel antes de publicar.

Em seguida, Explore Mais Opções de Layout de Formulários

Se estiver a decidir como agrupar campos repetidos, a nossa comparação entre o campo repetidor e o campo de layout detalha quando usar cada um.

Inquéritos que mostram uma pergunta de cada vez são ótimos para a experiência do utilizador e fáceis de construir com o WPForms. Eis como criar inquéritos que mostram uma pergunta de cada vez.

E para garantir que as pessoas inserem os seus detalhes corretamente, dê uma vista de olhos ao nosso guia sobre adicionar um campo de confirmação de endereço de e-mail.

Crie um Layout de Formulário Melhor Hoje

Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.