Tutoriais confiáveis de WordPress, quando você mais precisa.
Guia para Iniciantes em WordPress
WPB Cup
30 Milhões+
Sites usando nossos plugins
20+
Anos de experiência com WordPress
3000+
Tutoriais de WordPress por especialistas

Como Adicionar uma Calculadora de Hipoteca no WordPress (Passo a Passo)

Uma calculadora de hipoteca responde à pergunta com a qual seus visitantes realmente vieram: quanto custaria esta casa por mês? Sem uma, eles saem da sua página para fazer as contas no site de um banco.

É também um ímã de leads natural para agentes imobiliários, corretores e credores. Peça um nome e endereço de e-mail junto com os detalhes do empréstimo, e cada cálculo se torna um contato com o qual você pode fazer acompanhamento.

Neste artigo, mostraremos três maneiras de adicionar uma calculadora de hipoteca no WordPress: um embed gratuito sem plugin, um plugin gratuito que roda diretamente no WordPress e um construtor de formulários que captura um lead a cada cálculo.

Como Adicionar uma Calculadora de Hipotecas no WordPress

Qual Método Você Deve Usar?

EscolhaMelhor ParaPreços
Embed da mortgagecalculator.orgUma calculadora rápida sem pluginGrátis
Calculadora de Hipoteca ResponsivaUma calculadora que funciona diretamente no WordPress e suporta sua própria moedaGrátis
WPFormsCapturando um lead a cada cálculoPlano Pro e acima

Método 1: Incorpore uma Calculadora de Hipoteca Gratuita (Sem Plugin)

A maneira mais fácil de criar uma calculadora de hipoteca é com a calculadora gratuita incorporável da mortgagecalculator.org. Na página, você pode definir valores padrão para o preço da casa, taxa de juros, prazo do empréstimo, imposto sobre a propriedade, PMI e seguro do proprietário.

Definindo valores padrão para a calculadora incorporável mortgagecalculator.org

A ferramenta atualiza o código de incorporação à medida que você altera essas configurações. Se você atende visitantes fora dos EUA, também pode adicionar um parâmetro de idioma ao código. Por exemplo, &lang=en-GB usa configurações do Reino Unido, enquanto &lang=de-DE usa configurações alemãs.

Depois de ficar satisfeito com as configurações, copie o código gerado.

Copiando o código HTML gerado

Em seguida, abra uma postagem ou página no WordPress e adicione um bloco de HTML Personalizado. Clique em 'Editar HTML' para adicionar o código gerado.

Adicionando um bloco de HTML personalizado

No pop-up que aparece, cole o código de incorporação da calculadora de hipoteca. Você verá uma prévia à direita. Se tudo parecer correto, clique em 'Atualizar' para manter suas alterações.

Colando o código de incorporação da calculadora de hipoteca em um bloco de HTML personalizado

Finalmente, clique no botão 'Salvar' ou 'Atualizar' para publicar suas alterações.

Veja como a calculadora fica no front-end:

A incorporação do mortgagecalculator.org exibida em uma página do WordPress

Lembre-se de que a calculadora é hospedada em um servidor de terceiros, portanto, você não pode alterá-la para combinar com seu site. Ela também não suporta captura de leads.

Se você quiser exibir a calculadora em todo o site, como em uma barra lateral ou rodapé, pode usar o WPCode para inseri-la.

Método 2: Adicione uma Calculadora de Hipoteca Simples e Responsiva

Se você deseja que a calculadora funcione nativamente no WordPress em vez de em um iframe, o Responsive Mortgage Calculator é uma boa opção gratuita. Ele tem mais de 7.000 instalações ativas e é ativamente mantido.

Primeiro, vamos instalar e ativar o plugin. Vá para Plugins » Adicionar Plugin no seu painel do WordPress e clique em 'Instalar agora' na caixa do plugin Responsive Mortgage Calculator.

Instalando o plugin Calculadora de Hipoteca Responsiva

Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após instalar o plugin, vá para Configurações » Resp Mortgage Calculator para definir sua moeda, período de capitalização (com que frequência os juros são adicionados ao saldo do empréstimo) e taxa de juros padrão.

Configurando as configurações da Calculadora de Hipoteca Responsiva com uma moeda não-dólar

Clique em 'Salvar alterações' para manter suas configurações.

Depois disso, você pode adicionar a calculadora a qualquer página ou postagem usando o shortcode [mortgagecalculator], ou arrastá-la para uma área de widget.

Adicionando o shortcode da Calculadora de Hipoteca Responsiva

Não se preocupe se não vir uma prévia. O shortcode ainda funcionará, então você pode prosseguir e clicar em 'Salvar' ou 'Atualizar' para publicá-lo.

Agora, você pode visitar seu site para vê-lo em ação:

A Calculadora de Hipoteca Responsiva exibida com uma moeda que não seja o dólar

Além disso, há algumas limitações a serem consideradas. Você só pode ter uma calculadora por página, as opções de estilo são básicas e não há campos para impostos sobre a propriedade ou seguro. Ele também não captura leads.

Método 3: Crie uma Calculadora de Hipoteca de Captura de Leads

Se você deseja capturar leads enquanto os visitantes usam sua calculadora, o WPForms é a melhor escolha. Ele permite coletar um nome e um endereço de e-mail junto com o cálculo deles. Você precisará do plano Pro ou superior, que inclui o addon Calculations que esses modelos usam.

Na WPBeginner, usamos o WPForms para nossos próprios formulários e o recomendamos. Você pode saber mais em nossa análise completa do WPForms.

Crie o Formulário a Partir de um Modelo

Primeiro, vamos instalar e ativar o WPForms e inserir sua chave de licença. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Instalando o WPForms no WordPress

Em seguida, vá para WPForms » Adicionar Novo Formulário e nomeie sua calculadora de hipoteca. O WPForms tem alguns modelos de calculadora de hipoteca:

  • Calculadora de Hipoteca Simples, que é melhor se você quiser apenas uma estimativa rápida do pagamento mensal.
  • Calculadora de Hipoteca, que também mostra o total de juros pagos e o valor do pagamento anual.
  • Gerador de Leads de Hipoteca, que vem com campos de nome e e-mail já no lugar. Se você o escolher, pode pular a etapa de captura de leads abaixo.

Se preferir usar outro modelo, clique em um modelo e depois em ‘Usar Modelo’.

Encontrando o modelo de calculadora de hipoteca no WPForms

Um pop-up solicitará que você instale e ative o addon Calculations. Clique em ‘Instalar e ativar’.

Instalando e ativando o Addon de Cálculos

O WPForms o levará ao editor de arrastar e soltar. Você pode ver todas as opções de personalização no painel esquerdo e uma prévia à direita.

Calculadora de hipoteca no editor do WPForms

Este modelo vem com os campos e a fórmula da calculadora já configurados. Você pode encontrar a fórmula clicando no campo ‘Pagamento Mensal’ e verificando em Opções do Campo » Avançado » Fórmula.

Você pode deixá-lo como está se quiser apenas uma estimativa de pagamento mensal.

A fórmula no modelo de calculadora de hipoteca do WPForms

No entanto, nenhum dos modelos inclui campos de imposto sobre propriedade ou PMI (seguro hipotecário privado). Se você quiser adicioná-los, primeiro precisará adicionar campos para esses valores ao seu formulário.

Se preferir não criá-los você mesmo, o modelo Calculadora de Hipoteca Avançada do Formidable Forms vem com campos de impostos e seguros integrados.

Você pode usar o campo Números, que aceita apenas entrada numérica, para que a fórmula não quebre se alguém digitar texto. Simplesmente arraste e solte-o do painel Adicionar Campos para o painel de prévia. Em seguida, altere o Rótulo na aba ‘Opções do Campo’.

Adicionando um campo de imposto

Repita esta etapa para todos os campos adicionais de que você precisar.

Depois de adicionar os campos, clique no campo ‘Pagamento Mensal’ para configurar a nova fórmula. Em seguida, clique em ‘Gerar Fórmula’ ao lado da caixa Fórmula e descreva como você deseja que eles sejam incluídos no cálculo.

Por exemplo: “Adicione o imposto anual sobre a propriedade e o PMI ao pagamento mensal da hipoteca. Divida o imposto anual sobre a propriedade por 12. Calcule o PMI mensal multiplicando o valor do empréstimo pela taxa do PMI e dividindo por 12.”

Gerando fórmula para incluir imposto e PMI

Depois que a IA gerar a fórmula para você, clique em ‘Inserir Fórmula’.

Em seguida, clique no link ‘Validar Fórmula’ no editor para garantir que tudo funcione bem.

Validando fórmula gerada por IA
Adicionar Captura de Leads e Notificações

Ambos os modelos já incluem um campo de E-mail. Para capturar o lead, arraste e solte também um campo ‘Nome’ no formulário.

Adicionando um campo de Nome para capturar leads no WPForms

Em seguida, vamos mudar para a aba ‘Notificações’ e garantir que as notificações estejam ativadas para que você receba um e-mail toda vez que alguém preencher o formulário.

Habilitando as notificações por e-mail do WPForms

O WPForms tem proteção anti-spam por padrão. E como essas notificações são importantes, recomendamos um serviço SMTP para que elas não caiam na caixa de spam. Veja nosso guia se o WordPress não estiver enviando e-mails.

Incorpore a Calculadora

Agora é hora de incorporar sua calculadora de hipoteca para captura de leads.

Clique em ‘Incorporar’ no menu superior. Você pode então adicionar o formulário a uma página existente ou nova, ou copiar o shortcode. Se você escolher ‘Página Existente’, selecione a página onde deseja incorporar sua calculadora na próxima janela pop-up. Isso o levará ao editor da página.

Popup de incorporação do WPForms

No editor, clique no botão ‘+’ para adicionar o bloco WPForms. Depois disso, você pode selecionar sua calculadora de hipoteca para captura de leads no menu suspenso.

Adicionando o bloco WPForms e selecionando o formulário Calculadora de Hipoteca

O WordPress carregará sua calculadora de hipoteca no editor. Se desejar, você pode personalizar e estilizar seu formulário no painel direito. Clique em ‘Salvar’ ou ‘Atualizar’ quando terminar.

Personalizando a calculadora de hipoteca do WPForms

Veja nosso guia sobre como adicionar um shortcode no WordPress se você preferir usar um shortcode.

É isso! Você construiu com sucesso uma calculadora de hipoteca para captura de leads:

Antes de compartilhar a página, faça um teste de cálculo você mesmo e verifique se a entrada aparece em WPForms » Entradas e se o e-mail de notificação chega.

Exemplo de uma calculadora de hipoteca que captura leads, criada com o WPForms

Se você quiser imposto sobre propriedade, seguro e PMI pré-construídos em vez de adicionados com Gerar Fórmula, o modelo Calculadora de Hipoteca Avançada do Formidable Forms os inclui. Veja nossa página Calculadoras do Formidable Forms para detalhes.

FAQ: Adicionar uma Calculadora de Hipotecas no WordPress

Quais elementos são essenciais para uma calculadora de hipoteca?

Uma calculadora de hipoteca básica precisa do valor do empréstimo (preço da casa ou valor da hipoteca), taxa de juros (porcentagem anual), prazo do empréstimo (por exemplo, 15 ou 30 anos) e uma maneira de calcular e mostrar o pagamento mensal. Algumas calculadoras também incluem campos para imposto sobre propriedade, seguro ou taxas de condomínio, mas esses são opcionais.

Posso mudar a moeda de dólares?

Sim, todos os três métodos podem suportar outras moedas, mas o processo é diferente. Com a incorporação gratuita, adicione um código de idioma como &lang=en-GB ao código de incorporação. Com a Calculadora de Hipoteca Responsiva, você pode definir a moeda em Configurações » Calculadora de Hipoteca Responsiva.

Com o WPForms, vá para WPForms » Configurações, abra a aba ‘Pagamentos’ e escolha sua moeda no menu suspenso. Os campos calculados usam essa configuração.

Isso funciona com Elementor ou outros construtores de páginas?

Sim. Você pode colar o shortcode ou o código de embed no widget Shortcode ou HTML do seu construtor de páginas.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma calculadora de hipoteca no WordPress. Quer melhorar ainda mais seu site imobiliário? Estes recursos selecionados podem ajudar:

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.

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

O Kit de Ferramentas Definitivo para WordPress

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

Interações do Leitor

12 ComentáriosDeixe uma Resposta

    • O WPForms permite que você altere moedas, você precisará verificar com o suporte do WPForms as moedas atualmente disponíveis :)

      Admin

      • Obrigado pela dica. Se possível, entrarei em contato com o suporte para saber como mudar a moeda. Infelizmente, na República Tcheca, ninguém gostaria de usar uma calculadora com dólares. Muito obrigado pela sua resposta e orientação.

  1. Artigo legal para adicionar um calculador de hipoteca no WordPress. Ter um calculador de hipoteca é realmente benéfico para blogs financeiros e outros sites relacionados, pois os visitantes não precisam visitar um site diferente para obter um cálculo de hipoteca, tudo em uma única experiência para os usuários faz com que eles permaneçam mais.
    Mas eu quero perguntar se um código CSS personalizado pode ser aplicado ao calculador e torná-lo mais atraente?

    • Eu uso o WP Forms e quando crio formulários, ele permite que você defina seu próprio CSS. Existe um guia bem bom sobre como fazer isso diretamente no site do WP Forms, onde também obtive conselhos. Certifique-se de conferir e você aprenderá muito sobre como personalizar formulários para você.

  2. Olá, quero saber se a moeda de um país diferente afetará a calculadora de hipoteca? Vejo nas capturas de tela apenas $, mas eu gostaria que fosse Rand Sul-Africano (R), isso seria possível?

    • A mudança de moeda não deve causar problemas, se você entrar em contato com o suporte do Formidable Forms, eles poderão ajudá-lo com quaisquer dúvidas que você possa ter sobre como configurá-lo.

      Admin

  3. Olá. Como trabalhamos com bancos diferentes e cada um deles tem sua própria taxa de juros, é possível ter uma opção para os clientes selecionarem seu banco preferido com base em sua taxa de juros ou posso usar apenas 1 taxa de juros específica predefinida?

    • Você precisaria entrar em contato com o suporte do plugin para obter os detalhes e provavelmente conseguiria configurar da maneira que deseja.

      Admin

Deixe uma resposta

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