Como adicionar uma calculadora de custos ao seu site WordPress

Se você já usou uma calculadora de empréstimos ou um estimador de preços, pode ter se perguntado se existe uma maneira de adicionar uma calculadora de custos ao seu site WordPress. Existe, e é super fácil.

Claro, você pode aprender um pouco de JavaScript e criar uma calculadora decente em alguns meses – ou pode economizar muito tempo e dores de cabeça usando um plug-in. É por isso que amamos o WordPress, certo?

Fique por aqui, e eu vou te mostrar como se faz.

Uma calculadora de custos versátil para WordPress

Quando você usa uma calculadora de empréstimos em um site de hipotecas, pode parecer que há algum código complexo por trás disso. E você pode ter imaginado que está fora do alcance do seu site. Contratar um desenvolvedor para implementar um formulário como esse pode estar fora do seu orçamento.

Então, e se você precisar alterar algo na calculadora? Você precisará trazer de volta o desenvolvedor para corrigi-lo para você. Isso seria uma dor e possivelmente fora de seu alcance financeiro.

Felizmente, um plugin do WordPress permitirá que você lide com tudo isso sozinho – sem necessidade de código.

A Calculadora de Custos permite que você crie qualquer tipo de formulário de calculadora que você precisar, e ficará ótimo para inicializar.

Introdução à Calculadora de Custos

Embora o plugin Cost Calculator seja fácil de usar, vou orientá-lo pelos recursos e mostrar um exemplo que pode inspirar seus próprios formulários. Primeiro, vamos obter o plugin.

Instalar calculadora de custos

Você pode encontrar a Calculadora de Custos pesquisando no painel do WordPress em Plugins > Adicionar Novo ou faça o download no WordPress.org. Além disso, você pode comprar a versão Pro, que apresenta opções como menu suspenso de imagens, upload de arquivos e muito mais.

Criando calculadoras

Depois que o plug-in for ativado, você verá o ícone da Calculadora de Custos aparecer no menu do painel do WordPress. Clique nele para acessar o menu Calculadora de Custos.

Inicialmente, não há formulários na lista. Para começar, basta clicar em Criar novo no canto superior direito. No entanto, como você é novo no uso do plug-in, recomendo tentar a opção Importar calculadoras . No menu que se abre, escolha Executar importação de demonstração padrão . Isso preencherá sua lista com algumas calculadoras de exemplo fornecidas pelos autores do plug-in.

Antes de criar sua primeira calculadora, é útil explorar os exemplos de demonstração fornecidos. Isso lhe dará uma ideia dos menus e de como uma calculadora é estruturada. Escolha uma calculadora e, na guia Ação , clique no ícone de lápis para entrar no modo de edição.

Editando calculadoras

Para este exemplo, vamos usar a calculadora de fotografia. Entre no modo de edição, role até o final e clique em Visualizar . Isso mostra o que você pode esperar quando a calculadora é exibida. Este ajuda os potenciais clientes de fotografia a calcular o custo ao escolher entre diferentes pacotes.

Vamos voltar ao menu de edição e ir até a guia Calculadora .

À direita estão todos os elementos disponíveis para uso em nossa calculadora. Neste exemplo, à esquerda, podemos ver que eles usaram os elementos Drop Down, Quantity e Total. Podemos editar qualquer um deles passando o mouse sobre eles, onde um botão de edição aparecerá.

O primeiro elemento é um Drop Down chamado Services. Dentro, podemos ver os campos Nome e Descrição na parte superior. Se rolarmos mais para baixo, podemos especificar mais opções para o menu suspenso.

Esta calculadora totaliza o custo dos serviços de fotografia. Podemos configurar tudo isso neste menu suspenso, incluindo preços.

O próximo elemento, Hours , é um elemento Quantity. Para isso, basta definir a Unidade de Quantidade para que o cálculo funcione. Como estamos calculando o tempo, não precisamos alternar nenhuma configuração de moeda. Embora o valor padrão não seja obrigatório, ele pode ajudar a direcionar os visitantes para uma escolha que você possa preferir.

O elemento Total é onde o cálculo será feito. No campo Fórmula da Calculadora, podemos ver o que parece ser um código complicado. Realmente não é. Se você excluir tudo nesse campo, poderá recriá-lo facilmente. Em Campos Disponíveis, você verá que temos apenas dois campos que podemos usar na fórmula. Clique no primeiro e ele aparecerá no campo Fórmula. Então precisamos de um Operador, então clique no asterisco abaixo para indicar que queremos multiplicar os dois valores do campo. Clique na outra opção Campo disponível e sua fórmula estará completa.

Agora que vimos como a calculadora está configurada, vamos ver as condições, configurações e personalização.

Condições

Você pode não precisar do recurso Condições para todos os formulários, mas quando precisar, é um recurso fantástico de se ter. O sistema Condicional permite vincular diferentes campos e adicionar condições a eles. Você pode mostrar, ocultar ou desabilitar campos específicos com base no cumprimento ou não de uma condição. Por exemplo, se você tiver uma calculadora de empréstimo, poderá definir a taxa de juros para que apareça apenas quando o usuário inserir um valor de empréstimo específico.

Definições

O menu de configurações da Calculadora de Custos é onde você ajustará suas configurações de moeda ou configurará quaisquer integrações de gateway de pagamento.

A maioria das configurações são intuitivas aqui, mas abordarei algumas significativas.

Se você possui uma loja WooCommerce, a Calculadora de Custos se integra a ela. Este é um recurso útil que pode aumentar sua taxa de conversão quando implementado. Por exemplo, você pode configurar um formulário de taxa para que, quando os usuários clicarem no botão Enviar, eles sejam levados diretamente para a página de checkout do Woo. Você também pode adicionar um botão Adicionar ao carrinho ao seu formulário.

Enviar formulário permite que você adicione um formulário de envio integrando-se ao plug-in Contact 7. Assim que um usuário clicar em Enviar no formulário da calculadora, ele terá a opção de enviar os resultados do formulário por e-mail.

Se você não quiser que uma legião de robôs de spam enviem formulários indesejados, você pode incluir um botão ReCaptcha. Você precisará configurar isso primeiro pelo Google, mas estará pronto para começar assim que tiver a chave do site e a chave secreta.

Customizar

O menu Personalizar é literalmente a cereja do bolo da calculadora. Você pode alterar praticamente qualquer aspecto de design em seus formulários usando controles deslizantes simples e seletores de cores.

Adicione bordas às caixas, altere a cor e os tamanhos da fonte ou até mesmo crie sua própria cor de fundo gradiente. O menu de personalização facilita o estilo de seus formulários de acordo com a marca do seu site.

Apresente uma calculadora de custos de ótima aparência em seu site

Se você precisa de uma maneira de adicionar um formulário de calculadora ao seu site, o plugin Cost Calculator não é apenas indolor, é divertido de usar. Sem contratar um desenvolvedor ou escrever qualquer código, você pode criar formulários de ótima aparência para o seu site WordPress em apenas alguns minutos.

Preços

A Calculadora de Custos é gratuita para instalar e usar. A versão Pro contém recursos como gateway de pagamento, checkout WooCommerce, condições, uploads de arquivos e um seletor de data. O preço começa em $ 29,99 para uma única licença anual.