Como Adicionar um Slider de Intervalo Numérico em Formulários do WordPress (Grátis)

Os controles deslizantes de intervalo numérico em um formulário parecem muito legais e isso, por si só, é um benefício importante, pois 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 controle deslizante de intervalo numérico em seus formulários do WordPress? Vou guiá-lo pela maneira mais simples de conseguir isso aqui mesmo.

Crie um Formulário com Slider Numérico Agora

O que é um Controle Deslizante de Intervalo do WordPress?

Um controle deslizante de intervalo do WordPress é um campo de formulário que permite às pessoas escolher um número arrastando uma alça ao longo de uma trilha em vez de digitá-lo.

Você define os valores mais baixos e mais altos que o campo aceita, e seu visitante escolhe qualquer número dentro desse intervalo. Essa pequena mudança faz algumas coisas úteis:

• Campos mais concluídos: Arrastar é mais rápido do que digitar, então as pessoas são menos propensas a deixar o campo em branco ou pular.
• Respostas de melhor qualidade: Você obtém um valor real em vez de uma estimativa vaga, o que torna o controle deslizante uma ferramenta de geração de leads genuinamente útil quando você faz o acompanhamento.
• Funciona em telefones: Uma alça de controle deslizante é mais fácil de acertar em uma tela sensível ao toque do que uma entrada numérica, e fica bem em qualquer tema do WordPress que você esteja usando.
• Nada para aprender: Seu visitante arrasta para a esquerda ou para a direita, portanto, não há formato para errar e nenhum erro de validação para encontrar.

O WPForms chama esse campo de Controle Deslizante Numérico, e ele fica no grupo Campos Padrão do construtor de formulários. Siga as etapas abaixo para começar:

Como Adicionar um Controle Deslizante de Intervalo Numérico no WordPress

Passo 1: Instale o Plugin WPForms

A maneira mais fácil de inserir um controle deslizante de intervalo numérico em seu formulário é usar o WPForms, que é o plugin de formulários do WordPress mais amigável para iniciantes e vem equipado com uma tonelada de recursos avançados de criação de formulários.

O que eu mais gosto no WPForms é que ele oferece um campo nativo de Controle Deslizante Numérico. Você o arrasta, define um mínimo e um máximo, e o rótulo sob a barra começa a relatar o valor selecionado por conta própria.

Embora você possa usar o WPForms Lite (a versão gratuita) para criar um formulário com o controle deslizante de intervalo numérico, usarei o WPForms Pro para este tutorial, pois isso abre toneladas de possibilidades extras para usar o campo deslizante 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 controle deslizante numérico.

Crie seu formulário WordPress agora

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 controle deslizante de intervalo numérico ao seu formulário. Você pode simplesmente arrastar o campo Controle Deslizante 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 controle deslizante.
• Descrição – Isso ajuda a fornecer contexto adicional, se necessário.
• Valor – Defina os valores mínimo e máximo selecionáveis para o controle deslizante.
• 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.

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.

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 estiver nisso, também recomendo 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.

Você pode então 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 no topo do construtor de formulários.

Em seguida, você verá um modal perguntando se deseja 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 agora 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 numérico em seu site, e os visitantes podem começar a usá-lo imediatamente, sem complicações.

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!

Perguntas Frequentes sobre Controles Deslizantes de Intervalo do WordPress

Um controle deslizante de intervalo no WordPress levanta o mesmo punhado de perguntas todas as vezes, principalmente sobre o que a versão gratuita cobre e onde ficam os limites do campo. Estas são as que surgem com mais frequência.

O controle deslizante de números está disponível gratuitamente no WPForms?

Sim, o Controle Deslizante Numérico é um Campo Padrão, portanto, está incluído no WPForms Lite sem custo e não precisa de um complemento separado.

Você só precisa de uma licença paga para o que você constrói em torno dele, especificamente lógica condicional no Básico e acima, e cálculos no Pro.

Posso definir um valor inicial padrão para o controle deslizante?

Você pode, e a configuração é chamada Valor Padrão, localizada na aba Avançado das opções do campo. Ela corresponde ao seu valor mínimo até que você a altere, então digite qualquer número inteiro dentro do seu intervalo para mover a posição inicial.

Posso fazer o controle deslizante travar em incrementos específicos?

É exatamente para isso que serve a configuração de Incremento, pois ela controla o tamanho do passo entre um valor selecionável e o próximo.

Um incremento de 5 em um controle deslizante de 0 a 100 oferece 0, 5, 10 e assim por diante. Apenas certifique-se de que seu incremento divida igualmente seu intervalo, ou a alça parará antes do seu máximo.

Como exibo o valor atualmente selecionado ao lado do controle deslizante?

A configuração Exibição de Valor na aba Avançado cuida disso, e está ativada por padrão. O texto diz Valor Selecionado: {value}, onde {value} atualiza em tempo real conforme seu visitante arrasta a alça.

Você pode reescrever a redação em torno desse espaço reservado para o que quiser, que é como você adiciona um símbolo de moeda ou um rótulo de unidade.

Posso usar um controle deslizante de intervalo com duas alças para um mínimo e um máximo?

Não com um único campo, porque o Controle Deslizante Numérico tem uma alça e você define o intervalo em que ele se move.

Se você precisar que seu visitante selecione um intervalo, adicione dois campos de Controle Deslizante Numérico rotulados como Mínimo e Máximo. Ambos os valores são salvos na entrada separadamente, para que sejam fáceis de ler e agir depois.

O controle deslizante de números suporta decimais?

Não, o campo funciona apenas com números inteiros, e isso se aplica ao mínimo, máximo, valor padrão e incremento igualmente.

Quando precisar de precisão decimal, use o campo Números em vez disso. Ele tem sua própria configuração de Intervalo para valores mínimo e máximo, e seu visitante digita o número em vez de arrastar para ele.

Como personalizo a aparência do meu controle deslizante?

A barra e a alça do controle deslizante recebem a cor do seu botão de envio, juntamente com a barra de progresso e os marcadores de rádio, o que mantém tudo no formulário visualmente consistente.

Portanto, alterar a cor do botão de envio nas opções de estilo do editor de blocos também altera seu controle deslizante. Você também pode alternar o Tamanho do Campo entre Pequeno, Médio e Grande, e editar o rótulo no construtor de formulários.

Em seguida, Crie um Formulário Calculadora Com Seu Controle Deslizante

O próximo passo óbvio é colocar esse controle deslizante para funcionar dentro de uma fórmula, para que o preço se mova em tempo real enquanto seu visitante decide.

Esse é o motivo pelo qual a maioria das pessoas adiciona um controle deslizante a um formulário em primeiro lugar, e ele transforma um campo de coleta de dados em um campo de venda.

Se você preferir direcionar o controle deslizante para feedback em vez de precificação, estes exemplos de pesquisa NPS mostram como uma escala de 0 a 10 funciona como uma pergunta de satisfação e o que fazer com as respostas que você recebe.

Adicione um Controle Deslizante de Intervalo Numérico ao Seu Formulário Agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.