Pretende manter o seu formulário simplificado para que os utilizadores tenham mais probabilidades de o preencher e submeter? Um formulário de coluna única pode ser o design que procura.
E se precisar de alguns exemplos e inspiração, eu tenho tudo o que precisa. Nesta publicação, partilho as ideias e as dicas de design para criar formulários de coluna única que a nossa equipa selecionou depois de criar centenas de formulários com o nosso criador de formulários de arrastar e largar.
Vamos a isso!
Formulários de coluna única: Exemplos e inspiração
Um olhar rápido sobre os formulários de coluna única
Os formulários de coluna única são formulários cujos campos estão dispostos numa única linha vertical, um a seguir ao outro. Cada campo do formulário ocupa toda a largura do contentor do formulário, para que os utilizadores se possam concentrar num campo de cada vez à medida que se deslocam da parte superior do formulário para a parte inferior.
Eis algumas das principais caraterísticas dos formulários de coluna única:
- Fluxo linear: Os campos estão organizados numa sequência linear e direta, o que facilita aos utilizadores seguir e preencher o formulário sem confusão.
- Simplicidade: O esquema de coluna única elimina a complexidade que pode surgir com várias colunas, tornando o formulário menos assustador para os utilizadores.
- Facilidade de utilização em telemóveis: Os formulários de coluna única adaptam-se naturalmente a vários tamanhos de ecrã, especialmente a dispositivos móveis, uma vez que requerem menos espaço horizontal. Esta capacidade de resposta garante uma experiência de utilizador sem interrupções em todos os dispositivos.
- Concentração e clareza: Com cada campo a ocupar toda a largura do formulário, os utilizadores podem concentrar-se facilmente numa tarefa de cada vez. Isto reduz a probabilidade de erros e melhora as taxas de conclusão.
- Facilidade de leitura: O alinhamento vertical permite que os utilizadores digitalizem rapidamente o formulário, o que pode ser particularmente benéfico para formulários mais curtos, como formulários de contacto ou de inscrição.
- Melhor usabilidade: A apresentação simples é de fácil utilização - é fácil de compreender e preencher - o que pode levar a taxas de apresentação mais elevadas.
Estas caraterísticas fazem com que os formulários de coluna única sejam a escolha ideal para muitos tipos de formulários, mas especialmente para aqueles em que a simplicidade e a facilidade de utilização são a principal prioridade.
Crie agora o seu formulário de coluna única
Quando utilizar formulários de coluna única
Para os proprietários de pequenas empresas, os formulários de coluna única são populares porque são fáceis de conceber e implementar, mesmo sem competências técnicas avançadas. Estes formulários oferecem consistência em diferentes plataformas, são económicos e suficientemente versáteis para serem utilizados para vários fins. Por isso, são uma escolha prática para as pequenas empresas.
Mas será que é sempre a melhor opção de design para o seu formulário? Ao determinar se deve utilizar uma disposição de coluna única, considere estes factores:
- Comprimento do formulário: Utilize um esquema de coluna única para formulários mais curtos ou quando o número de campos é limitado, uma vez que mantém o formulário simples e fácil de preencher.
- Utilizadores de telemóveis: Opte por um esquema de coluna única se o seu público aceder ao seu sítio principalmente através de dispositivos móveis, uma vez que estes formulários asseguram uma experiência de utilizador reactiva em todos os tamanhos de ecrã.
- Necessidades de acessibilidade: Se a acessibilidade for uma prioridade, os formulários de coluna única são geralmente mais fáceis de navegar para os utilizadores com deficiência. Por isso, são uma melhor escolha para promover a inclusão.
Você sabia? Todos os modelos de formulários oferecidos gratuitamente aos assinantes do WPForms Lite são formulários de coluna única.
Dicas de design de formulários de coluna única
Um dos principais objectivos dos formulários de coluna única é oferecer um design simples que os utilizadores possam preencher facilmente.
Quando os formulários são fáceis de compreender e preencher, é mais provável que os utilizadores enviem as suas informações, o que conduz a taxas de conversão mais elevadas. Acrescente a isso uma rotulagem clara, uma ordem lógica dos campos e um mínimo de campos obrigatórios para reduzir a frustração do utilizador e melhorar a experiência geral, o que também incentiva a repetição das interações.
Leia também: Como criar um formulário de entrada de dados personalizado no WordPress
Utilizar WPForms
Todos os exemplos e inspirações que partilho aqui foram criados com o WPForms, e nós fornecemos ferramentas e recursos incrivelmente úteis para ajudá-lo a criar os melhores formulários de coluna única para o seu site.
Não só oferecemos centenas de modelos de formulários de coluna única concebidos para começar a utilizar de imediato, como também o incentivamos a utilizar o nosso criador de formulários de arrastar e largar para criar o seu próprio formulário de coluna única.
Com a opção de coluna única disponível no campo Layout, pode organizar rapidamente todo o formulário numa única coluna ou utilizar este campo para manter certas partes lineares enquanto organiza outras partes em várias colunas.
Dito isto, também pode organizar os seus campos de formulário de forma linear, simplesmente não utilizando o campo Layout - os campos irão automaticamente para uma única coluna quando os arrastar e largar no seu formulário.
Pode apenas querer ajustar o tamanho dos campos que não abrangem a largura do formulário. Defina o tamanho do campo como Grande e isso acontecerá!
Você sabia? Com o addon WPForms Lead Forms ativado, os campos utilizados nestes formulários são automaticamente formatados para abrangerem larguras uniformes do ecrã.
Reduzir campos de formulário
Em geral, é uma boa ideia eliminar quaisquer campos e informações desnecessários que estejam no seu formulário. Isso também se aplica aos formulários de coluna única. A simplicidade é uma das intenções destes formulários, por isso considere reduzir o número de campos (apenas se e onde puder) para melhorar a experiência do utilizador.
Não sabe quais os campos que deve manter e quais os que deve eliminar? Tenha em mente estas dicas:
- Dar prioridade às informações essenciais: Concentre-se nos campos que são absolutamente necessários para atingir o objetivo do formulário e remova os campos que não contribuem diretamente para o seu objetivo.
- Utilizar a lógica condicional: Utilize a lógica condicional para apresentar apenas determinados campos quando forem relevantes, ocultando campos desnecessários, exceto se forem satisfeitas condições específicas.
- Combinar campos relacionados: Sempre que possível, combine campos relacionados numa única entrada para reduzir o número total de campos.
- Considerar o esforço do utilizador: Remova todos os campos que exijam que os utilizadores forneçam informações que pode obter facilmente através de outros meios, como a utilização de dados de localização ou o preenchimento automático com base na introdução do utilizador.
- Pedir informações mais tarde: Se algumas informações não forem imediatamente necessárias, considere a possibilidade de as pedir numa fase posterior ou após a apresentação inicial, em vez de encher o formulário inicial.
Otimizar para dispositivos móveis
Já mencionei a importância da capacidade de resposta móvel tantas vezes nesta publicação do blogue que provavelmente está cansado de a ouvir, mas é verdade! Com tantos utilizadores de sites a visitarem sites em dispositivos móveis, é crucial ter os seus formulários optimizados para estes ecrãs.
Felizmente, os formulários de coluna única são naturalmente adequados para dispositivos móveis. Por isso, se tiver um formulário no seu site ou adorar um modelo que oferecemos, mas este utiliza várias colunas, basta aceder ao criador de formulários de arrastar e largar para editar o formulário para uma coluna.
Depois, antes de publicar o formulário na sua página do WordPress, selecione a opção de pré-visualização móvel para ver o aspeto do formulário em dispositivos mais pequenos.
Na verdade, é provavelmente uma boa regra geral pré-visualizar qualquer um dos seus formulários com a vista móvel antes de os publicar. Poderá descobrir que o seu formulário com várias colunas é mais adequado num formato de coluna única.
Escrever rótulos e descrições de campos claros
Nas definições de cada campo de formulário, pode personalizar a etiqueta e a descrição, bem como outras opções para incluir texto de instruções.
É importante que estas etiquetas e instruções guiem os utilizadores através do formulário, sem sobrecarregar visualmente os campos do formulário.
Para ajudar os utilizadores a evitar confusão e a reduzir os erros, pode considerar adicionar texto de marcador de posição aos campos do formulário. Deste modo, os visitantes recebem orientações sobre como preencher o formulário, quer através de texto instrutivo quer mostrando um exemplo da entrada esperada.
Exemplos de formulários de coluna única eficazes
Agora que já tem uma ideia melhor da funcionalidade e das utilizações dos formulários de coluna única, vamos ver alguns destes formulários em ação.
Formulários de contacto
Os formulários de contacto de coluna única são curtos e simples. Não requerem muitos campos para funcionar e estão organizados de uma forma visualmente apelativa.
No formulário de contacto acima, o campo Conteúdo é utilizado em primeiro lugar para incluir instruções para o utilizador do formulário. O campo Nome foi simplificado para uma linha e cada campo do formulário está alojado numa única coluna do campo Layout.
Não se esqueça de que a nossa galeria de modelos oferece muitos modelos de formulários de contacto como este!
Formulários de subscrição de boletins informativos
As inscrições em boletins informativos são outro tipo de formulário que normalmente não inclui muitos campos e é bastante simples. Tudo o que precisa para um formulário de registo de boletim informativo são os campos Nome e E-mail.
No meu exemplo de inscrição na newsletter, deixei o campo Nome como está, o que divide o campo no primeiro e último nome (em vez da versão simples como no formulário de contacto acima). Assim, para os utilizadores móveis, estas duas caixas de texto serão empilhadas uma em cima da outra.
Dito isto, continua a ser uma coluna única, uma vez que não utilizei o campo Layout neste formulário. No entanto, ajustei o tamanho dos campos para Grande, como mencionei anteriormente nas dicas de design.
Formulários de encomenda
Eis um exemplo de um formulário de encomenda de produtos para animais de companhia. Embora exista uma opção de quantidade apresentada com cada um dos campos de seleção de produtos, este formulário também tem um design de coluna única.
Este fluxo linear é de fácil utilização para os utilizadores, pelo que é mais provável que submetam o formulário. E quando esse formulário é um formulário de encomenda, isso significa que o visitante do seu site se converte de comprador em cliente!
Formulário de encomenda Dica profissional: Organize os campos numa ordem natural e sequencial que se alinhe com o processo de pensamento do utilizador, como, por exemplo, a seguir à seleção do produto, com informações de contacto, seguidas de detalhes de envio e, por fim, informações de pagamento.
Formulários de feedback
Os formulários de feedback devem ser concebidos com uma única coluna se incluírem campos de classificação, inquéritos, sondagens ou outras caraterísticas interactivas que possam ficar facilmente sobrecarregadas com várias colunas.
Neste exemplo de formulário de feedback, também utilizei a lógica condicional para evitar que esta coluna única se prolongue demasiado.
Se os utilizadores seleccionarem a opção Dine in, preencherão um inquérito baseado nessa experiência. Se seleccionarem Delivery, são fornecidas perguntas diferentes.
Formulários de geração de leads
Os formulários de chumbo avançam um ecrã de cada vez, com apenas um ou alguns campos de cada vez. Este é um exemplo único de formulários de coluna única, mas incluí-o aqui devido ao facto de um formulário ter de ser organizado desta forma para permitir a funcionalidade do formulário de avanço.
Como pode ver acima, alguns elementos do campo Endereço estão separados em partes lado a lado, mas a disposição geral do formulário é uma única coluna.
Formulários de marcação de consultas
É uma boa ideia organizar os formulários de marcação de consultas numa única coluna, uma vez que muitos utilizadores do formulário pretendem marcar as suas consultas a partir de um dispositivo móvel.
O exemplo de formulário acima utiliza uma única coluna para que fique bem num telemóvel.
E, embora os campos Data e Hora possam estar contidos num único campo com caixas lado a lado - que se adaptariam automaticamente aos ecrãs móveis - separei-os aqui em 2 campos. Da mesma forma, as opções de método de comunicação preferido podem ser organizadas em linha ou em colunas que se adaptam a telemóveis, mas neste exemplo foram deixadas numa única coluna.
Formulários de início de sessão
Os formulários nas páginas em que os utilizadores iniciam sessão num sítio Web são outro tipo de design de coluna única. Estes formulários são muito simplificados porque só precisam de duas informações: nome de utilizador ou e-mail e uma palavra-passe.
Essa é a página de login acima que usamos aqui no WPForms. Não é legal?
E isto é tudo! Estes exemplos apenas arranham a superfície de todas as razões e formas de utilizar formulários de coluna única. De facto, todos os formulários que publica no seu site podem utilizar um layout de coluna única, se necessário. A sua compatibilidade com os telemóveis seria garantida, isso é certo!
Crie agora o seu formulário de coluna única
FAQs sobre formulários de coluna única
Ufa, já falámos de muita coisa! Para recapitular, consulte estas perguntas frequentes para obter um resumo dos destaques:
O que são formulários de coluna única?
Os formulários de coluna única têm os seus campos dispostos numa única linha vertical, um a seguir ao outro. Cada campo preenche toda a largura do formulário, pelo que os utilizadores podem concentrar-se num campo de cada vez à medida que se deslocam da parte superior para a parte inferior do formulário.
Porquê utilizar formulários de coluna única na conceção de sítios Web?
Os formulários de coluna única são ideais em design Web porque oferecem uma disposição simples e direta que promove uma experiência de utilizador positiva, orientando os utilizadores através de cada campo num fluxo lógico e linear.
Esta simplicidade não só torna os formulários mais fáceis de preencher, especialmente em dispositivos móveis, como também melhora a acessibilidade e reduz a probabilidade de erros do utilizador, conduzindo a taxas de conclusão mais elevadas.
Como é que posso criar formulários de coluna única eficazes?
Para criar formulários de coluna única eficazes, comece por se concentrar na simplicidade - inclua apenas os campos essenciais para manter o formulário conciso e fácil de utilizar.
Com o WPForms, pode facilmente arrastar e soltar campos num layout de coluna única, criando um fluxo limpo e organizado. Personalize etiquetas, marcadores de posição e descrições de formulários para orientar os utilizadores ao longo do processo.
Certifique-se também de que tira partido das funcionalidades de design responsivo do WPForms para que o seu formulário tenha um ótimo aspeto e funcione bem em todos os dispositivos, especialmente nos móveis.
A seguir, veja estas dicas adicionais de design de layout
Um layout de coluna única é apenas uma das muitas maneiras diferentes de projetar seus formulários. Com o WPForms, as opções de personalização são quase infinitas! Mas se você está procurando algumas dicas para começar, dê uma olhada nas nossas práticas recomendadas sugeridas para um design fácil de usar.
Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
