Resumo de IA
Querendo saber como remover o botão de envio de formulários de cálculo para uma melhor experiência do usuário?
Para uma estimativa de hipoteca ou um orçamento de frete, as pessoas querem que o número seja atualizado enquanto digitam, não que cliquem em um botão e esperem a página recarregar.
Ao remover o botão de envio de formulários de cálculo criados pelo WPForms, você pode fornecer cálculos instantâneos aos seus visitantes.
Neste guia, você aprenderá os passos simples para modificar seus formulários para cálculos perfeitos e em tempo real, sem a necessidade de uma ação de envio de formulário.
Por Que Remover o Botão de Envio de um Formulário de Cálculo?
A maioria dos formulários precisa de um botão de envio porque eles enviam dados para algum lugar, como uma solicitação de contato ou um pedido, mas um formulário de calculadora funciona de maneira diferente.
Seu visitante não está enviando nada para você, ele apenas quer uma resposta, como um pagamento mensal de hipoteca ou um custo de frete. Quando o complemento Cálculos atualiza o total ao vivo enquanto as pessoas digitam, o botão de envio não tem mais nada a fazer.
Isso pode até confundir os visitantes, fazendo-os pensar que precisam clicar nele para ver o resultado. Ocultá-lo faz com que o formulário se comporte como uma calculadora real, onde o número simplesmente aparece e se atualiza sozinho.
Portanto, se o seu formulário existe para mostrar um número ao vivo em vez de coletar um envio, remover o botão de envio geralmente é a decisão correta.
Como Remover o Botão de Envio de Formulários de Cálculo
Remover o botão de envio de formulários de cálculo com o WPForms é incrivelmente fácil. Tudo o que você precisa fazer é seguir estes passos simples abaixo:
Os Pré-requisitos
Antes de prosseguirmos com os passos para desativar o botão de envio, vamos garantir que completamos alguns passos importantes.
Se você já completou estes passos, sinta-se à vontade para pular para a seção sobre remover o botão de envio.
1. Ter uma Licença WPForms Pro
WPForms é um construtor de formulários e plugin de calculadora respeitável que permite aos usuários criar uma ampla variedade de formulários, incluindo uma calculadora de dias entre datas.
É importante que você tenha a versão mais recente do WPForms instalada, juntamente com acesso à licença Pro.
A versão Pro oferece acesso a integrações premium, addons e muitos recursos valiosos como lógica condicional, relatórios de envio de formulários, etc.
2. Usar o Addon de Cálculos
Para criar calculadoras personalizadas no WordPress, você provavelmente já sabe que precisa ter o WPForms Calculations Addon instalado.
Você pode usar este addon para inserir operadores lógicos e declarações if-then para criar orçamentos personalizados ou construir calculadoras inteligentes.
Ele permite até que você utilize funções matemáticas integradas para arredondar números, calcular intervalos de tempo, encontrar médias e muito mais.
3. Selecionar um Modelo de Formulário Calculadora
Finalmente, você precisa ter um formulário pronto. Se precisar construir um, o WPForms oferece mais de 2.100 modelos pré-desenhados que tornam a criação de formulários uma brisa.
Estes incluem modelos de formulários de cálculo projetados profissionalmente que podem ser personalizados para se adequar a uma variedade de casos de uso e setores, como:
- Modelo de Formulário de Calculadora de Hipoteca — perfeito para agências imobiliárias, pois permite que potenciais compradores calculem a hipoteca e seus pagamentos mensais sem esforço.
- Modelo de Formulário de Calculadora de Frete — ajuda sites de comércio eletrônico a economizar tempo e esforço, fornecendo uma calculadora de frete simples para os clientes.
- Modelo de Formulário Calculadora de IMC — ideal para sites dedicados à boa forma física ou saúde que ajudam os usuários a avaliar seu estado de saúde atual.
- Modelo de Formulário Calculadora de ROI — ajuda empresas e profissionais de marketing a avaliar com eficiência a lucratividade de suas campanhas ou projetos.
O melhor de tudo: você pode usar o complemento de cálculos para criar calculadoras personalizadas sem nenhum conhecimento de HTML, javascript ou codificação complexa.
Obtenha o WPForms Pro para Criar Sua Calculadora
Removendo o Botão de Envio
Uma vez que esses pré-requisitos sejam atendidos, você estará pronto para modificar seu formulário para remover o botão de envio para uma melhor experiência do usuário.
1. Vá para a Biblioteca de Snippets do WPForms
No seu painel do WordPress, vá para WPForms » Ferramentas. Em seguida, navegue até a guia Snippets de Código.
Isso exibirá uma mensagem pop-up dizendo: “Por favor, instale o WPCode para usar a Biblioteca de Snippets do WPForms.”
2. Instale e Ative o WPCode
Tudo o que você precisa fazer agora é clicar no botão Instalar + Ativar WPCode. O plugin será instalado em alguns segundos.
Assim que o plugin WPCode for instalado, você poderá acessar a lista completa de snippets do WPForms.
3. Use o Snippet Ocultar Botão de Envio
Agora, procure o snippet para ocultar o botão de envio digitando seu nome no campo Pesquisar Snippets. Em seguida, clique no botão Instalar Snippet.
Aqui está o snippet de código que vamos importar:
Isso o redirecionará para a página de visualização do snippet WPCode, onde você poderá ver o código integrado automaticamente.
Agora, tudo o que você precisa fazer é ativar o código do snippet. Para fazer isso, mova o controle deslizante de Inativo para Ativo.
O próximo passo para ativar o snippet de código em todo o site é clicar no botão Atualizar, ao lado da opção de controle deslizante Ativo.
Seguindo esta abordagem, você só precisará adicionar o snippet uma vez através da biblioteca de snippets do WPForms.
Em seguida, para cada formulário em que o usuário deseja usar este snippet, ele precisará adicionar o nome da Classe CSS do Botão de Envio dentro do construtor.
4. Adicione a Classe CSS do Botão de Envio
Agora, tudo o que resta a fazer é adicionar a classe CSS no construtor do formulário da calculadora da qual você deseja remover o botão de envio.
Para fazer isso, abra seu formulário de calculadora e navegue até a guia Geral, depois role para baixo até a guia Avançado.
Depois disso, cole o CSS wpf-calc-form no campo Classe CSS do Botão de Envio para ativar o snippet de código.
Agora você pode visualizar seu formulário para ver que o botão de envio da sua calculadora foi removido com sucesso!
Como Impedir que a Tecla Enter Envie o Formulário
Mesmo sem um botão de envio visível, um formulário ainda pode ser enviado quando alguém pressiona a tecla Enter dentro de um campo de texto. Em uma calculadora que se destina a mostrar um resultado ao vivo, esse não é o comportamento que você deseja.
A correção é um segundo trecho de código que impede que a tecla Enter acione um envio. O código exato está em nossa documentação para desenvolvedores, então você pode seguir o guia sobre como impedir que a tecla Enter envie o formulário e adicioná-lo da mesma forma que adicionou o primeiro.
Com ambos os trechos ativos, sua calculadora mostra o total instantaneamente e permanece no lugar, sem botão e sem envios acidentais.
Perguntas Frequentes sobre Formulários Calculadora
Formulários calculadora surgem com frequência entre nossos leitores. Aqui estão as respostas para algumas das perguntas mais comuns sobre a remoção do botão de envio e o trabalho com formulários calculadora no WordPress.
Como desativo o botão de envio em um formulário?
Para desativar o botão de envio no WPForms Pro, você o oculta com CSS personalizado. Vá para WPForms » Ferramentas, abra a guia Snippets de Código para acessar a Biblioteca de Snippets do WPForms e instale o snippet de ocultar botão de envio. Em seguida, adicione a classe wpf-calc-form ao campo Classe CSS do Botão de Envio do seu formulário.
Um formulário pode não ter botão de envio?
Sim. Um formulário pode funcionar sem um botão de envio, o que é comum para calculadoras que mostram um resultado instantaneamente ou formulários que enviam automaticamente. No WPForms Pro, você oculta o botão com um pouco de CSS adicionado através da integração WPCode integrada, então nada extra é necessário.
Ocultar o botão de envio impede que o formulário seja enviado?
Não, ocultar o botão por si só não impede os envios. O formulário ainda pode ser enviado se um visitante pressionar a tecla Enter enquanto estiver em um campo de texto. Para evitar isso, adicione um segundo trecho que impede que a tecla Enter envie, usando o guia do desenvolvedor vinculado acima.
Posso remover o botão de envio de apenas um formulário calculadora?
Sim. O trecho só tem efeito em formulários onde você adicionou a classe wpf-calc-form ao campo Classe CSS do Botão de Envio. Deixe esse campo vazio em seus outros formulários e seus botões de envio permanecerão exatamente como estão.
Em seguida, Aprenda Como Criar uma Calculadora Online Personalizada
Uma calculadora é uma das melhores maneiras de manter os visitantes em seu site, pois lhes dá um motivo para ficar e obter uma resposta para uma pergunta real.
Se você quiser criar uma do zero, dê uma olhada em nosso guia sobre como fazer uma calculadora personalizada no WordPress e configure-a para o que quer que seu site precise.
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.
Este CSS não impede o envio do formulário quando o botão Enter é usado em um dos campos de texto usados em um Formulário Calculadora.
Olá Dean,
Você está certo — este trecho de CSS apenas oculta o botão de envio, mas não impede que o formulário seja enviado quando a tecla Enter é pressionada em um campo de texto.
Se você quiser desativar a tecla Enter também, recomendamos usar o trecho de código fornecido em nossa documentação para desenvolvedores aqui: Como Impedir que a Tecla Enter Envie o Formulário.
Espero que ajude!