Resumo de IA
Gostaria de adicionar uma Barra Deslizante Numérica aos seus formulários WordPress? Um campo de Barra Deslizante Numérica permite que os seus utilizadores cliquem e arrastem facilmente um seletor para escolher um valor numa linha numérica.
Este tutorial irá mostrar-lhe como utilizar o campo de Barra Deslizante Numérica no WPForms.
Antes de começar, primeiro precisa de garantir que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença. Depois, pode criar um novo formulário ou editar um existente para aceder ao construtor de formulários.
Adicionar um Campo de Barra Deslizante Numérica ao Seu Formulário
Após abrir o construtor de formulários, procure em Campos Padrão para encontrar a opção Barra Deslizante Numérica. Simplesmente clique nela ou arraste e solte-a na área de pré-visualização para a adicionar ao seu formulário.
Configurar as Opções do Campo de Barra Deslizante Numérica
Depois de adicionar o campo ao seu formulário, clique nele na área de pré-visualização para abrir o seu painel de Opções de Campo. Abaixo, iremos percorrer 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 Barra Deslizante Numérica, pode personalizar o seu rótulo e descrição. O rótulo terá por defeito "Barra Deslizante Numérica", mas pode alterá-lo para o que desejar.
Para o nosso exemplo de reserva de restaurante, alteraremos o rótulo para "Quantas pessoas estarão no seu grupo?"
A descrição do campo dá-lhe a oportunidade de adicionar texto extra ao seu formulário, como instruções sobre como usar a barra deslizante numérica. Pode inserir qualquer texto que desejar no campo fornecido.
Valores Mínimo e Máximo
Também pode personalizar os valores mínimo e máximo que um utilizador pode selecionar nas configurações de Valor. Os valores padrão serão de 0 a 10, mas pode substituí-los por quaisquer números inteiros que desejar.
Para o nosso exemplo, definiremos o mínimo para 1 pessoa e o máximo para 20 pessoas.
Configurar as Opções Avançadas da Barra Deslizante Numérica
Pode personalizar o tamanho do campo, o valor padrão e o valor de incremento no separador Avançado do painel de opções de campo. Clique nele no construtor de formulários para aceder a estas configurações adicionais.
Tamanho do Campo
Por defeito, o Tamanho do Campo está definido como Médio. No entanto, tem a opção de alterar o comprimento da sua barra deslizante para Pequeno, Médio ou Grande.
Abaixo estão exemplos de como cada tamanho de campo aparecerá no frontend do seu site:
Valor Padrão
O Valor Padrão determina onde a barra deslizante será definida quando os utilizadores abrirem o seu formulário. Será automaticamente definida para o valor mínimo que escolher nas opções de campo.
No entanto, pode ajustá-lo para qualquer número inteiro dentro do intervalo do seu controlo deslizante de números, introduzindo o valor desejado no campo Valor Padrão.
Nota: Para mais detalhes sobre como definir valores padrão para os campos dos seus formulários, consulte o nosso tutorial completo sobre esta opção.
Exibição do Valor
Por predefinição, o rótulo abaixo do seu controlo deslizante dirá: “Valor Selecionado: {value}.” A etiqueta {value} recupera o número que está atualmente selecionado pelo utilizador para que ele possa verificar se está correto.
Pode alterar o que o rótulo diz em Exibição do Valor.
No entanto, recomendamos que mantenha a etiqueta {value} no lugar para que os utilizadores possam confirmar a sua seleção.
Nota: Quer permitir que os utilizadores revejam todas as informações que introduziram no seu formulário antes de o submeterem? Consulte o 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 controlo deslizante. Por exemplo, se esta configuração estivesse definida para 2, cada aumento adicionaria 2 ao valor selecionado (0, 2, 4, 6, etc.).
Por predefinição, o valor de incremento será definido como 1. No entanto, pode editá-lo para qualquer número inteiro que desejar na configuração Incremento.
Nota: Se optar por incrementar o seu valor por um número par, mas o seu valor máximo for ímpar (ou vice-versa), o controlo deslizante de números parará no número anterior ao seu valor máximo.
Configurar Lógica Condicional
Se desejar, também pode mostrar aos utilizadores que selecionam um determinado valor uma mensagem utilizando lógica condicional.
Para o nosso exemplo de reserva de restaurante, mostraremos uma mensagem aos utilizadores que indicarem que o seu grupo será superior a 10 pessoas. Na nossa mensagem, informá-los-emos que uma taxa de gorjeta automática de 20% será adicionada à sua conta.
Para configurar isto, adicionaremos primeiro um campo HTML ao nosso formulário com o texto “Nota: Uma gorjeta de 20% será automaticamente adicionada à sua conta para grupos superiores a 10 pessoas.”
Em seguida, configuraremos a lógica condicional para que este campo HTML só apareça se um utilizador escolher um número superior a 10 utilizando o controlo deslizante de números. Para fazer isto, clique no separador Lógica Inteligente no painel Opções do 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 dizer: “Mostrar este campo se Quantas pessoas estarão no seu grupo? for superior a 10.“
Nota: Precisa de ajuda para configurar a sua regra de lógica condicional? O 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 utilizador selecione um valor superior a 10 no campo Number Slider.
É tudo! Agora pode adicionar e personalizar um campo Number Slider para qualquer um dos seus formulários.
Em seguida, gostaria de aprender como analisar os dados que recolheu? Certifique-se de que consulta o nosso tutorial sobre o addon Surveys and Polls para obter detalhes sobre como ver estatísticas de entradas, gerar relatórios e muito mais.