Como criar uma lista pendente com várias selecções

Os menus pendentes de seleção múltipla facilitam o trabalho com grandes listas em formulários. Não é a única forma de adicionar uma lista longa com várias opções selecionáveis num formulário, mas é a abordagem mais concisa.

E quando se trata de conceber formulários que as pessoas queiram realmente preencher, é necessário algo que não prolongue o formulário mais do que o absolutamente necessário.

No entanto, vejo sítios Web que utilizam grandes listas de verificação em situações em que poderiam ter criado um design mais simples se tivessem optado por um menu pendente de seleção múltipla.

Com base no que vi, isto deve-se ao facto de o criador de formulários não suportar os menus pendentes de seleção múltipla ou ao facto de o criador não ter prestado atenção.

Por isso, achei que devia elaborar um guia rápido para mostrar como é fácil adicionar dropdowns aos seus formulários no WordPress com opções de seleção múltipla.

Como configurar um campo suspenso de seleção múltipla no WordPress

Vamos começar por instalar o plugin que vamos utilizar.

Passo 1: Instalar o plugin WPForms

Em primeiro lugar, precisa de um criador de formulários que suporte dropdowns multi-selecionados. Eu recomendo o WPForms porque eu realmente acho que nenhum outro plugin de formulário do WordPress oferece a flexibilidade e os recursos de economia de tempo do mesmo nível.

Por exemplo, com os dropdowns do WPForms, é possível:

• Adicionar opções de seleção múltipla nos menus pendentes nas versões gratuita e paga
• Gerar e adicionar automaticamente longas listas de opções com IA

Embora seja possível usar o WPForms Lite ou o WPForms Pro para criar dropdowns com seleção múltipla, usarei o WPForms Pro neste guia (consulte WPForms Lite vs Pro para saber mais sobre as principais diferenças entre as duas versões).

É a primeira vez que instala um plugin? É incrivelmente fácil. Pode seguir os passos de instalação descritos no nosso guia de documentação.

Uma vez instalado, pode começar a criar os seus formulários imediatamente.

Passo 2: Criar um novo formulário

Abra o menu de administração do WordPress. Passe o cursor sobre WPForms na barra lateral e clique em Adicionar novo.

Esta ação carregará o ecrã de configuração do formulário. Neste exemplo, quero criar um formulário de pedido de livro. Por isso, vou dar um nome apropriado ao formulário para minha referência interna e escolher um modelo.

Para simplificar, vou usar o Formulário de contacto simples e depois personalizá-lo um pouco, adicionando um menu pendente mais tarde.

Lembre-se de que existem mais de 2.000 modelos de formulários à escolha. Pode até gerar o formulário completo com IA.

Mas, para demonstrar melhor a funcionalidade e as personalizações, estou a utilizar a via manual para este caso.

Depois de selecionar o seu modelo, o criador de formulários será carregado em apenas alguns segundos.

Todos os modelos do WPForms são 100% personalizáveis. Assim, pode facilmente inserir novos campos, remover quaisquer campos existentes ou alterar outras definições.

No passo seguinte, vou adicionar um campo pendente com uma lista bastante grande de opções selecionáveis.

Passo 3: Adicionar um campo pendente

Primeiro, vamos arrastar um menu pendente para o formulário.

Em seguida, clique no campo para que as definições se abram à esquerda.

No painel do lado esquerdo, verá várias opções. Por exemplo, alterar a etiqueta do campo e introduzir as opções para o seu menu pendente.

Primeiro, vamos dar um nome mais relevante e descritivo ao campo, alterando a etiqueta. Uma vez que pretendo adicionar uma lista de livros que as pessoas podem pedir neste campo, estou a rotular este campo como "Livros para pedir".

Agora, é hora de adicionar as opções para o seu menu suspenso. É bastante fácil adicionar escolhas manualmente quando se tem apenas algumas delas.

Mas se tiver uma lista longa, pode poupar muito tempo se deixar que a IA gere e adicione as opções por si.

Para utilizar a IA para as escolhas, clique no botão roxo Gerar escolhas .

Agora, descreva as opções em termos simples e o WPForms AI gerará sua lista para você quase instantaneamente. Eu quero adicionar uma lista de livros populares (que provavelmente estarão disponíveis em qualquer biblioteca decente), e é isso que vou perguntar no prompt.

Em poucos segundos, eu tinha uma lista fantástica com a qual podia trabalhar. Mas se quiser alterar a lista em grande escala, pode tentar modificar o seu prompt e pedir novamente à IA do WPForms para atualizar a lista.

Quando estiver satisfeito com as sugestões, clique em Inserir opções.

As escolhas geradas aparecerão na lista de escolhas no painel da esquerda. Também pode editar manualmente estas opções.

Por predefinição, um visitante só pode selecionar uma opção de cada vez no menu pendente. Mas é fácil alterar estas definições, como mostrarei no passo seguinte.

Passo 4: Editar as definições do campo pendente para ativar a seleção múltipla

Por predefinição, um visitante só pode selecionar uma opção de cada vez no menu pendente. Para alterar esta situação, comece por aceder ao separador Avançadas do campo do menu pendente.

Depois disso, clique na Seleção de Múltiplas Opções para a ativar.

Ótimo! Estamos quase a terminar. Mas, pessoalmente, não sou fã do estilo Dropdown clássico (que é o padrão).

Isto faz com que o menu pendente apareça como uma caixa retangular com deslocamento vertical, sendo necessário premir Ctrl(Comando no Mac) para selecionar várias opções.

Pode tornar o campo pendente mais intuitivo alterando o Estilo de Clássico para Moderno.

Existem 3 razões pelas quais o estilo Moderno funciona melhor para um menu pendente de seleção múltipla:

• O campo de estilo Moderno apresenta uma linha com uma seta para expandir a lista. É mais compacto do que o estilo Clássico, que apresenta sempre 4 linhas e ocupa mais espaço no ecrã.
• O campo de estilo Moderno permite-lhe clicar em várias entradas sem manter premidas quaisquer teclas do teclado. Com o campo Clássico, o visitante terá de manter premida a tecla Control ou Command no teclado para selecionar mais de uma entrada de cada vez.
• O menu pendente de seleção múltipla do estilo moderno tem uma caixa de pesquisa, o que facilita a procura rápida do item pretendido.

Vamos guardar o nosso progresso até agora, clicando no botão Guardar na parte superior do criador de formulários.

Agora podemos publicar o formulário. Este é o passo final e demora apenas alguns minutos.

Passo 5: Publicar o seu formulário

Agora que já preenchemos o formulário, é altura de o publicar no seu sítio WordPress.

O WPForms permite-lhe publicar os seus formulários onde quiser. Pode adicioná-los a:

• Postos
• Páginas
• Barras laterais
• O rodapé do WordPress.

Neste exemplo, vamos criar uma nova página para o formulário.

Para começar, clique em Incorporar na parte superior do construtor de formulários.

Agora vamos em frente e clicar em Criar nova página.

Escreva um nome para a sua página e clique em Vamos lá.

O WordPress abrirá a nova página e mostrará uma pré-visualização do seu formulário. Clique no botão azul Publicar no canto superior direito.

Agora, o seu formulário com o menu pendente de seleção múltipla está ativo e pronto a ser utilizado.

E é isso! Aprendeu a criar um menu suspenso multi-seleção facilmente no WordPress.

Crie o seu formulário WordPress agora

Próximo passo: Dividir o formulário em páginas

Se está à procura de formas de tornar o seu formulário mais compacto, pense em dividi-lo em várias páginas. Isto pode tornar os formulários longos muito mais fáceis de trabalhar.

• Para saber como adicionar quebras de página a um formulário, leia o nosso guia para criar um formulário com vários passos.
• Para criar um formulário em várias etapas concebido para aumentar as conversões e os contactos, veja como criar um formulário de contactos.

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.