Listas suspensas de seleção múltipla: escolha várias opções
Os menus suspensos padrão obrigam os usuários a escolher apenas uma opção. Mas e se eles precisarem selecionar várias? Serviços de interesse, dias de disponibilidade, recursos desejados — muitas perguntas têm várias respostas válidas. Os menus suspensos de múltipla seleção permitem que os usuários escolham diversas opções em um único campo, otimizando o espaço.
Neste guia, você aprenderá como criar menus suspensos de seleção múltipla que permitem aos usuários escolher várias opções em seus formulários do WordPress.
O que é uma lista suspensa de seleção múltipla?
Menu suspenso padrão
- Clique para abrir as opções.
- Selecione UMA opção
- O menu suspenso fecha.
- Um valor armazenado
Menu suspenso de seleção múltipla
- Clique para abrir as opções.
- Selecione VÁRIAS opções
- Aberto para mais opções.
- Vários valores armazenados
Diferença visual
Padrão:
Serviços: [Design Web ▼] (Apenas uma seleção)
Seleção múltipla:
Serviços: [Web Design, SEO, Marketing ▼] (Múltiplas opções exibidas)
Quando usar listas suspensas de seleção múltipla
Perfeito para
- Serviços de interesse em: “Selecione todos os serviços de que precisa”
- Dias disponíveis: “Quais dias são bons para você?”
- Funcionalidades desejadas: “Selecione os recursos nos quais você está interessado”
- Categorias: Selecione todas as opções aplicáveis.
- Habilidades/experiência: “Quais são as suas habilidades?”
- Preferências: “Selecione suas preferências”
Quando usar caixas de seleção em vez de caixas de seleção
| Menu suspenso de seleção múltipla | Caixas de seleção |
|---|---|
| Muitas opções (7+) | Poucas opções (2-6) |
| Formas com espaço limitado | Muito espaço vertical |
| Opções ocultas até serem clicadas | Todas as opções visíveis ao mesmo tempo |
| Aparência mais limpa | digitalização mais fácil |
| Compatível com dispositivos móveis para listas longas. | Melhor para seleção rápida |
Guia de decisão
- Opções de 2 a 6: Use caixas de seleção
- Opções de 7 a 15: Menu suspenso de seleção múltipla
- Mais de 15 opções: Seleção múltipla com pesquisa
Criando listas suspensas de seleção múltipla
Passo 1: Adicionar um campo suspenso
- Abra o seu formulário em A.F.B.
- Arraste Suspenso campo para o seu formulário
- Clique para configurar as definições.
Passo 2: Ativar a seleção múltipla
- Localize a opção “Permitir múltiplas seleções”
- Ativar
- O menu suspenso agora aceita múltiplas opções.
Etapa 3: adicionar opções
Insira cada opção em uma nova linha:
Design de sites, SEO, marketing de conteúdo, mídias sociais, e-mail marketing, publicidade PPC, branding e análise de dados.
Etapa 4: definir as configurações
- Gravadora: “Serviços de interesse”
- Marcador de posição: Selecione todas as opções aplicáveis.
- Requeridos: Alternar conforme a necessidade
- Texto de ajuda: “Mantenha pressionada a tecla Ctrl/Cmd para selecionar vários” (se necessário)
Etapa 5: Definir limites de seleção (opcional)
- Seleções mínimas: Pelo menos X opções
- Seleções máximas: Não mais que X opções
Exemplos de configuração de seleção múltipla
Seleção de Serviços
Gravadora: “Em quais serviços você está interessado?”
Marcador de posição: Selecione todas as opções aplicáveis.
Requeridos: Sim
Seleções mínimas: 1
opções:
- Sites
- Desenvolvimento do site
- Ecommerce
- SEO
- Redação de Conteúdo
- Gestão de Mídia Social
- E-mail Marketing
- Publicidade Paga
- Branding
- Consultoria
Dias Disponíveis
Gravadora: “Em quais dias você está disponível?”
Marcador de posição: “Selecione os dias disponíveis”
Requeridos: Sim
Seleções mínimas: 1
opções:
- Segunda-feira
- Terça-feira
- Wednesday
- Quinta-feira
- Sexta-feira
- Sábado
- Domingo
Habilidades e especialidades
Gravadora: “Selecione suas áreas de especialização”
Marcador de posição: Selecione todas as opções aplicáveis.
Requeridos: Sim
Seleções mínimas: 1
Seleções máximas: 5
opções:
- JavaScript
- Python
- PHP
- Reagir
- Vue.js
- Node.js
- WordPress
- Gerenciamento de banco de dados
- DevOps
- Design UI / UX
Restrições alimentares
Gravadora: “Alguma restrição alimentar?”
Marcador de posição: Selecione, se aplicável.
Requeridos: Não
opções:
- Vegetariano
- Vegan
- Sem glúten
- livre de laticínios
- Alergia a nozes
- Kosher
- Halal
- Sem Restrições
Preferências de Comunicação
Gravadora: “Como você prefere que entremos em contato com você?”
Marcador de posição: “Selecione os métodos preferidos”
Requeridos: Sim
Seleções mínimas: 1
opções:
- Telefonema
- Mensagem de texto
- Chamada de vídeo
Interesses em eventos
Gravadora: “Quais sessões lhe interessam?”
Marcador de posição: “Selecione as sessões que deseja assistir”
Requeridos: Sim
Seleções mínimas: 1
opções:
- Discurso importante
- Workshop A: Marketing
- Workshop B: Vendas
- Oficina C: Tecnologia
- Painel de Discussão
- Almoço em rede
- Cerimônia de Encerramento
Limites de seleção
Seleções mínimas
Por que usar:
- Certifique-se de que pelo menos uma opção seja escolhida.
- São necessárias várias respostas.
- Validar entradas significativas
Configurações comuns:
- Minuto 1: “Selecione pelo menos uma opção”
- Minuto 2: “Selecione pelo menos duas opções”
- Minuto 3: “Escolha seus 3 favoritos”
Seleções máximas
Por que usar:
- Limitar as opções de foco
- “Escolha seus 3 favoritos”
- Restrições de recursos
- Impedir o comportamento de "selecionar tudo"
Configurações comuns:
- Máximo 3: “Escolha até 3”
- Máximo 5: “Selecione no máximo 5”
- Número máximo de correspondências disponíveis
Mensagens de Validação
- Por favor, selecione pelo menos uma opção.
- Por favor, selecione pelo menos 3 opções.
- Você pode selecionar até 5 opções no máximo.
- Por favor, selecione entre 2 e 5 opções.
Considerações sobre a experiência do usuário
Instruções claras
Na etiqueta:
- Selecione todas as opções aplicáveis.
- “Escolha várias opções”
- “Escolha seus 3 favoritos”
No espaço reservado:
- “Clique para selecionar vários…”
- “Selecione as opções…”
No texto de ajuda:
- Você pode selecionar várias opções.
- Selecione de 1 a 5 opções.
- “Mantenha pressionada a tecla Ctrl (Cmd no Mac) para selecionar vários itens”
Mostrar contagem selecionada
Exibir quantos itens estão selecionados:
- “3 itens selecionados”
- “Design de sites, SEO e mais 2 serviços”
- Visualização clara das opções atuais.
Deseleção fácil
- Clique no item selecionado para desmarcá-lo.
- Botão “X” em cada item selecionado
- Opção “Limpar tudo”
Pesquisar listas longas
Para mais de 10 opções, adicione a pesquisa:
- Digite para filtrar as opções
- Encontre itens rapidamente
- Essencial para mais de 20 opções
Seleção múltipla versus outros tipos de campo
Lista suspensa de seleção múltipla vs. caixas de seleção
Selecione a opção de seleção múltipla quando:
- Mais de 7 opções
- Espaço limitado para formulários
- Nem todas as opções precisam estar visíveis.
- Deseja-se uma aparência visual mais limpa.
Selecione as caixas de seleção quando:
- 6 opções ou menos
- Os usuários devem visualizar todas as opções.
- A digitalização rápida é importante.
- Interação mais simples é preferível
Seleção múltipla vs. várias listas suspensas individuais
Abordagem inadequada:
Primeira opção: [Menu suspenso] Segunda opção: [Menu suspenso] Terceira opção: [Menu suspenso]
Melhor abordagem:
Selecione suas opções: [Menu suspenso de seleção múltipla] (Máximo de 3 seleções)
Seleção múltipla versus botões de opção
Botões de opção = seleção única. Nunca os utilize para seleção múltipla.
Considerações sobre dispositivos móveis
Seleção amigável ao toque
- Alvos de toque grandes
- Fácil de selecionar/deselecionar
- Feedback visual claro
Nativo vs. Personalizado
- A seleção múltipla nativa pode ser complicada em dispositivos móveis.
- Menus suspensos personalizados geralmente oferecem uma melhor experiência do usuário.
- Considere listas de caixas de seleção em dispositivos móveis.
Exibição de itens selecionados
- Exibir as seleções com clareza
- Não deixe o recipiente transbordar.
- “3 selecionados” versus listar todos os nomes
Tratamento de Dados
Como os dados são armazenados
Seleções múltiplas geralmente são armazenadas como:
- Separado por vírgulas: “Web Design, SEO, Marketing”
- Array: [“Web Design”, “SEO”, “Marketing”]
- Entradas individuais por seleção
Notificações por e-mail
Nos e-mails de notificação:
Serviços de interesse: - Web Design - SEO - Marketing de conteúdo
Exportação de CSV
Exportado como:
- Coluna única: “Web Design, SEO, Marketing”
- Ou várias colunas por opção
Filtrar envios
- Filtrar por seleção específica
- Encontre todos que selecionaram “SEO”
- Útil para segmentação
Padrões Comuns
Padrão 1: Seleção múltipla obrigatória
Serviços necessários (selecione pelo menos um): [Lista suspensa de seleção múltipla] Obrigatório: Sim Mínimo: 1
Padrão 2: Seleção Limitada
Selecione suas 3 principais prioridades: [Menu suspenso de seleção múltipla] Mínimo: 3 Máximo: 3
Padrão 3: Seleção múltipla opcional
Alguma restrição alimentar? (opcional) [Menu suspenso de múltipla seleção] Obrigatório: Não
Padrão 4: “Selecionar tudo” com limites
Quais funcionalidades lhe interessam? (máx. 5) [Menu suspenso de seleção múltipla] Máx.: 5 Texto de ajuda: "Selecione até 5 funcionalidades"
Acessibilidade
Navegação pelo teclado
- Use a tecla Tab para acessar o menu suspenso.
- Use as setas do teclado para navegar pelas opções.
- Pressione a barra de espaço ou Enter para selecionar/desmarcar.
- Digite para ir para a opção
Suporte para leitor de tela
- Anuncie “seleção múltipla” ou “escolha várias opções”.
- Leia a contagem selecionada
- Anunciar alterações na seleção
Limpar rótulos
- A etiqueta indica que é permitida a seleção múltipla.
- Selecione todas as opções aplicáveis.
- “Escolha várias opções”
Dicas de estilo
Exibição de itens selecionados
- Etiquetas/chips para cada seleção
- Distinção visual clara
- Remover botão em cada
Aparência do menu suspenso
- Marcas de seleção ao lado dos itens selecionados
- Fundo destacado para selecionado
- Limpar estados de foco
Design consistente
- Combine com outros estilos de campo de formulário
- Mesma borda, espaçamento interno e cores.
- Compatível com menus suspensos simples
guia de solução de problemas
As seleções não estão sendo salvas.
- Verifique se a seleção múltipla está ativada.
- Verifique o tratamento do envio do formulário.
- Teste com pré-visualização do formulário
Só é possível selecionar uma opção.
- A opção de seleção múltipla não está ativada.
- Verifique as configurações do campo
- Talvez esteja usando o tipo de campo errado.
Validação não está funcionando
- Verifique as configurações mínimas/máximas.
- Verifique a opção necessária
- Teste diferentes quantidades de seleção
Problemas de exibição em dispositivos móveis
- Teste em dispositivo móvel real
- Verifique a largura do menu suspenso
- Garanta que as seleções estejam visíveis.
Perguntas frequentes
Quantas opções os usuários podem selecionar?
Por padrão, ilimitado. Defina um máximo se quiser limitar as opções (por exemplo, "Escolha até 3").
Devo usar seleção múltipla ou caixas de seleção?
Caixas de seleção para 6 opções ou menos (todas visíveis). Seleção múltipla para 7 ou mais opções ou quando o espaço for limitado.
Posso exigir um número mínimo de seleções?
Sim. Defina seleções mínimas para garantir que os usuários escolham pelo menos X opções.
Como as seleções múltiplas são armazenadas?
Geralmente, os dados são apresentados como valores separados por vírgula ou como uma matriz. Aparecem nas submissões e exportações como uma lista.
Posso adicionar a opção de pesquisa ao menu suspenso?
Muitos construtores de formulários suportam listas suspensas pesquisáveis. Essencial para mais de 15 opções.
Resumo
Criando listas suspensas de seleção múltipla:
- Adicionar campo suspenso – Menu suspenso padrão primeiro
- Ativar seleção múltipla – Permitir múltiplas seleções
- Adicionar opções – Todas as opções disponíveis
- Defina uma etiqueta clara. – “Selecione todas as opções aplicáveis”
- Adicionar espaço reservado – Orientar os usuários na seleção
- Defina os limites de seleção. – Mínimo/máximo, se necessário
- Adicionar texto de ajuda – Explicar as regras de seleção
- Teste completamente – Várias contagens de seleção
Conclusão
Os menus suspensos de múltipla seleção resolvem o problema de "escolher várias opções" de forma elegante. Eles economizam espaço em comparação com longas listas de caixas de seleção, mantêm os formulários organizados e permitem que os usuários selecionem exatamente o que se aplica a eles. Use-os para serviços, dias, recursos, preferências — qualquer pergunta em que várias respostas sejam válidas e a lista seja longa demais para caixas de seleção.
Construtor automático de formulários Suporta listas suspensas de seleção múltipla com limites de seleção e opções de pesquisa. Crie formulários flexíveis que capturam múltiplas escolhas em um único campo fácil de usar.
Pronto para formulários de múltipla seleção? Baixe o Construtor Automático de Formulários e permitir que os usuários escolham várias opções com facilidade.