Resumo de IA
Quer mostrar ou ocultar campos de formulário com base na idade do usuário? Combinando o campo Seletor de Data do WPForms com lógica condicional personalizada, você pode criar formulários dinâmicos que se adaptam à entrada do usuário.
Este guia mostrará como exibir um campo de lista suspensa somente quando o usuário indicar que tem 21 anos ou mais – perfeito para conteúdo restrito por idade, registros de eventos ou cenários semelhantes.
Configurando Seu Formulário
Primeiro, crie um formulário com estes campos:
- Campo de nome
- Campo de E-mail
- Campo de data (para Data de Nascimento)
- Campo de lista suspensa (este ficará oculto inicialmente)
Se precisar de ajuda para criar seu formulário, consulte nosso guia sobre como criar seu primeiro formulário.
Adicionando a Classe CSS
Como queremos que o campo Lista Suspensa fique oculto quando o formulário for carregado pela primeira vez, precisamos adicionar um nome de classe CSS a ele.
Para fazer isso, selecione o campo Lista Suspensa no editor do seu formulário e clique em Avançado. Em seguida, role para baixo até Classes CSS e insira age-restriction. Certifique-se de clicar em Salvar no formulário para manter suas alterações.
Usando Lógica Condicional para um campo de Data
Agora é hora de adicionar o trecho de código ao seu site. Este código primeiro ocultará o campo Lista Suspensa quando o formulário for carregado. Em seguida, sempre que o campo Data de Nascimento for alterado, ele calculará se o usuário tem 21 anos ou mais e mostrará ou ocultará o campo Lista Suspensa de acordo.
Lembre-se de atualizar estes valores no código:
- O ID do formulário (2575 no exemplo) deve ser substituído pelo seu próprio ID de formulário
- O ID do campo Seletor de Data (22 no exemplo) deve ser substituído pelo seu ID de campo
E é tudo que você precisa para usar a Lógica Condicional com um campo seletor de data. Em seguida, você gostaria de alterar a posição do pop-up do seletor de data? Confira nosso tutorial sobre Como Alterar a Posição do Pop-up do Seletor de Data.