Como criar uma lista suspensa com várias seleções

Os dropdowns de seleção múltipla facilitam o trabalho com listas grandes em formulários. Essa não é a única maneira de adicionar uma lista longa com várias opções selecionáveis em um formulário, mas é a abordagem mais concisa.

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

No entanto, vejo sites usando grandes listas de verificação em situações em que poderiam ter criado um design mais limpo se tivessem optado por um menu suspenso de seleção múltipla.

Com base no que vi, isso se deve ao fato de o construtor de formulários não oferecer suporte a menus suspensos de seleção múltipla ou ao fato de o criador não ter prestado atenção.

Por isso, achei que deveria 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 instalando o plug-in que vamos usar.

Etapa 1: instalar o plug-in WPForms

Em primeiro lugar, você precisa de um construtor de formulários que ofereça suporte a dropdowns de seleção múltipla. Recomendo o WPForms porque realmente acho que nenhum outro plug-in 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, você pode:

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

Embora você possa 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).

Está instalando um plug-in pela primeira vez? É incrivelmente fácil. Você pode seguir as etapas de instalação descritas em nosso guia de documentos.

Depois de instalado, você pode começar a criar seus formulários imediatamente.

Etapa 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 Add New (Adicionar novo).

Essa ação carregará a tela de configuração do formulário. Neste exemplo, quero criar um formulário de solicitação de livro. Portanto, darei um nome apropriado ao formulário para minha referência interna e escolherei um modelo.

Para simplificar, usarei o Formulário de contato simples e o personalizarei um pouco adicionando um menu suspenso posteriormente.

Lembre-se de que há mais de 2.000 modelos de formulários para você escolher. Você pode até mesmo gerar o formulário inteiro com IA.

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

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

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

Na próxima etapa, adicionarei um campo suspenso com uma lista bastante grande de opções selecionáveis.

Etapa 3: Adicionar um campo suspenso

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

Em seguida, clique no campo para que as configurações sejam abertas à esquerda.

No painel esquerdo, você verá várias opções. Por exemplo, alterar o rótulo do campo e inserir as opções do menu suspenso.

Primeiro, vamos dar um nome mais relevante e descritivo ao campo, alterando o rótulo. Como quero adicionar uma lista de livros que as pessoas podem solicitar nesse campo, estou rotulando esse campo como "Books to Request" (Livros para solicitar).

Agora, é hora de adicionar as opções ao seu Dropdown. É bastante fácil adicionar opções manualmente quando você tem apenas algumas delas.

Mas se você tiver uma lista longa, poderá economizar muito tempo deixando que a IA gere e adicione as opções para você.

Para usar a IA para escolhas, clique no botão roxo Generate Choices (Gerar escolhas ).

Agora, descreva as opções em termos simples e o WPForms AI gerará sua lista para você quase instantaneamente. 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 você quiser alterar muito a lista, pode tentar modificar o prompt e pedir novamente ao WPForms AI para atualizar a lista.

Quando você estiver satisfeito com as sugestões, clique em Insert Choices (Inserir opções).

As opções geradas aparecerão na lista de opções no painel esquerdo. Você também pode editar manualmente essas opções.

Por padrão, o visitante só pode selecionar uma opção de cada vez no menu suspenso. Mas é fácil alterar essas configurações, como mostrarei na próxima etapa.

Etapa 4: Editar as configurações do campo suspenso para habilitar a seleção múltipla

Por padrão, o visitante só pode selecionar uma opção de cada vez no menu suspenso. Para alterar isso, primeiro acesse a guia Advanced do campo Dropdown.

Depois disso, clique na Multiple Options Selection para ativá-la.

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

Isso faz com que o menu suspenso apareça como uma caixa retangular com rolagem vertical, e você precisa pressionar Ctrl(Command no Mac) para selecionar várias opções.

Você pode tornar o campo suspenso mais intuitivo alterando o estilo de Clássico para Moderno.

Há três motivos pelos quais o estilo Moderno funciona melhor para um menu suspenso de seleção múltipla:

• O campo de estilo Moderno exibe uma linha com uma seta para expandir a lista. É mais compacto do que o estilo Classic, que sempre exibe 4 linhas e ocupa mais espaço na tela.
• O campo de estilo Moderno permite que você clique em várias entradas sem pressionar nenhuma tecla do teclado. Com o campo Classic, o visitante precisará manter pressionada a tecla Control ou Command no teclado para selecionar mais de uma entrada por vez.
• O menu suspenso de seleção múltipla do estilo moderno tem uma caixa de pesquisa, o que facilita a localização rápida do item desejado.

Vamos salvar nosso progresso até o momento clicando no botão Save (Salvar ) na parte superior do construtor de formulários.

Agora podemos publicar o formulário. Essa é a etapa final e leva apenas alguns minutos.

Etapa 5: Publique seu formulário

Agora que concluímos o formulário, é hora de publicá-lo em seu site do WordPress.

O WPForms permite que você publique seus formulários onde quiser. Você pode adicioná-los a:

• Publicações
• 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 Embed na parte superior do construtor de formulários.

Agora vamos clicar em Create New Page (Criar nova página).

Digite um nome para sua página e clique em Let's Go (Vamos lá).

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

Agora seu formulário com o menu suspenso de seleção múltipla está ativo e pronto para ser usado.

E é isso! Você aprendeu a criar um dropdown de seleção múltipla facilmente no WordPress.

Crie seu formulário WordPress agora

Próxima etapa: Dividir seu formulário em páginas

Se estiver procurando maneiras de tornar seu formulário mais compacto, pense em dividi-lo em várias páginas. Isso 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 nosso guia para criar um formulário de várias etapas.
• Para criar um formulário de várias etapas projetado para aumentar as conversões e os leads, confira como criar um formulário de lead.

Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

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