como-criar-um-formulario-com-um-slider-de-intervalo-numerico_b

Como Criar um Formulário com um Slider de Intervalo Numérico no WordPress

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

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.

A página inicial do WPForms

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.

Adicionar 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.

Use o modelo de formulário de contato simples

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.

Formulário de contato simples

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.

Controle deslizante de número

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.

Opções do campo slider numérico

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.

Notificações de formulário

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.

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.

Configurações de confirmação

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.

Incorporar formulário

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.

Criar nova página

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

Dê um nome à sua página

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.

Publicar formulário

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.

Formulário Slider Numérico publicado

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPForms é financiado, por que isso importa e como você pode nos apoiar.

Osama Tahir

Osama é Redator Sênior no WPForms. Ele se especializa em desmontar plugins do WordPress para testes e compartilhar suas percepções com o mundo. Saiba Mais

O Melhor Plugin Construtor de Formulários de Arrastar e Soltar para WordPress

Fácil, Rápido e Seguro. Junte-se a mais de 6 milhões de proprietários de sites que confiam no WPForms.

12 comentários em “Como Criar um Formulário com um Controle Deslizante de Intervalo Numérico no WordPress

    1. 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.

  1. 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??

    1. 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 🙂

    1. 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!

  2. 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?

  3. 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.

Adicionar um comentário

Ficamos felizes que você tenha escolhido deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de privacidade, e todos os links são nofollow. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.

Este formulário é protegido pelo Cloudflare Turnstile e aplicam-se a Política de Privacidade e Termos de Serviço da Cloudflare.