Como adicionar uma calculadora de hipoteca no WordPress (passo a passo)

Imagine o seguinte: um comprador em potencial visita o site de sua imobiliária. Ele está entusiasmado, mas talvez um pouco sobrecarregado. Que tipo de imóvel ele pode comprar? Não seria incrível se eles pudessem responder a essa pergunta ali mesmo, em seu site?

Se você atua no setor imobiliário, adicionar uma calculadora de hipoteca ao seu site pode lhe dar uma grande vantagem sobre a concorrência. Ela permite que os possíveis compradores de imóveis estimem seus pagamentos mensais e o posiciona como um recurso útil e bem informado.

Neste artigo, mostraremos a você como adicionar facilmente uma calculadora de hipoteca no WordPress.

Por que adicionar uma calculadora de hipoteca no WordPress?

Uma calculadora de hipoteca permite que os usuários obtenham estimativas dos pagamentos da hipoteca, com a taxa de juros e o período de amortização.

Os visitantes podem simplesmente adicionar informações como o valor da casa, o pagamento da entrada, as taxas de juros e assim por diante. Depois disso, a calculadora calculará quanto eles precisam pagar por mês.

Se estiver criando um site imobiliário com listagens de propriedades IDX, uma calculadora de hipoteca também ajudará na geração de leads. Os visitantes podem usar a calculadora, mas terão de inserir o endereço de e-mail para salvar os resultados.

Isso também pode reduzir sua taxa de rejeição, pois os visitantes não precisam visitar outro site para obter um cálculo de hipoteca.

Consultores financeiros, corretores de hipotecas ou bancos e educadores de finanças pessoais também podem se beneficiar da inclusão de uma calculadora de hipotecas em seus sites.

Dito isso, vamos dar uma olhada em como criar facilmente uma calculadora de hipoteca no WordPress. Este tutorial mostrará dois métodos fáceis para iniciantes com dois plug-ins diferentes de calculadora de hipoteca: WPForms e Formidable Forms.

Você pode usar esses links rápidos para pular para um plug-in específico:

Método 1: Adicionar uma calculadora de hipoteca simples do WordPress com o WPForms

O primeiro método é usar o WPForms. Com seus mais de 1.700 modelos de formulário, esse plug-in de formulário de arrastar e soltar permite que você crie vários formulários, inclusive uma calculadora de hipoteca.

Esse método é recomendado para pessoas que desejam apenas criar uma calculadora de hipoteca simples, mas responsiva, sem cálculos adicionais de impostos ou seguros.

Antes de mais nada, instale o plug-in no WordPress.

Feito isso, vá para WPForms ” Configurações e insira a chave de licença do seu plano Pro na página da sua conta do WPForms. Em seguida, basta clicar em “Verificar chave”.

Escolha e personalize um modelo de formulário de calculadora de hipoteca

Quando a chave de licença estiver ativa, você precisará navegar até WPForms ” Add New.

Na próxima tela, você pode dar um nome ao seu novo formulário. Pode ser algo tão simples quanto “Mortgage Calculator Form”.

Rolando para baixo, use a barra de pesquisa para encontrar um modelo de formulário de calculadora de hipoteca.

O WPForms tem dois modelos: Mortgage Calculator Form (Formulário de calculadora de hipoteca) e Simple Mortgage Calculator Form (Formulário simples de calculadora de hipoteca). Os dois modelos oferecem funcionalidade semelhante, mas têm campos ligeiramente diferentes.

O modelo de formulário de calculadora de hipoteca simples é ideal para sites imobiliários que desejam ajudar os compradores em potencial a estimar rapidamente o pagamento mensal da hipoteca.

Por outro lado, o modelo de formulário de calculadora de hipoteca fornece um detalhamento abrangente dos detalhes da hipoteca, incluindo o total de juros pagos, o pagamento total da hipoteca e o valor do pagamento anual. Esse nível de detalhe pode ser útil para clientes que desejam entender completamente suas obrigações financeiras.

Você pode clicar em “View Demo” (Exibir demonstração) para ver cada formulário em ação. Você pode escolher qualquer um dos modelos, mas, para os fins deste tutorial, usaremos o modelo de formulário Mortgage Calculator.

Depois de fazer sua escolha, basta clicar em ‘Use Template’ (Usar modelo).

Nessa etapa, aparecerá uma janela pop-up informando que você precisa do complemento Calculations.

Basta clicar em “Yes, install and activate” (Sim, instalar e ativar) para continuar.

Agora você chegará ao construtor de formulários de arrastar e soltar. Como você pode ver, o modelo vem com os campos de calculadora incorporados.

Esse modelo específico tem campos em que os usuários podem inserir o valor da casa (custo total da casa) e o valor da entrada (quanto o comprador paga antecipadamente ao comprar uma propriedade).

Os usuários também podem usar os controles deslizantes para inserir informações sobre a taxa de juros do empréstimo imobiliário e o prazo da hipoteca.

Após inserir essas informações, a seção inferior calculará automaticamente o valor do pagamento mensal e anual da hipoteca do usuário, o total de juros pagos e o total do pagamento da hipoteca.

Você pode encontrar essa fórmula de cálculo acessando “Opções de campo” e navegando até a guia “Avançado” no painel esquerdo. Na parte inferior, você encontrará a caixa “Formula” (Fórmula).

Recomendamos não fazer alterações nessa seção, a menos que tenha confiança para fazê-lo. Dito isso, o WPForms tem uma folha de dicas de cálculos que você pode usar se precisar de ajuda.

Vamos personalizar o formulário. Para adicionar um novo campo, vá para a seção “Add Fields” (Adicionar campos) no painel esquerdo. Em seguida, basta arrastar e soltar qualquer campo no construtor de formulários.

Aqui, adicionamos um campo “Name” ao formulário para capturar o nome do usuário.

Para personalizar um campo, basta clicar nele, e o painel esquerdo exibirá a guia “Field Options” (Opções de campo). Aqui, você encontrará três guias: General (Geral), Advanced (Avançado) e Smart Logic (Lógica inteligente).

Se quiser alterar o rótulo do campo, inserir texto descritivo ou tornar o campo obrigatório, você precisará selecionar “General” (Geral).

Na imagem a seguir, alteramos o rótulo do campo “Home Value” para “Property Price” e acrescentamos algumas instruções adicionais. Também tornamos o campo obrigatório para que os usuários preencham essa seção a fim de obter o cálculo do pagamento da hipoteca.

A guia “Advanced” (Avançado) é onde você pode adicionar texto de espaço reservado, especificar as classes CSS que deseja usar, ocultar o rótulo do campo e ativar uma função de cálculo, se necessário.

Por padrão, o formulário exibe um sinal de “$” para que os usuários saibam que devem inserir seus valores em dólares americanos.

Como alternativa, você pode inserir um exemplo no rótulo do campo, como “por exemplo, 500.000”, para que o usuário saiba como inserir o preço corretamente.

A guia “Smart Logic” permite que você ative a lógica condicional no campo. Ela é opcional, mas é um bom recurso para tornar o formulário da calculadora de hipoteca mais atraente.

Para usá-lo, basta ativar o botão “Enable conditional logic” (Ativar lógica condicional).

Em seguida, você pode optar por mostrar ou ocultar o campo com base em determinados critérios. No exemplo abaixo, optamos por mostrar o campo “Property Price” se o usuário inserir seu endereço de e-mail.

Quando terminar de personalizar o formulário, basta clicar em “Salvar” no canto superior direito.

Configurar as definições do formulário

Agora, vamos mudar para a guia “Settings” (Configurações) no lado esquerdo.

Na guia “General” (Geral), você pode alterar o nome do formulário e adicionar uma descrição à parte superior do formulário. Você pode até mesmo digitar algumas instruções e adicionar uma chamada para ação para incentivar os usuários a preencherem o formulário.

Além disso, você pode personalizar o rótulo e o texto de processamento do botão Enviar.

Você também deve mudar para a guia “Spam Protection and Security”.

O WPForms já vem com proteção anti-spam ativada por padrão. No entanto, você pode ativar o Akismet para obter mais medidas de proteção.

Além disso, fique à vontade para definir um número mínimo de segundos que o usuário deve esperar antes de enviar o formulário. Isso dá aos usuários genuínos tempo suficiente para preencher o formulário, mas não tempo suficiente para um bot de spam enviar o formulário rapidamente.

Rolando para baixo, você também pode ativar um filtro de país, que limita o formulário a usuários de países específicos. Recomendamos essa configuração se o seu site imobiliário só vende em um determinado país.

Depois de ativar o botão “Enable country filter” (Ativar filtro de país), basta clicar em “Allow” (Permitir) abaixo do Country Filter (Filtro de país) e selecionar o país para o qual você vende.

Você também pode personalizar a mensagem do filtro de país, se necessário.

Se você descer na página, também poderá evitar envios de formulários com spam usando um CAPTCHA.

O WPForms suporta CAPTCHA personalizado , reCAPTCHA e hCAPTCHA.

Vamos prosseguir e passar para a guia “Notificações”.

O WPForms pode lhe enviar um e-mail sempre que alguém preencher o formulário. Para ativar essa função, basta clicar em ‘Enable Notifications’ (Ativar notificações).

Dica profissional: para responder imediatamente aos novos envios de formulários, certifique-se de que essas mensagens cheguem com segurança à sua caixa de entrada e não à pasta de spam. Dito isso, recomendamos o uso de um provedor de serviços SMTP para melhorar suas taxas de entregabilidade de e-mail e corrigir o problema de o WordPress não enviar e-mails corretamente.

Você pode editar o conteúdo do e-mail conforme necessário. Além disso, você pode enviar e-mails de confirmação após o envio do formulário do WordPress.

Quando estiver satisfeito com essas configurações, não se esqueça de clicar em “Save” (Salvar) para armazenar as alterações.

Incorporar a Calculadora de custos de hipoteca em seu site WordPress

Agora você está pronto para exibir a calculadora de hipoteca em seu blog ou site do WordPress. Para fazer isso, clique no botão “Embed” (Incorporar) no menu superior.

Agora, você pode adicionar o formulário a uma página existente ou criar uma página completamente nova.

Como alternativa, você pode usar um shortcode.

O processo para adicionar o formulário a uma página existente ou nova é bastante semelhante.

Se você clicar em “Select Existing Page” (Selecionar página existente), poderá escolher a página que deseja usar. Depois disso, clique em “Let’s Go!”.

Se você optar por criar uma nova página, precisará digitar um título para a página.

Da mesma forma que no método anterior, clique em “Let’s Go!” para continuar.

Ambas as opções o levarão ao editor de blocos padrão do WordPress.

Aqui, clique no botão de bloco “+” e selecione o bloco WPForms.

No novo bloco, abra o menu suspenso “Select a Form” (Selecionar um formulário).

Depois disso, basta selecionar o formulário que você criou anteriormente.

Agora você verá o formulário recém-criado.

Na barra lateral Block settings (Configurações do bloco), você pode personalizar ainda mais o design do formulário. Por exemplo, você pode alterar a cor do plano de fundo e a borda do campo. Você também pode retornar ao construtor do WPForms selecionando “Editar formulário”.

Quando você estiver satisfeito com a aparência do formulário, basta clicar em “Update” (Atualizar) ou “Publish” (Publicar) para que as alterações sejam aplicadas.

Veja como é o nosso formulário de calculadora de hipoteca:

Se estiver usando um tema clássico do WordPress que não seja em bloco, você também poderá exibir o formulário em uma área pronta para widgets.

Basta acessar Appearance ” Widgets e clicar no botão “+” adicionar bloco em qualquer área preparada para widgets. Agora você pode adicionar o bloco WPForms e selecionar o formulário que acabou de criar.

No editor de widgets, você também pode editar as configurações de bloco do widget de calculadora de hipoteca.

Quando estiver satisfeito com a aparência do formulário, basta clicar em “Update” (Atualizar).

Como alternativa, se esses métodos não funcionarem, você poderá usar o método de shortcode para inserir os formulários em páginas, posts e outras partes do modelo. Basta retornar ao editor do WPForms e clicar em “usar um shortcode” na janela pop-up de incorporação.

Em seguida, você pode copiar o shortcode e adicioná-lo a qualquer página, post ou área pronta para widgets.

Para obter mais informações, consulte nosso guia sobre como adicionar um shortcode no WordPress.

Método 2: Adicionar uma calculadora avançada de hipoteca do WordPress com formulários formidáveis

Esse próximo método é excelente se você quiser criar uma calculadora avançada de hipoteca em WordPress que leve em conta seus impostos anuais sobre a propriedade, seguro e PMI (seguro hipotecário privado).

Quando o formulário tiver esses dados, juntamente com o preço da casa própria do usuário, o valor do empréstimo, o prazo do empréstimo e a taxa de juros, ele poderá exibir o detalhamento do pagamento do usuário, que também é chamado de cronograma de amortização.

Para esse método, usaremos o plugin Formidable Forms. Esse plugin de formulário de contato do WordPress, de fácil utilização, vem com um modelo avançado de calculadora de hipoteca que pode ser adicionado ao seu site.

A primeira coisa que você precisa fazer é instalar e ativar os plug-ins Formidable Forms Lite e Formidable Forms Premium (plano Business).

O plug-in gratuito tem recursos limitados, mas o Formidable Forms Pro o utiliza como base para seus recursos mais avançados.

Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Formidable ” Global Settings no painel do WordPress. Aqui, você pode clicar em “Conectar uma conta”.

Na próxima tela, basta fazer login na sua conta do Formidable Forms.

O Formidable Forms agora pedirá permissão para instalar o plug-in Pro. Basta clicar em ‘Connect and Install Formidable Forms Pro’ (Conectar e instalar o Formidable Forms Pro) para ativar sua chave de licença.

Agora que você configurou o Formidable Forms com êxito, está pronto para adicionar um formulário de calculadora de hipoteca ao WordPress.

Use o modelo de formulário de calculadora avançada de hipoteca

Para começar, vá para Formidable ” Forms e clique em ‘Add New’.

Um pop-up será exibido, mostrando todos os modelos prontos que você pode usar em seu site do WordPress.

Para encontrar o modelo de formulário de cálculo de hipoteca, basta digitar “Advanced Mortgage Calculator” na barra de pesquisa. Em seguida, passe o cursor sobre o modelo e clique em “Use Template” (Usar modelo).

Agora você chegará ao construtor de formulários Formidable Forms. Neste ponto, você pode personalizar o formulário de acordo com suas necessidades.

Para começar, clique no campo que você deseja personalizar e selecione a guia “Field Options” (Opções de campo).

A partir daí, você pode alterar o rótulo do campo, escolher se o campo é obrigatório ou opcional, adicionar texto de espaço reservado e muitas outras coisas.

Com o Formidable Forms, você também pode inserir um valor padrão na calculadora. Isso permite que os usuários vejam como será o seu cálculo.

Se você clicar em qualquer um dos campos da seção “Análise financeira”, tente evitar alterar as “Opções avançadas”.

Essa área contém as fórmulas de cálculo e, portanto, alterá-las pode interromper completamente a calculadora de hipoteca.

Quando estiver satisfeito com a aparência do formulário, basta clicar em “Save” (Salvar) no canto superior direito para salvar as alterações.

Depois disso, digite um nome para o formulário para que você possa identificá-lo facilmente mais tarde. Em seguida, clique em “Salvar”.

Personalizar o estilo do formulário da calculadora de hipoteca

Vamos agora mudar para a guia “Style” (Estilo) no menu superior. É aqui que você pode escolher um design para o formulário.

Se você não gostar de nenhum dos estilos, basta clicar no botão “+ New Style”.

Depois disso, aparecerá uma janela pop-up. Basta digitar um nome para esse novo estilo e clicar em “Criar novo estilo”.

Agora você será direcionado para uma página em que poderá personalizar o estilo do formulário.

Sinta-se à vontade para modificar a tipografia, o esquema de cores, os estilos dos botões, as caixas de seleção e assim por diante.

Quando estiver satisfeito com o design, basta clicar no botão “Update” (Atualizar) no canto superior direito.

Configurar as definições do Formidable Forms

Nessa etapa, você pode navegar até o menu “Settings” (Configurações) na parte superior.

Primeiro, você pode personalizar o título e a descrição do formulário na guia “General” (Geral). Esse pode ser um bom lugar para inserir algumas instruções sobre como usar o formulário.

Você também pode estilizar o texto usando HTML.

Ao rolar a tela para baixo, você encontrará uma configuração que ativa o Honeypot e o JavaScript.

Recomendamos ativar ambas as configurações, pois elas podem evitar entradas de spam falsas e mal-intencionadas.

A guia “Actions & Notifications” (Ações e notificações) é onde você pode personalizar o e-mail de confirmação que o Formidable Forms envia ao usuário.

Você pode exibir uma mensagem de agradecimento personalizada, redirecionar os usuários para um URL específico ou enviá-los para uma página diferente.

Outra guia que recomendamos verificar é ‘Buttons’.

É aqui que você pode personalizar o rótulo e a posição do botão Enviar e até mesmo adicionar um botão “Recomeçar”, caso o usuário queira reiniciar o envio do formulário.

Depois de definir as configurações do formulário, basta clicar no botão “Update” (Atualizar) para salvar as alterações.

Incorpore o formulário Advanced Mortgage Calculator em seu site

Agora que seu formulário avançado de calculadora de hipoteca está pronto, você pode adicioná-lo a qualquer post, página ou área pronta para widget.

Para começar, clique no botão “Incorporar” no canto superior direito.

Agora você verá uma janela pop-up que diz que você pode adicionar o formulário de três maneiras.

Você pode adicionar o formulário a uma página existente, criar uma nova página ou usar um shortcode.

Se escolher a opção de página existente, você selecionará uma página na próxima tela.

Em seguida, clique em “Inserir formulário”.

Por outro lado, se você escolher a opção de nova página, poderá digitar um nome para a nova página.

Feito isso, clique em “Criar página”.

Com ambas as opções, o Formidable Forms insere automaticamente o bloco de formulários no editor de blocos da página.

Se você precisar editar o formulário diretamente no editor de blocos, basta abrir a barra lateral de configurações do bloco e clicar em “Go to form” (Ir para o formulário).

Quando estiver pronto, clique em “Publicar” ou “Atualizar”.

Esta é a aparência do nosso formulário de calculadora de hipoteca da Formidable Forms:

Como alternativa, você pode adicionar a calculadora de hipoteca usando um código curto ou um código PHP.

Na janela pop-up de incorporação anterior, clique em “Inserir manualmente”.

Em seguida, você pode copiar o shortcode ou o código PHP. Novamente, para a primeira opção, você pode ler nosso artigo sobre como adicionar um shortcode no WordPress.

Quanto ao código PHP, só recomendamos esse método se você se sentir à vontade para trabalhar com trechos de código. Recomendamos o uso do WPCode para isso, pois esse plug-in torna fácil e segura a inserção de código no WordPress.

Para obter mais informações, você pode ler nosso guia sobre como inserir trechos de código no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma calculadora de hipoteca no WordPress. Talvez você também queira ver nosso artigo sobre como criar uma calculadora de empréstimo ou pagamento de carro no WordPress e nossas dicas de especialistas sobre as melhores maneiras de criar formulários mais interativos.

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.