Permitir várias selecções para um campo pendente

Gostaria de permitir que os seus utilizadores seleccionassem várias opções num campo Dropdown? Adicionar um menu suspenso de seleção múltipla aos seus formulários WordPress permite que os seus utilizadores seleccionem muitas opções sem terem de utilizar um campo de caixas de verificação.

Este tutorial irá mostrar-lhe como configurar um campo Dropdown de seleção múltipla no WPForms.

Active o JavaScript no seu browser para preencher este formulário.

Experimente esta demonstração de formulário!


Começar a trabalhar

Antes de começarmos, é necessário criar um novo formulário ou editar um formulário existente.

Para o nosso exemplo, vamos criar um formulário de inquérito de um clube desportivo. Para o fazer, começamos por abrir o criador de formulários.

Em seguida, navegue para a secção Campos padrão para encontrar o campo Deslocar. Basta clicar no campo para o adicionar ao formulário ou arrastá-lo e largá-lo na área de pré-visualização do formulário.

Adicionar um campo suspenso no WPForms

Quando o campo for adicionado, clique nele para abrir o painel Opções de campo.

Depois, alteramos a etiqueta deste campo para Selecionar o(s) clube(s) sobre o(s) qual(is) gostaria de saber mais. Também vamos adicionar 4 opções em Escolhas: Natação, Tiro com arco, Críquete e Dança.

Definição de etiqueta e opções na seleção múltipla

A partir das Opções de Campo, navegue até à secção Avançadas e clique nela para abrir definições adicionais.

Em seguida, selecione a opção Seleção de várias opções para a ativar.

Ativar a seleção de várias opções

Opções de personalização

Existem duas configurações de estilo diferentes disponíveis para o campo Dropdown: Clássico ou Moderno. Cada uma delas formata o estilo do menu pendente de uma forma ligeiramente diferente. Pode alterar o estilo do seu campo pendente em Avançado " Estilo.

Opções de estilo para o campo pendente

Estilo clássico

O estilo Clássico listará todas as suas opções dentro de uma caixa. Quando forem adicionadas mais de 4 opções ao menu pendente, a caixa incluirá uma barra de deslocamento vertical.

Menu suspenso clássico de seleção múltipla

Nota: O estilo Clássico mostrará sempre pelo menos quatro linhas, mesmo que não existam dados nessas linhas.

Para selecionar várias opções, mantenha premido o botão Controlo (ou Comando no Mac) enquanto clica. Isto adicionará um efeito de destaque às opções selecionadas.

Opções selecionadas Menu pendente clássico

Estilo moderno

O estilo Moderno apresentará um menu pendente padrão. Este menu pendente permite-lhe percorrer uma lista de opções e selecionar as suas opções ou introduzir termos de pesquisa para encontrar as opções que pretende.

Menu suspenso moderno de seleção múltipla

Quando são selecionadas várias opções, cada opção é adicionada à barra pendente.

Múltiplas opções Modern Dropdown

Configuração da lógica condicional

A configuração da lógica condicional com um menu pendente de seleção múltipla permite-lhe mostrar ou ocultar campos se um utilizador selecionar mais do que uma opção no menu pendente.

Por exemplo, no nosso formulário de inquérito sobre clubes desportivos, mostraremos uma mensagem aos utilizadores se seleccionarem Natação e Dança no menu pendente. Na nossa mensagem, informamo-los de que estes clubes se reúnem em horários diferentes.

Para configurar isto, vamos primeiro adicionar um campo HTML ao nosso formulário.

Campo Add-HTML

Depois, na secção Código, podemos acrescentar a nossa mensagem: "Atenção! Os clubes que escolheu reúnem-se em horários diferentes".

Mensagem HTML

Depois disso, teremos de configurar a nossa lógica condicional para que o campo só apareça quando os utilizadores seleccionarem Natação e Dança. Para tal, clicamos na secção Lógica inteligente para a abrir e, em seguida, seleccionamos a opção Ativar lógica condicional.

Ativar a lógica condicional

Depois, definimos a lógica para ler: Mostrar este campo se Selecionar o(s) clube(s) sobre o(s) qual(is) gostaria de saber mais for Natação E Selecionar o(s) clube(s) sobre o(s) qual(is) gostaria de saber mais for Dança.

Regras de lógica condicional

Este campo permanecerá oculto, a menos que um utilizador selecione Natação e Dança no nosso campo pendente.

Aviso HTML Desdobráveis de seleção múltipla

Nota: Para mais informações sobre como utilizar o operador AND, consulte o nosso guia sobre Lógica condicional inteligente.

É isso aí! Agora você pode configurar um campo Dropdown de seleção múltipla em seus WPForms.

A seguir, gostaria de adicionar facilmente um grande número de opções a um campo pendente, de escolha múltipla ou de caixas de verificação? Consulte o nosso tutorial sobre como adicionar opções em massa para obter mais pormenores!

O melhor plug-in de criação de formulários de arrastar e soltar do WordPress

Fácil, rápido e seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

Active o JavaScript no seu browser para preencher este formulário.