Resumo de IA
Gostaria de adicionar um Controle Deslizante de Números aos seus formulários do WordPress? Um campo de Controle Deslizante de Números permite que seus usuários cliquem e arrastem facilmente um seletor para escolher um valor em uma linha numérica.
Este tutorial mostrará como usar o campo Controle Deslizante de Números no WPForms.
Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para acessar o construtor de formulários.
Adicionando um Campo de Controle Deslizante de Números ao Seu Formulário
Após abrir o construtor de formulários, procure em Campos Padrão para encontrar a opção Controle Deslizante de Números. Simplesmente clique nele ou arraste e solte-o na área de visualização para adicioná-lo ao seu formulário.
Configurando as Opções do Campo de Controle Deslizante de Números
Depois de adicionar o campo ao seu formulário, clique nele na área de visualização para abrir seu painel de Opções de Campo. Abaixo, detalharemos cada configuração disponível aqui, usando um formulário de reserva de restaurante como exemplo.
Rótulo e Descrição
Nas opções do campo Controle Deslizante de Números, você pode personalizar seu rótulo e descrição. O rótulo será "Controle Deslizante de Números" por padrão, mas você pode alterá-lo para o que desejar.
Para nosso exemplo de reserva de restaurante, alteraremos o rótulo para "Quantas pessoas estarão em seu grupo?"
A descrição do campo oferece a oportunidade de adicionar texto extra ao seu formulário, como instruções sobre como usar o controle deslizante de números. Você pode inserir qualquer texto que desejar no campo fornecido.
Valores Mínimo e Máximo
Você também pode personalizar os valores mínimo e máximo que um usuário pode selecionar nas configurações de Valor. Os valores padrão serão de 0 a 10, mas você pode substituí-los por quaisquer números inteiros que desejar.
Para nosso exemplo, definiremos o mínimo para 1 pessoa e o máximo para 20 pessoas.
Configurando as Opções Avançadas do Controle Deslizante de Números
Você pode personalizar o tamanho do campo, o valor padrão e o valor de incremento na aba Avançado do painel de opções de campo. Clique nele no construtor de formulários para acessar essas configurações adicionais.
Tamanho do Campo
Por padrão, o Tamanho do Campo está definido como Médio. No entanto, você tem a opção de alterar o comprimento do seu controle deslizante para Pequeno, Médio ou Grande.
Abaixo estão exemplos de como cada tamanho de campo ficará no frontend do seu site:
Valor Padrão
O Valor Padrão determina onde o controle deslizante será definido quando os usuários abrirem seu formulário. Ele será definido automaticamente para o valor mínimo que você escolher nas opções de campo.
No entanto, você pode ajustá-lo para qualquer número inteiro dentro do intervalo do seu controle deslizante de números, inserindo o valor desejado no campo Valor Padrão.
Observação: Para mais detalhes sobre como definir valores padrão para os campos dos seus formulários, confira nosso tutorial completo sobre esta opção.
Exibição do Valor
Por padrão, o rótulo abaixo do seu controle deslizante exibirá "Valor Selecionado: {value}.". A tag {value} puxa o número que está atualmente selecionado pelo usuário para que ele possa verificar se está correto.
Você pode alterar o que o rótulo exibe em Exibição do Valor.
No entanto, recomendamos deixar a tag {value} no lugar para que os usuários possam confirmar sua seleção.
Observação: Quer permitir que os usuários revisem todas as informações que inseriram no seu formulário antes de enviá-lo? Confira nosso tutorial sobre como exibir pré-visualizações de entradas no WPForms para todos os detalhes.
Incremento
Esta configuração determina o tamanho do passo para cada aumento na posição do controle deslizante. Por exemplo, se você definir esta configuração como 2, cada aumento adicionará 2 ao valor selecionado (0, 2, 4, 6, etc.).
Por padrão, o valor de incremento será definido como 1. No entanto, você pode editá-lo para qualquer número inteiro que desejar na configuração Incremento.
Observação: Se você optar por incrementar seu valor por um número par, mas seu valor máximo for ímpar (ou vice-versa), o controle deslizante de números parará no número anterior ao seu valor máximo.
Configurando a Lógica Condicional
Se desejar, você também pode mostrar aos usuários que selecionam um determinado valor uma mensagem usando lógica condicional.
Para o nosso exemplo de reserva de restaurante, mostraremos uma mensagem aos usuários que indicarem que o grupo terá mais de 10 pessoas. Em nossa mensagem, informaremos que uma taxa de gorjeta automática de 20% será adicionada à conta deles.
Para configurar isso, primeiro adicionaremos um campo HTML ao nosso formulário com o texto “Observação: Uma gorjeta de 20% será adicionada automaticamente à sua conta para grupos acima de 10 pessoas.”
Em seguida, configuraremos a lógica condicional para que este campo HTML apareça apenas se um usuário escolher um número maior que 10 usando o controle deslizante de números. Para fazer isso, clique na guia Lógica Inteligente no painel Opções de Campo para o campo HTML e ative a configuração para Ativar Lógica Condicional.
Em seguida, defina a regra que determina quando o campo aparecerá. Para este exemplo, definiremos a lógica para exibir: “Mostrar este campo se Quantas pessoas estarão no seu grupo? for maior que 10.“
Observação: Precisa de ajuda para configurar sua regra de lógica condicional? Nosso tutorial para iniciantes sobre como usar a lógica condicional no WPForms tem todos os detalhes.
O campo HTML permanecerá oculto, a menos que o usuário selecione um valor maior que 10 no campo Controle Deslizante de Números.
É isso! Agora você pode adicionar e personalizar um campo de Controle Deslizante de Números para qualquer um dos seus formulários.
Em seguida, você gostaria de aprender a analisar os dados que coletou? Certifique-se de conferir nosso tutorial sobre o complemento Surveys and Polls para obter detalhes sobre como visualizar estatísticas de entrada, gerar relatórios e muito mais.