Como criar menus suspensos em formulários do WordPress

Os menus suspensos são ferramentas essenciais em formulários. Seleção de país, escolha de categoria, classificação de preferências — sempre que os usuários precisam escolher em uma lista predefinida, os menus suspensos são a solução. Eles economizam espaço, padronizam dados e guiam os usuários para opções válidas. Veja como criar menus suspensos eficazes em seus formulários do WordPress.

Por que usar menus suspensos?

Vantagens em relação aos campos de texto

• Dados padronizados: Sem erros de digitação ou variações.
• Seleção guiada: Os usuários visualizam as opções disponíveis.
• Otimização do espaço: Recolhido até ser clicado
• Otimizado para celular: Seletor nativo em telefones
• Conclusão mais rápida: Clicar vs. digitar

Vantagens em relação aos botões de rádio

• Melhor para listas longas: Mais de 6 opções que cabem em espaços pequenos
• Aparência mais limpa: Menos poluição visual
• Rolável: Gerencie dezenas de opções

Quando usar menus suspensos

• 6 ou mais opções (menos opções = considere usar botões de rádio)
• Opções predefinidas e conhecidas
• Seleção única necessária
• Espaço é limitado
• A padronização de dados é importante.

Criando um menu suspenso básico

Passo 1: Adicionar um campo suspenso

1. Abra o seu formulário em A.F.B.
2. Encontre Suspenso em tipos de campo
3. Arraste para o seu formulário.

Etapa 2: Configurar rótulo

Rótulo: "Como você ficou sabendo de nós?" Espaço reservado: "Selecione uma opção..." Obrigatório: Sim/Não

Etapa 3: adicionar opções

Insira cada opção em uma nova linha:

Pesquisa no Google, Mídias sociais, Amigo ou colega, Anúncio, Blog ou artigo, Outro

Etapa 4: Visualizar e testar

1. Salvar formulário
2. Pré-visualização no frontend
3. Clique no menu suspenso para verificar as opções.
4. Enviar inscrição para o teste

Opções de configuração do menu suspenso

Basic Settings

• Gravadora: Pergunta ou sugestão
• Marcador de posição: Texto padrão (ex.: “Selecione…”)
• Requeridos: É necessário selecionar para enviar.
• Texto de ajuda: Instruções adicionais

Configurações de opções

• Lista de opções: Opções disponíveis
• Padrão selecionado: Opção pré-selecionada
• pesquisável: Digite para filtrar
• Seleção múltipla: Escolha vários

Adicionando opções de menu suspenso

Lista Simples

Opção 1 Opção 2 Opção 3 Opção 4

Com valores diferentes dos rótulos

Exibir uma coisa, armazenar outra:

Exibição: "Estados Unidos" Valor: "EUA" Exibição: "Reino Unido" Valor: "RU"

Opções agrupadas (Optgroups)

--- América do Norte --- Estados Unidos Canadá México --- Europa --- Reino Unido Alemanha França

Muitas opções

Para listas extensas, considere:

• Ordem alfabética
• Opções mais comuns primeiro
• Pesquisa ativada
• Agrupamentos lógicos

Texto do espaço reservado

O que é um espaço reservado?

O texto exibido antes do usuário selecionar uma opção:

[Selecione uma opção... ▼] ← Espaço reservado

Bons exemplos de marcadores de posição

"Selecione seu país..." "Escolha uma categoria..." "Selecione um horário..." "-- Por favor, selecione --" "Selecione uma opção"

Melhores práticas para espaços reservados

• Mantenha-o curto
• Deixe claro que se trata de uma sugestão.
• Não use como uma opção válida
• Considere o formato “– Selecione –”

Menus suspensos pesquisáveis

O que pode ser pesquisado?

Os usuários podem digitar para filtrar as opções:

[Digite para pesquisar... ▼] O usuário digita: "ger" Resultados: Alemanha, Argélia, Níger

Quando ativar a função de pesquisa

• Mais de 20 opções
• Listas de países/estados
• Catálogos de produtos
• Qualquer lista longa

Habilitando a função de busca

1. Selecione o campo suspenso
2. Encontre a opção “Pesquisável”
3. Ativar

UX pesquisável

1. O usuário clica na lista suspensa. 2. O campo de entrada de texto aparece. 3. O usuário digita uma correspondência parcial. 4. As opções são filtradas em tempo real. 5. O usuário seleciona uma opção na lista filtrada.

Listas suspensas de seleção múltipla

Seleção única versus seleção múltipla

Seleção única: o usuário escolhe UMA opção. Seleção múltipla: o usuário escolhe VÁRIAS opções.

Quando usar a seleção múltipla

• Selecione todas as opções aplicáveis.
• Interesses/preferências múltiplos
• Selecionando várias categorias
• Quando as caixas de seleção ocupariam muito espaço

Habilitar a seleção múltipla

1. Selecione o campo suspenso
2. Procure por “Permitir múltiplas seleções”
3. Ativar

Aparência de seleção múltipla

[Web Design, SEO, Marketing ▼] Itens selecionados exibidos como tags/chips

Seleção múltipla com limites

Combine com a seleção de mínimo/máximo:

Selecione de 2 a 4 tópicos. Mínimo: 2 Máximo: 4

Exemplos de configuração

Exemplo 1: Seleção de país

Rótulo: "País" Espaço reservado: "Selecione seu país..." Pesquisável: Sim Obrigatório: Sim Opções: [mais de 195 países em ordem alfabética]

Exemplo 2: Tipo de consulta

Rótulo: "Qual é o assunto da sua pergunta?" Espaço reservado: "Selecione a categoria..." Obrigatório: Sim Opções: - Vendas - Suporte - Cobrança - Parcerias - Imprensa/Mídia - Outros

Exemplo 3: Faixa de Orçamento

Rótulo: "Qual é o seu orçamento?" Espaço reservado: "Selecione o intervalo..." Obrigatório: Não Opções: - Menos de R$ 1,000 - R$ 1,000 - R$ 5,000 - R$ 5,000 - R$ 10,000 - R$ 10,000 - R$ 25,000 - Mais de R$ 25,000 - Ainda não tenho certeza

Exemplo 4: Intervalo de tempo

Rótulo: "Horário de agendamento preferencial" Espaço reservado: "Escolha um horário..." Obrigatório: Sim Opções: - 9:00 - 10:00 - 11:00 - 1:00 - 2:00 - 3:00 - 4:00

Exemplo 5: Seleção múltipla de interesses

Rótulo: "Tópicos de interesse" Espaço reservado: "Selecione os tópicos..." Seleção múltipla: Sim Pesquisável: Sim Opções: - Tecnologia - Negócios - Marketing - Design - Desenvolvimento - Análise - Segurança - IA/ML

Exemplo 6: Serviços Agrupados

Rótulo: "De qual serviço você precisa?" Opções: --- Serviços Web --- - Design de Websites - Desenvolvimento de Websites - E-commerce --- Marketing --- - SEO - PPC - Mídias Sociais --- Suporte --- - Manutenção - Hospedagem - Consultoria

Seleção padrão

Sem padrão (recomendado)

[Selecione uma opção... ▼]

O usuário deve escolher ativamente. Ideal para campos obrigatórios.

Padrão pré-selecionado

[Estados Unidos ▼] ← Pré-selecionados

Use quando:

• Uma opção é extremamente comum.
• Agiliza o preenchimento de formulários
• Existe um valor padrão lógico

Configuração padrão

1. Na lista de opções, marque a opção padrão.
2. Ou defina o “Valor padrão” nas configurações.

Menu suspenso vs. botões de opção

Use o menu suspenso quando

• Mais de 6 opções
• Lista extensa (países, estados)
• Espaço é limitado
• As opções são semelhantes em natureza.

Use botões de opção quando

• 2-5 opções
• Todas as opções devem estar visíveis.
• As opções possuem descrições.
• A comparação visual é importante.

Comparação lado a lado

MENU SUSPENSO (6+ opções, oculto até ser clicado): [Selecione um plano... ▼] BOTÕES DE RÁDIO (2-5 opções, todas visíveis): ○ Gratuito ○ Básico (US$ 9/mês) ○ Pro (US$ 29/mês) ○ Empresarial (Entre em contato conosco)

Menus suspensos de estilo

Aparência padrão

Os menus suspensos herdam o estilo do formulário:

• Cor/raio da borda
• Cor de fundo
• Família/tamanho da fonte
• Acolchoamento

Opções de estilo personalizadas

• ícone de seta suspensa
• Aparência do item selecionado
• estados de foco da opção
• Estilo de tag de seleção múltipla

Estilização Móvel

Menus suspensos nativos para dispositivos móveis:

• iOS: Seletor de roda
• Android: Seletor de materiais
• De acordo com o sistema operacional.

Melhores Práticas

1. Ordene as opções logicamente

• Em ordem alfabética: Países, nomes
• Numérico: Quantidades, intervalos
• Frequência: Mais comum primeiro
• Cronológico: Horários disponíveis, datas

2. Mantenha as opções concisas.

Bom: "Estados Unidos" Evite: "Estados Unidos da América (EUA)" Bom: "US$ 1,000 - US$ 5,000" Evite: "Entre mil e cinco mil dólares"

3. Inclua “Outro” quando apropriado.

Opções: - Google - Facebook - LinkedIn - Indicação de amigo - Outro ← Captura casos extremos

4. Use o marcador de posição, não a primeira opção.

Bom: Espaço reservado: "Selecione..." Opções: Opção 1, Opção 2, Opção 3 Evitar: Opções: "Selecione...", Opção 1, Opção 2 (A primeira opção não deve ser um prompt)

5. Ativar a pesquisa para listas longas

Qualquer menu suspenso com 15 a 20 ou mais opções deve permitir buscas.

6. Considere o desempenho de carregamento

Listas extremamente longas (mais de 1000 itens) podem precisar de:

• Carregamento lento
• Pesquisa no servidor
• Dividindo em subcategorias

Casos de uso comuns de menus suspensos

Formulários de contacto

- Departamento (Vendas, Suporte, Cobrança) - Tipo de consulta (Pergunta, Feedback, Reclamação) - Como você ficou sabendo de nós

Formulários de Registro

- País - Estado/Província - Setor de atividade - Tamanho da empresa - Cargo/Função

Formulários de pedido

- Seleção de produtos - Quantidade - Variantes de tamanho/cor - Método de envio

Formulários de pesquisa

- Escala de classificação (1-10) - Frequência (Nunca a Sempre) - Concordância (Discordo totalmente a Concordo totalmente)

Formulários de reserva

- Tipo de serviço - Data preferencial - Horário - Duração

guia de solução de problemas

A lista suspensa não está exibindo as opções.

• Verifique se as opções foram salvas.
• Verifique se a lista de opções está vazia.
• Limpe o cache e atualize

Pesquisa não funciona

• Confirme se a função de pesquisa está ativada.
• Verifique erros de JavaScript
• Teste em navegadores diferentes

A seleção múltipla não salva todas as seleções.

• Verifique se a seleção múltipla está ativada.
• Verifique o tratamento do envio do formulário.
• Teste com menos opções

O seletor móvel não está aparecendo.

• O estilo personalizado pode substituir o estilo nativo.
• Teste em dispositivo móvel real
• Verificar conflitos de JavaScript

Acessibilidade

Navegação pelo teclado

• Use a tecla Tab para selecionar o menu suspenso.
• Use as setas do teclado para navegar.
• Pressione Enter/Espaço para selecionar
• Digite a primeira letra para pular

Leitores de tela

• Etiqueta associada corretamente
• Opções anunciadas
• Seleção confirmada

Melhores Práticas

• Rótulos claros e descritivos
• Ordem lógica das opções
• Evite usar marcadores como única instrução.

Resumo

Criando menus suspensos:

1. Adicionar campo suspenso – Arraste para formar
2. Definir etiqueta – Pergunta/estímulo claro
3. Adicionar espaço reservado – Texto “Selecione…”
4. Insira as opções – Um por linha
5. Ativar pesquisa – Para listas longas
6. Ativar seleção múltipla – Se forem necessárias várias opções
7. Defina os requisitos – Com base nas necessidades do formulário
8. Teste completamente – Todas as opções, todos os dispositivos

Conclusão

Os menus suspensos são eficientes para selecionar opções em formulários. Eles economizam espaço, padronizam dados e funcionam bem em diversos dispositivos. Para listas curtas, considere usar botões de opção. Para listas longas, habilite a busca. Para seleções múltiplas, use o modo de seleção múltipla. A configuração correta transforma os menus suspensos em campos de entrada poderosos, que melhoram tanto a experiência do usuário quanto a qualidade dos dados.

Construtor automático de formulários Inclui campos suspensos completos com modo de pesquisa, opção de seleção múltipla e estilos personalizados. Crie menus suspensos profissionais em minutos.

Pronto para adicionar menus suspensos? Baixe o Construtor Automático de Formulários Comece a criar formulários com menus suspensos hoje mesmo.