Resumo de IA
Quer mostrar ou ocultar campos de formulário com base na idade de um utilizador? Ao combinar o campo Seletor de Data do WPForms com lógica condicional personalizada, pode criar formulários dinâmicos que se adaptam à entrada do utilizador.
Este guia irá mostrar-lhe como exibir um campo de lista pendente apenas quando o utilizador indicar que tem 21 anos ou mais – perfeito para conteúdo restrito à idade, registos de eventos ou cenários semelhantes.
Configurar o 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 pendente (este estará oculto inicialmente)
Se precisar de ajuda para criar o seu formulário, consulte o nosso guia sobre criar o seu primeiro formulário.
Adicionar a Classe CSS
Como queremos que o campo Lista pendente fique oculto quando o formulário é carregado pela primeira vez, precisamos de lhe adicionar um nome de classe CSS.
Para o fazer, selecione o campo Lista pendente no seu editor de formulários e clique em Avançadas. Em seguida, navegue até Classes CSS e introduza age-restriction. Certifique-se de que clica em Guardar no formulário para preservar as suas alterações.
Utilizar Lógica Condicional para um campo de Data
Agora é hora de adicionar o trecho de código ao seu site. Este código ocultará primeiro o campo Lista pendente quando o formulário for carregado. Em seguida, sempre que o campo Data de Nascimento for alterado, calculará se o utilizador tem 21 anos ou mais e mostrará ou ocultará o campo Lista pendente em conformidade.
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 o que precisa para usar Lógica Condicional com um campo seletor de data. Em seguida, gostaria de alterar a posição do popup do seletor de data? Veja o nosso tutorial sobre Como Alterar a Posição do Popup do Seletor de Data.