Elementos interativos como calculadoras podem melhorar a experiência do usuário em seu site. Eles podem servir a múltiplos propósitos, como capturar leads, aumentar o engajamento ou ajudar os visitantes a encontrar respostas rápidas.
Ao fornecer ferramentas valiosas que respondem diretamente às necessidades dos usuários, você pode mantê-los em seu site por mais tempo, aprofundar sua experiência online e, finalmente, atingir os objetivos do seu site.
Nossa equipe testou várias ferramentas e plugins para encontrar aquele que torna mais fácil adicionar uma calculadora para qualquer finalidade.
Neste artigo, mostraremos como criar uma calculadora personalizada no WordPress de forma fácil e passo a passo.
Por que adicionar uma calculadora personalizada no WordPress?
Uma calculadora personalizada permite que os usuários calculem coisas rapidamente sem sair do seu site.
Por exemplo, se você tem um blog de saúde e fitness, pode adicionar uma calculadora de IMC para que os usuários possam ver seu IMC e decidir qual plano de assinatura ou produto comprar em seu site.
Se você vende para todo o mundo, uma calculadora online que converte unidades métricas para imperiais também pode gerar mais vendas, ajudando os clientes a verificar se um produto tem o tamanho ou peso desejado.
Você também pode criar confiança e reduzir o abandono de carrinho oferecendo uma calculadora de frete. Dessa forma, os clientes não serão surpreendidos com custos inesperados no checkout.
Ou, você pode adicionar uma calculadora de hipoteca ao seu site imobiliário ou uma calculadora de pagamento de carro ao seu site de concessionária de veículos.
Essas calculadoras personalizadas também são uma ótima maneira de gerar leads. Por exemplo, você pode pedir aos usuários que insiram seus endereços de e-mail para que você possa enviar os resultados. Dessa forma, uma calculadora pode ajudá-lo a construir uma lista de e-mails no WordPress.
Dito isso, vamos dar uma olhada em como criar facilmente uma calculadora personalizada no WordPress.
Como Criar uma Calculadora Personalizada no WordPress
Você pode facilmente criar uma calculadora personalizada no WordPress com WPForms. Na nossa opinião, é o melhor plugin de calculadora personalizada e construtor de formulários do mercado. Ele vem com um construtor de arrastar e soltar, mais de 2000 modelos pré-fabricados e proteção completa contra spam.
Na verdade, nós amamos tanto o WPForms que o usamos para todos os formulários de contato em nosso site, bem como para nossa pesquisa anual.
Durante nossos testes, percebemos que o plugin também possui um addon de Cálculos que facilita a criação de qualquer calculadora que você desejar, incluindo uma calculadora de hipoteca, desconto de frete, calculadora de idade e muito mais. Para saber mais, confira nossa análise do WPForms.
Primeiro, você precisa instalar e ativar o plugin WPForms. Para instruções detalhadas, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: O WPForms também tem um plano gratuito. No entanto, você precisará da versão pro do plugin para desbloquear o addon de Cálculos.
Após a ativação, visite a página WPForms » Configurações na barra lateral de administração do WordPress para inserir sua chave de licença.
Você pode obter esta chave em sua conta no site do WPForms.
Depois disso, vá para a página WPForms » Addons no painel do WordPress e encontre o ‘Addon de Cálculos’.
Assim que fizer isso, basta clicar no botão ‘Instalar Addon’ para ativá-lo em seu site.
Em seguida, vá para a página WPForms » Adicionar Novo no seu painel de administração.
Isso o levará para a página ‘Selecionar um Modelo’, onde você pode começar digitando um nome para o formulário que está prestes a criar.
Depois disso, você pode clicar na opção ‘Calculadora’ na coluna esquerda para abrir os mais de 87 modelos de calculadora pré-fabricados oferecidos pelo WPForms, incluindo:
- Modelo de Calculadora de Hipoteca
- Modelo de Calculadora de Gorjeta
- Modelo de Calculadora de Aluguel
- Modelo de Calculadora de IMC
- Modelo de Calculadora de Poupança e Investimentos
A partir daqui, você pode clicar no botão ‘Usar Modelo’ abaixo de qualquer modelo de formulário que desejar. Para este tutorial, criaremos um formulário simples de ‘Calculadora de Desconto de Frete’.
Isso abrirá o construtor de formulários em sua tela. Aqui você notará uma prévia do formulário no lado direito com os campos do formulário na coluna esquerda.
Agora você pode facilmente adicionar mais campos do painel esquerdo e também arrastá-los para reorganizar sua ordem.
Em seguida, role para baixo até a seção ‘Itens Disponíveis’ e clique neste campo para abrir suas configurações na barra lateral.
Uma vez que você fizer isso, poderá adicionar o título, imagem e preços para todos os itens que está vendendo em sua loja de comércio eletrônico.
No entanto, lembre-se de que, se você quiser adicionar imagens para os itens que está vendendo, precisará ativar a opção ‘Usar Escolhas de Imagem’.
Você também pode clicar no botão ‘+’ para adicionar mais itens ou no botão ‘-‘ para remover um item da seção.
Em seguida, você deve clicar no campo ‘Frete’ para abrir suas configurações na coluna esquerda. Este campo calculará o desconto de frete com base no total do seu produto. Se você excluir este campo, a calculadora não funcionará para seus usuários, portanto, certifique-se de mantê-lo no formulário.
Por padrão, o campo de Frete oferece um desconto automático de 10% em compras inferiores a US$ 50 e, em seguida, multiplica o desconto por 0,25% à medida que seu total aumenta.
No entanto, se você quiser alterar o desconto de frete, mude para a aba ‘Avançado’ na coluna da esquerda e role para baixo até a seção ‘Fórmula’.
Aqui, você pode substituir o valor de 10 pela porcentagem de desconto que deseja oferecer. Você também pode alterar os totais dos produtos.
Se você quiser personalizar ainda mais o desconto de frete, clique no link ‘Guia Rápido’ no topo. Isso o levará para a página ‘Guia Rápido de Fórmulas de Cálculo’, onde você poderá entender melhor as regras e strings a serem usadas.
Depois disso, você também pode configurar as opções para todos os outros campos da mesma maneira.
Novo: Quer uma maneira mais fácil de criar suas fórmulas de cálculo? O WPForms agora oferece um poderoso recurso de Cálculos com IA que faz o trabalho pesado por você.
Simplesmente clique no botão ‘Gerar Fórmula’ ao lado da caixa de fórmula para começar a conversar com o Assistente de IA.
Em seguida, você pode simplesmente descrever o que deseja calcular em linguagem simples.
Por exemplo, você pode digitar: “Aplicar um desconto de frete de 15% em pedidos acima de R$ 100 e, em seguida, aumentar o desconto em 0,25% para cada R$ 50 adicionais gastos.”
Após pressionar o botão ‘Enter’, a IA gerará automaticamente a fórmula correta, que você poderá adicionar ao seu formulário com 1 clique.
💡 Dica Profissional: Quanto mais específico você for ao descrever suas necessidades de cálculo para a IA, mais precisa e personalizada será sua fórmula.
Quando terminar, não se esqueça de clicar no botão ‘Salvar’ na parte superior para armazenar suas configurações.
Em seguida, você deve abrir a página ou postagem do WordPress onde deseja adicionar o formulário da calculadora de frete no editor de blocos.
A partir daqui, clique no botão ‘+’ para adicionar bloco no canto superior esquerdo para abrir o menu de blocos e incorporar o bloco WPForms.
Depois de fazer isso, basta escolher o formulário da calculadora de desconto de frete no menu suspenso dentro do próprio bloco.
Por fim, clique no botão ‘Atualizar’ ou ‘Publicar’ no topo para salvar suas configurações. Agora, você pode visitar seu site WordPress para ver o formulário de calculadora personalizado em ação.
Aqui, o campo de frete calculará automaticamente o custo do frete de acordo com os preços dos diferentes itens que seu cliente está encomendando em seu site.
Personalizando seu formulário de calculadora no WordPress
Em algum momento, você pode tentar alterar a calculadora para ver se consegue mais conversões. Por exemplo, você pode querer tornar o campo ‘E-mail’ obrigatório.
Para fazer essas alterações, basta visitar a página WPForms » Todos os Formulários no painel do WordPress.
Uma vez lá, clique no link ‘Editar’ sob o nome do formulário para abri-lo novamente no construtor de formulários.
Agora você pode personalizar os campos do formulário ou adicionar novos campos seguindo o processo descrito acima.
Quando terminar, basta clicar no botão ‘Salvar’, e essas alterações aparecerão automaticamente em seu site de negócios ou blog.
Visualizando as Entradas do seu Formulário de Calculadora
Sempre que alguém preenche um formulário em seu site, o WPForms salva automaticamente a entrada em seu banco de dados do WordPress. Isso permite que você veja como as pessoas estão usando o formulário e visualize as informações de contato de seus visitantes.
Para ver essas informações, basta ir para a página WPForms » Entradas no painel do WordPress e rolar para baixo até a seção ‘Nome do Formulário’.
Depois disso, clique no formulário da calculadora para visualizar as entradas.
Isso abrirá uma lista de todas as entradas do formulário em sua página. A partir daqui, você pode clicar no ícone de círculo para marcar uma entrada como lida.
Você também pode clicar no link ‘Ver’ ao lado de cada entrada para visualizar todos os detalhes do formulário, incluindo o endereço de e-mail, número de telefone, itens encomendados, desconto de frete e muito mais.
Às vezes, você pode querer compartilhar os dados de um formulário com pessoas que não têm acesso ao seu painel do WordPress. Por exemplo, você pode gerenciar uma agência de desenvolvimento WordPress e gerenciar vários sites para clientes.
Com o WPForms, você pode exportar todos os seus dados como um arquivo CSV ou XLSX clicando no link 'Exportar Tudo' no topo.
Isso abrirá uma nova tela onde você pode selecionar todos os campos do formulário cujos dados você deseja exportar. Depois disso, clique no botão 'Baixar Arquivo de Exportação' para salvar os dados do seu formulário como um arquivo XLSX.
Bônus: Crie Calculadoras Personalizadas Complexas com Formidable Forms
Se você está procurando criar calculadoras mais complexas em seu site WordPress, recomendamos o uso do Formidable Forms. É um plugin de formulário avançado que vem com um construtor de arrastar e soltar, modelos pré-fabricados e campos dinâmicos.
Além disso, o plugin pode realizar cálculos avançados como o uso de fórmulas, cálculos condicionais, formatação de números e muito mais, tornando-o um ótimo construtor de calculadoras.
Você pode usar o plugin para criar diferentes tipos de calculadoras, como uma calculadora de porcentagem, calculadora de preços, calculadora de empréstimos, calculadora de idade, calculadora de seguro de vida e calculadora de juros compostos.
Por exemplo, se você vende cursos online, pode adicionar um formulário de calculadora de ROI para mostrar aos usuários como a compra do seu curso pode aumentar seu potencial de ganhos.
Outros recursos do Formidable Forms incluem lógica condicional, indicadores de progresso, formulários de várias páginas e um campo ChatGPT que ajuda os usuários a preencher o formulário mais rapidamente.
O Formidable Forms pode até se integrar a diferentes serviços de marketing por e-mail para aumentar sua lista de e-mails. Para mais informações, confira nossa análise completa do Formidable Forms.
Esperamos que este artigo tenha ajudado você a adicionar uma calculadora personalizada no WordPress. Você também pode querer ver nosso guia passo a passo sobre como gerar mais leads com calculadoras online gratuitas e nossas principais escolhas para os melhores plugins de formulário de contato para WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
kzain
Você pegou algo complexo e o tornou acessível a todos. Adoro como você nos guiou passo a passo na criação de uma calculadora personalizada, tornando-a realizável e divertida! Sua ênfase em usar calculadoras para resolver problemas do mundo real e melhorar a experiência do usuário é perfeita. Este guia é um divisor de águas para quem deseja levar seu site para o próximo nível. Obrigado por compartilhar sua experiência.
WPBeginner Support
De nada!
Admin
Anne
Eu também queria criar uma calculadora de IMC no meu site de saúde, mas não tenho a versão WP Forms Pro. Planejo comprar no futuro e seguir seu guia fácil. Bem, você me guiou muito bem e me convenceu a comprar este plugin.