Resumo de IA
Sliders de intervalo numérico em um formulário parecem muito legais. Isso por si só é um benefício importante – os visitantes provavelmente confiarão mais em você se estiver usando formulários visualmente impressionantes que refletem profissionalismo.
Além disso, sliders de intervalo numérico adicionam um maior nível de interatividade aos seus formulários. A interatividade cria engajamento, e são seus visitantes engajados que acabam convertendo.
Então, como você adiciona um slider de intervalo numérico em seus formulários WordPress?
Vou guiá-lo pela maneira mais simples de conseguir isso aqui mesmo.
Crie um Formulário com Slider Numérico Agora
Neste Artigo
Como Criar um Formulário com um Slider de Intervalo Numérico
Passo 1: Instalar o WPForms
A maneira mais fácil de inserir um slider de intervalo numérico em seu formulário é usar o plugin WPForms. Embora você possa usar o WPForms Lite (a versão gratuita) para criar um formulário com o slider de intervalo numérico, usarei o WPForms Pro para este tutorial, pois isso abre muitas possibilidades extras para usar o campo slider de maneiras interessantes.

Se você não sabe como instalar o plugin, clique neste guia para instruções de instalação do WPForms.
Isso levará apenas alguns minutos. Quando o WPForms estiver pronto em seu site, você poderá começar a criar um formulário com o slider numérico.
Etapa 2: Crie um Formulário Simples
No seu painel do WordPress, navegue até WPForms » Adicionar Novo para criar um novo formulário.

Imediatamente, você verá a tela de configuração do formulário aparecer em sua janela. Aqui, você pode inserir um nome para o seu formulário e selecionar um modelo.
Você pode construir seu formulário totalmente do zero (começando com um modelo em branco) ou pode usar um modelo pronto para tornar as coisas ainda mais rápidas para você.
Para este post, usarei o modelo Formulário de Contato Simples para demonstrar como você pode trabalhar com um modelo para inserir campos adicionais como o slider numérico.

Após selecionar o modelo, você será levado à interface do construtor de formulários, onde poderá prosseguir para incorporar o formulário diretamente em seu site ou personalizá-lo ainda mais.

Na próxima etapa, exploraremos o campo de slider de intervalo numérico e suas configurações associadas.
Etapa 3: Adicione um Slider de Intervalo Numérico
Agora vamos adicionar um slider de intervalo numérico ao seu formulário.
Você pode simplesmente arrastar o campo Slider Numérico do menu Campos Padrão à sua esquerda para o seu formulário à direita.

Para alterar algumas das configurações e o comportamento deste campo, clique no Slider Numérico que você acabou de adicionar. Você verá as Opções de Campo aparecerem no painel esquerdo agora.

Essas opções permitem que você altere:
- Rótulo – Use isso para adicionar um nome que represente a quantidade controlada pelo slider
- Descrição – Isso ajuda a fornecer contexto adicional, se necessário
- Valor – Defina os valores mínimo e máximo selecionáveis para o slider
- Valor Padrão – Este é o valor que o campo assumirá quando o formulário for carregado pela primeira vez
- Incremento – Permite escolher a quantidade de incremento entre cada valor selecionável.
💡 Dica Pro: Se você tem o WPForms Pro, também pode usar o campo Number Slider para cálculos. Este modelo de calculadora de desconto por volume é um ótimo exemplo.
Por fim, você pode adicionar quaisquer campos adicionais ao seu formulário de controle deslizante de intervalo arrastando-os do lado esquerdo para o lado direito.
Quando terminar de personalizar seu formulário de controle deslizante de intervalo, clique em Salvar no canto superior direito.
🧮 Crie um Formulário WordPress com um Controle Deslizante de Números
Etapa 4: Configure as Notificações e Confirmações do Formulário
O WPForms envia automaticamente uma notificação toda vez que seu formulário é enviado.
Você pode personalizar as notificações do formulário acessando Configurações » Notificações.

Aqui, você pode escolher os destinatários de sua notificação (que pode ser o e-mail do seu administrador, a pessoa que envia o formulário ou qualquer outro e-mail codificado que você queira inserir). Usuários do WPForms Basic e superior também podem criar várias notificações de formulário.
Enquanto isso, recomendo também verificar as confirmações do seu formulário. A confirmação aparece imediatamente após o envio de um formulário. Isso pode ser tão simples quanto uma mensagem ou um redirecionamento para uma página diferente, dependendo da sua estratégia.
Você pode personalizar as confirmações acessando Configurações » Confirmações.

Em seguida, você pode selecionar o tipo de confirmação (Mensagem, Mostrar Página, Redirecionar para URL) que deseja e inserir a mensagem e outros detalhes conforme necessário.

Quando terminar, pressione Salvar novamente na parte superior do construtor de formulários. É hora de incorporar seu formulário!
Etapa 5: Adicione seu Formulário com Slider Numérico ao seu Site
Depois de criar seu formulário, você precisa adicioná-lo ao seu site WordPress. O WPForms permite que você adicione seus formulários a vários locais em seu site, incluindo posts do blog, páginas e até mesmo widgets de barra lateral.
Vamos dar uma olhada na opção de posicionamento mais comum: incorporação em página/post.
Para começar, clique no botão Incorporar na parte superior do construtor de formulários.

Em seguida, você verá uma janela modal perguntando se você gostaria de incorporar este formulário em uma nova página ou em uma existente. Vamos com a última opção e clicar em Criar Nova Página.

Dê um nome à sua página e, em seguida, pressione o botão Vamos Lá.

Você se encontrará dentro do editor de blocos do WordPress com o formulário incorporado. Se desejar, você pode estilizar seu formulário usando o editor de blocos sem nenhum código.
Quando estiver pronto, pressione o botão Publicar para colocar sua página com o formulário incorporado no ar.

Agora você poderá ver seu formulário de controle deslizante de intervalo de números em seu site, e os visitantes poderão começar a usá-lo imediatamente.

Para visualizar as entradas do formulário após o envio, confira este guia completo sobre entradas de formulário. Por exemplo, você pode visualizar, pesquisar, filtrar, imprimir e excluir quaisquer entradas de formulário.
E aí está! Agora você sabe como criar um formulário com um controle deslizante de intervalo de números no WordPress usando o plugin WPForms para que você possa obter facilmente envios detalhados de formulários de seus visitantes do site!
Crie um Formulário com Slider Numérico Agora
Perguntas Frequentes sobre Formulários com Slider Numérico
Aqui estão algumas perguntas que frequentemente recebemos de nossos usuários interessados em usar um controle deslizante de números em seus formulários:
Por que Usar um Controle Deslizante de Intervalo de Números?
Usar um controle deslizante de intervalo de números em seus formulários WordPress oferece vários benefícios, como:
- Detalhes Adicionais — Obtenha informações adicionais das pessoas que preenchem seu formulário facilmente. Como tem uma sensação tão interativa, seus visitantes têm muito mais chances de completar um campo de controle deslizante de intervalo numérico solicitando mais detalhes.
- Leads de Maior Qualidade — Com detalhes adicionais sobre seus leads desde o início, seus leads se tornam ainda melhores, tornando um formulário de controle deslizante de intervalo uma ótima ferramenta de geração de leads.
- Responsivo — O campo de controle deslizante de intervalo numérico fica ótimo em todos os dispositivos. Você pode manter seu site e tema WordPress responsivo com boa aparência adicionando este campo.
- Fácil de Usar — Assim que o controle deslizante numérico for adicionado ao seu formulário, seus leads e clientes poderão usá-lo facilmente. Tudo o que eles precisam fazer é simplesmente arrastá-lo para frente e para trás para ajustar o valor.
Posso definir um valor inicial padrão para o controle deslizante?
Sim, você pode facilmente definir um valor inicial padrão para o seu formulário de controle deslizante. No WPForms, essa configuração é acessível nas Opções de Campo do campo Controle Deslizante Numérico e é rotulada como Valor Padrão. Você pode digitar qualquer valor numérico aqui para definir o padrão.
Esta configuração pode variar se você estiver usando um construtor de formulários diferente.
Posso fazer o controle deslizante travar em incrementos específicos?
Com certeza! O Controle Deslizante Numérico do WPForms permite que você defina um valor de incremento. Isso determina os “passos” de incremento entre um valor e o próximo.
Como exibo o valor atualmente selecionado ao lado do controle deslizante?
O Campo Numérico no WPForms é configurado automaticamente para exibir o valor selecionado atual. Isso é atualizado dinamicamente à medida que seu visitante ajusta o controle deslizante, fornecendo feedback visual instantâneo para uma experiência de usuário ideal.
Como personalizo a aparência do meu controle deslizante?
A cor do controle deslizante, barra de progresso, marcadores de campo de rádio e vários outros elementos no WPForms estão todos conectados à cor do botão de envio. Isso é para garantir a consistência temática entre seu botão de envio e outros elementos interativos do seu formulário.
Portanto, você pode alterar a cor do seu controle deslizante numérico alterando a cor do botão de Envio nas opções fáceis de estilização do WPForms disponíveis no editor de blocos do WordPress.
Você também pode editar o rótulo do seu controle deslizante e a largura do campo ao editar seu formulário usando o construtor de formulários.
Quais são as melhores aplicações para controles deslizantes de intervalo numérico em formulários da web?
O controle deslizante de intervalo numérico é perfeito para usar quando você deseja que os visitantes possam selecionar uma quantidade de um intervalo predefinido.
Alguns exemplos práticos onde vimos nossos clientes empregarem controles deslizantes de intervalo numérico incluem:
- Cotação/Estimativas: Um controle deslizante de intervalo numérico funciona muito bem quando seus recursos de cálculo são usados para oferecer uma cotação em tempo real. Como é ajustável, é relativamente fácil para os visitantes verem como a cotação muda à medida que selecionam seus requisitos em um controle deslizante.
- Seleção de Orçamento: Empreiteiros frequentemente usam controles deslizantes para permitir que os clientes indiquem seu orçamento a partir de um intervalo cuidadosamente escolhido de valores mínimo e máximo.
- Duração do Serviço: Se você é um provedor de serviços que aceita agendamentos de durações variáveis, um controle deslizante de números pode ajudar os clientes a escolher a duração do seu serviço necessária em uma variedade de opções pré-determinadas.
- Perguntas da Pesquisa: Certas perguntas de pesquisa são fáceis de responder com um controle deslizante de números. Por exemplo, perguntas sobre renda familiar ou idade do respondente podem ser transformadas em um formato de controle deslizante.
- Avaliações de Bem-Estar: Em um ambiente de saúde, formulários deslizantes são frequentemente usados para avaliar o nível de dor, estresse mental, qualidade do sono e outras perguntas semelhantes.
Estes são apenas alguns exemplos. Você pode usar o controle deslizante de números em uma vasta variedade de cenários.
Em seguida, explore exemplos de pesquisas NPS
Quer saber o que os visitantes do seu site estão pensando? Acesse esta postagem com exemplos de pesquisas NPS para ver como é fácil colocar uma pesquisa em seu site e coletar feedback valioso.
Então, o que você está esperando? Comece hoje mesmo com o mais poderoso plugin de formulários WordPress. O WPForms Pro vem com um formulário de controle deslizante de intervalo numérico gratuito e tem garantia de devolução do dinheiro em 14 dias.
E não se esqueça, se você gostou deste artigo, siga-nos no Facebook e Twitter.

Como posso alterar um valor com base no valor do controle deslizante?
Olá Qasim! Você pode alterar os Valores do seu Controle Deslizante de Números em Opções de Campo > Opções Avançadas > Exibição de Valor. Mais detalhes sobre isso podem ser encontrados em nossa documentação.
Espero que isso ajude a esclarecer 🙂 Se você tiver mais alguma dúvida sobre isso, por favor entre em contato conosco se tiver uma assinatura ativa. Se não tiver, não hesite em nos fazer algumas perguntas em nossos fóruns de suporte.
Olá, adicionei um controle deslizante ao meu formulário, o problema é que o valor não é exibido quando o adiciono ao meu site, então as pessoas que usam o formulário terão que adivinhar se usarem o controle deslizante, o que estou fazendo de errado??
Olá John - Sinto muito pelo problema que você está enfrentando! Teríamos o maior prazer em ajudar! Quando tiver um tempo, por favor, nos envie uma mensagem no suporte para que possamos ajudar.
Se você tiver uma licença do WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte. Dessa forma, podemos discutir mais detalhes e investigar isso mais a fundo. Caso contrário, oferecemos suporte complementar limitado no fórum de suporte do WPForms Lite no WordPress.org.
Obrigado 🙂
Como altero a cor do círculo no controle deslizante?
Olá Wayne - Atualmente, não temos a opção de estilizar o círculo do controle deslizante de números. Concordo que seria super útil, no entanto. Fiz uma anotação da solicitação de recurso e a manteremos em nosso radar enquanto planejamos nosso roteiro para o futuro.
Obrigado!
Tentei de várias maneiras, mas falhei. Alguém pode me dizer como posso adicionar validação extra ao controle deslizante de intervalo numérico?
Não quero usar um limite, quero uma função de validação personalizada para todos os formulários do meu site. não um único formulário e um único ID de campo. Preciso obter o ID do campo dinamicamente se usar o hook wpforms_process.
Alguma ideia?
Olá Sabbir,
Para garantir que possamos responder à sua pergunta da forma mais completa possível, você poderia, por favor, entrar em contato com nossa equipe de suporte com mais alguns detalhes sobre o que você deseja fazer?
Obrigado! 🙂
Olá,
há alguma maneira de separar milhares e milhões com espaço ou vírgula?
Olá JS,
Você pode usar a máscara de entrada personalizada para conseguir isso 🙂
Olá,
Quando o formulário é enviado, os valores do slider que eram de 1 a 9 vão da seguinte forma:
ex.
1 (1 min / 9 max)
Queremos mostrar apenas o valor selecionado que foi 1, NÃO os valores mínimo e máximo (1 min / 9 max) no e-mail.
Olá Waheed – Sinto muito por saber do problema.
Acabei de tentar aqui e estou recebendo apenas o valor selecionado como neste exemplo. Para ajudar ainda mais, se você tiver uma licença WPForms, terá acesso ao nosso suporte por e-mail, então por favor envie um ticket de suporte.
Obrigado 🙂