Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
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)

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Elementos interativos, como calculadoras, podem aprimorar a experiência do usuário no seu site WordPress. Eles podem servir a muitos propósitos, como gerar leads por meio de captura de e-mail, promover o envolvimento do usuário e atender às consultas dos visitantes.

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.

Na WPBeginner, nossa equipe testou várias ferramentas e plug-ins para encontrar aquele que facilita a adição de uma calculadora para qualquer finalidade, como simplificar cálculos complexos, fornecer recomendações personalizadas ou capturar leads para futuros esforços de marketing.

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. É o melhor plugin de calculadora personalizada e construtor de formulários do mercado.

Ele vem com um construtor de arrastar e soltar, mais de 1.800 modelos predefinidos e proteção completa contra spam. Isso facilita a criação de qualquer formulário que você queira, inclusive uma calculadora de hipoteca, desconto de remessa, calculadora de idade e muito mais. Além disso, é muito fácil de usar.

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, você deve visitar 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 rastrear conversões no WordPress e nossas principais opções dos 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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

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.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

2 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Anne says

    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.

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.