Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como criar uma calculadora personalizada no WordPress (passo a passo)

Elementos interativos, como calculadoras, podem melhorar a experiência do usuário no seu site. Eles podem servir a vários propósitos, como capturar leads, aumentar o envolvimento ou ajudar os visitantes a encontrar respostas rápidas.

Ao fornecer ferramentas valiosas que atendem diretamente às necessidades dos usuários, é possível mantê-los no site por mais tempo, aprofundar a experiência on-line e, por fim, atingir as metas do site.

Nossa equipe testou várias ferramentas e plug-ins para encontrar o que torna mais fácil adicionar uma calculadora para qualquer finalidade.

Neste artigo, mostraremos a você como criar uma calculadora personalizada no WordPress de forma fácil e passo a passo.

Create A Custom Calculator In WordPress

Por que adicionar uma calculadora personalizada no WordPress?

Uma calculadora personalizada permite que os usuários façam cálculos rápidos sem sair do seu site.

Por exemplo, se você tiver um blog sobre saúde e boa forma, poderá adicionar uma calculadora de IM C para que os usuários possam ver o IMC deles e decidir qual plano de assinatura ou produto comprar no seu site.

An example of a BMI calculator

Se você vende em todo o mundo, uma calculadora on-line que converte unidades métricas em unidades imperiais também pode gerar mais vendas, ajudando os clientes a verificar se um produto tem o tamanho ou o 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 site da sua concessionária de veículos.

An example of a car payment calculator

Essas calculadoras personalizadas também são uma ótima maneira de gerar leads. Por exemplo, você pode pedir aos usuários que digitem seus endereços de e-mail para que você possa enviar os resultados. Dessa forma, uma calculadora pode ajudá-lo a criar 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 criar facilmente uma calculadora personalizada no WordPress com o WPForms. Em nossa opinião, ele é o melhor plugin de calculadora personalizada e construtor de formulários do mercado. Ele vem com um construtor do tipo arrastar e soltar, mais de 2.000 modelos predefinidos e proteção completa contra spam.

Na verdade, gostamos tanto do 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 plug-in também tem um complemento Calculations (Cálculos) que facilita a criação de qualquer calculadora que você queira, inclusive uma calculadora de hipoteca, desconto de frete, calculadora de idade e muito mais. Para saber mais, consulte nossa análise do WPForms.

Primeiro, você precisa instalar e ativar o plug-in WPForms. Para obter instruções detalhadas, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Observação: o WPForms também tem um plano gratuito. No entanto, você precisará da versão profissional do plug-in para desbloquear o complemento Calculations.

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 essa chave em sua conta no site do WPForms.

WPForms license key

Depois disso, vá para a página WPForms ” Addons no painel do WordPress e encontre o “Calculations Addon”.

Depois de fazer isso, basta clicar no botão “Install Addon” para ativá-lo em seu site.

Install and activate the Calculations addon

Em seguida, vá para a página WPForms ” Add New (Adicionar novo ) em seu painel de administração.

Isso o levará à página “Select a Template” (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 da esquerda para abrir os mais de 87 modelos de calculadora predefinidos oferecidos pelo WPForms, incluindo:

  • Modelo de calculadora de hipoteca
  • Modelo de calculadora de gorjetas
  • Modelo de calculadora de leasing
  • Modelo de calculadora de IMC
  • Modelo de calculadora de poupança e investimento

A partir daí, você pode clicar no botão “Use Template” (Usar modelo) em qualquer modelo de formulário que desejar. Para este tutorial, criaremos um formulário simples do tipo “Calculadora de desconto de remessa”.

Choose the shipping discount calculator form template

Isso abrirá o criador de formulários na sua tela. Aqui você verá uma visualização do formulário no lado direito com os campos de formulário na coluna da esquerda.

Agora você pode adicionar facilmente mais campos no painel esquerdo e também arrastá-los para reorganizar a ordem.

Calculator form template will open in the form builder with form fields on the left

Em seguida, role para baixo até a seção “Itens disponíveis” e clique nesse campo para abrir suas configurações na barra lateral.

Depois de fazer isso, você poderá adicionar o título, a imagem e o preço de todos os itens que estiver vendendo em sua loja de comércio eletrônico.

No entanto, lembre-se de que, se quiser adicionar imagens para os itens que está vendendo, será necessário ativar a opção “Use Image Choices” (Usar opções 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.

Add the price, image, and name for the items that you want to sell in the form

Em seguida, você deve clicar no campo “Shipping” para abrir suas configurações na coluna da esquerda. Esse campo calculará o desconto de frete com base no total do produto. Se você excluir esse campo, a calculadora não funcionará para seus usuários, portanto, certifique-se de mantê-lo no formulário.

Por padrão, o campo 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 o total aumenta.

No entanto, se quiser alterar o desconto de remessa, mude para a guia “Advanced” (Avançado) na coluna da esquerda e role para baixo até a seção “Formula” (Fórmula).

Aqui, você pode substituir o valor de 10 pela porcentagem de desconto que deseja oferecer. Você também pode alterar os totais do produto.

Se você quiser personalizar ainda mais o desconto de frete, clique no link “Cheatsheet” na parte superior. Isso o levará à página “Calculations Formula Cheatsheet”, onde você poderá entender melhor as regras e as cadeias de caracteres a serem usadas.

Change the shipping discount value

Depois disso, você também pode definir as configurações de todas as outras opções de campo da mesma forma.

Quando terminar, não se esqueça de clicar no botão “Save” (Salvar) na parte superior para armazenar suas configurações.

Save your custom calculator form

Em seguida, você deve abrir a página ou postagem do WordPress em que deseja adicionar o formulário de calculadora de frete no editor de blocos.

A partir daqui, clique no botão “+” de 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 de calculadora de desconto de frete no menu suspenso dentro do próprio bloco.

Add calculator form on a page

Por fim, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) na parte superior para armazenar suas configurações. Agora, você pode visitar seu site do WordPress para ver o formulário de calculadora personalizado em ação.

Aqui, o campo de envio calculará automaticamente o custo de envio de acordo com o preço dos diferentes itens que o cliente está comprando em seu site.

Shipping discount calculator form preview

Personalizando seu formulário de calculadora no WordPress

Em algum momento, você pode tentar alterar a calculadora para ver se consegue obter mais conversões. Por exemplo, talvez você queira tornar obrigatório o campo “E-mail”.

Para fazer essas alterações, basta acessar a página WPForms ” All Forms (Todos os formulários ) no painel do WordPress.

Quando estiver lá, clique no link “Edit” (Editar) sob o nome do formulário para abri-lo novamente no construtor de formulários.

Click the Edit link under form name

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 “Save” (Salvar), e essas alterações aparecerão automaticamente no site ou blog da sua empresa.

Visualização das entradas do formulário da calculadora

Sempre que alguém preenche um formulário em seu site, o WPForms salva automaticamente a entrada no 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 dos visitantes.

Para ver essas informações, basta acessar 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.

Choose the custom calculator form on the entries page

Isso abrirá uma lista de todas as entradas de formulário em sua página. A partir daí, você pode clicar no ícone de círculo para marcar uma entrada como lida.

Você também pode clicar no link “View” (Exibir) ao lado de cada entrada para ver todos os detalhes do formulário, inclusive o endereço de e-mail, o número de telefone, os itens pedidos, o desconto no frete e muito mais.

View the calculator form entries

À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 administrar 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” na parte superior.

Isso abrirá uma nova tela na qual você poderá selecionar todos os campos do formulário cujos dados deseja exportar. Depois disso, clique no botão “Download Export File” (Baixar arquivo de exportação) para salvar os dados do formulário como um arquivo XLSX.

Choose the form fields whose data you want to export as a CSV file

Bônus: Crie calculadoras personalizadas complexas com o Formidable Forms

Se quiser 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 predefinidos e campos dinâmicos.

Além disso, o plug-in pode executar cálculos avançados, como o uso de fórmulas, cálculos condicionais, formatação de números e muito mais, o que o torna um excelente construtor de calculadoras.

Formidable forms

Você pode usar o plug-in para criar diferentes tipos de calculadoras, como uma calculadora de porcentagem, uma calculadora de preço, uma calculadora de empréstimo, uma calculadora de idade, uma calculadora de seguro de vida e uma calculadora de juros compostos.

Por exemplo, se você vende cursos on-line, pode adicionar um formulário de calculadora de ROI para mostrar aos usuários como a compra do seu curso pode aumentar o potencial de ganho deles.

Adding a custom calculator to WordPress

Alguns dos 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é mesmo ser integrado a diferentes serviços de marketing por e-mail para aumentar sua lista de e-mails. Para obter mais informações, consulte nossa análise completa do Formidable Forms.

Esperamos que este artigo tenha ajudado você a adicionar uma calculadora personalizada no WordPress. Talvez você também queira ver nosso guia passo a passo sobre como gerar mais leads com calculadoras on-line gratuitas e nossas principais opções para os melhores plug-ins de formulário de contato do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 comentárioLeave a Reply

  1. Anne

    Wanted to create a BMI calculator on my health website too, but doesn’t have the WP Forms Pro version. Plan to buy in the future and follow your easy guide. Well, you guided me very well and convinced me to buy this plugin.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.