Uma calculadora de hipoteca pode realmente aumentar a eficácia do seu site. E a verdade é que, sem uma calculadora de hipoteca em seu site, você provavelmente está perdendo clientes potenciais para outros sites.
Já vimos isso acontecer repetidamente: visitantes chegam ao seu site, se interessam, e depois saem para calcular pagamentos em outro lugar — muitas vezes sem nunca mais voltar.
É por isso que ter sua própria calculadora é tão importante. Ela ajuda a manter os visitantes engajados e os transforma em leads. 🙌
Neste guia passo a passo, mostraremos exatamente como adicionar uma calculadora de hipoteca ao seu site WordPress. Encontramos os métodos mais confiáveis e fáceis de usar que funcionam para todos, independentemente da sua experiência técnica.
Por que adicionar uma calculadora de hipoteca no WordPress?
Uma calculadora de hipoteca permite que os usuários obtenham estimativas para seus pagamentos de 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, entrada, taxas de juros, etc. Depois disso, a calculadora calculará quanto eles precisam pagar por mês.
Se você está criando um site de imóveis com listagens de propriedades IDX, então uma calculadora de hipoteca também ajudará na geração de leads. Os visitantes podem usar a calculadora, mas terão que inserir seu endereço de e-mail para salvar seus resultados.
Isso também pode reduzir sua taxa de rejeição, já que os visitantes não precisam visitar um site diferente para obter um cálculo de hipoteca.
Consultores financeiros, corretores de hipotecas, bancos e educadores financeiros pessoais também podem se beneficiar da adição de uma calculadora de hipotecas em seus sites.
Dito isso, vamos dar uma olhada em como criar facilmente uma calculadora de hipotecas no WordPress. Este tutorial mostrará dois métodos fáceis para iniciantes com dois plugins diferentes de calculadora de hipotecas: WPForms e Formidable Forms.
Você pode usar estes links rápidos para pular para um plugin específico:
- Método 1: Adicionar uma Calculadora de Hipotecas Simples no WordPress com WPForms
- Método 2: Adicionar uma Calculadora de Hipotecas Avançada no WordPress com Formidable Forms
- Recursos Bônus 🔗: Expanda seu Site WordPress de Imóveis
Vamos começar!
Método 1: Adicionar uma Calculadora de Hipotecas Simples no WordPress com WPForms
O primeiro método é usar o WPForms. Com suas ferramentas de IA e mais de 2.000 modelos de formulários, este plugin de formulário de arrastar e soltar permite que você crie vários formulários, incluindo uma calculadora de hipotecas.
Este método é recomendado para pessoas que desejam apenas criar uma calculadora de hipotecas simples, mas responsiva, sem cálculos adicionais para impostos ou seguros.
No WPBeginner, usamos o WPForms para criar todos os tipos de formulários — desde nosso formulário de contato até nossas pesquisas anuais com leitores. É nossa ferramenta preferida, e nós a recomendamos fortemente. Veja nossa análise completa do WPForms para saber mais sobre ele.
Primeiramente, prossiga e instale o plugin no WordPress.
📝 Observação: Embora exista uma versão gratuita do WPForms, este tutorial usará o plano Pro, pois ele inclui o complemento de Cálculos. Aqui está um desconto do WPForms que você pode usar para economizar 50% em sua compra!
Com isso feito, vá para WPForms » Configurações e insira a chave de licença do seu plano Pro da sua página de conta do WPForms. Em seguida, simplesmente clique em ‘Verificar Chave’.
Escolha e personalize um modelo de formulário de calculadora de hipoteca
Assim que a chave de licença estiver ativa, você precisará navegar para WPForms » Adicionar Novo.
Na próxima tela, você pode dar um nome ao seu novo formulário. Pode ser algo tão simples quanto ‘Formulário Calculadora de Hipoteca’.
Depois disso, você escolherá como construir o formulário. Com o WPForms, você pode:
- usar uma tela em branco para criar formulários do zero
- aproveitar o construtor de formulários com IA para criar formulários instantaneamente usando um prompt simples
- escolher um modelo pré-fabricado.
Para este tutorial, mostraremos como usar um modelo e personalizá-lo para atender às suas necessidades usando o editor de arrastar e soltar.
Então, vamos rolar para baixo na página ‘Configuração’ e usar a barra de pesquisa para encontrar um modelo de formulário de calculadora de hipoteca.
O WPForms tem dois modelos: Formulário Calculadora de Hipoteca e Formulário Calculadora de Hipoteca Simples. Ambos os modelos fornecem funcionalidades semelhantes, mas têm campos ligeiramente diferentes.
O Modelo de Formulário Calculadora de Hipoteca Simples é melhor para sites imobiliários que desejam ajudar potenciais compradores a estimar rapidamente seu pagamento mensal da hipoteca.
Por outro lado, o Modelo de Formulário Calculadora de Hipoteca fornece uma análise abrangente dos detalhes da hipoteca, incluindo juros totais pagos, pagamento total da hipoteca e 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 ‘Ver Demonstração’ para ver cada formulário em ação. Você pode escolher qualquer um dos modelos, mas para este tutorial, usaremos o Modelo de Formulário Calculadora de Hipoteca.
Depois de fazer sua escolha, basta passar o mouse sobre a caixa e clicar em ‘Usar Modelo’.
Nesta fase, um pop-up aparecerá dizendo que você precisa do addon de Cálculos.
Basta clicar em ‘Sim, instalar e ativar’ para continuar.
Agora você chegará ao construtor de formulários de arrastar e soltar. Como você pode ver, o modelo já vem com os campos de calculadora integrados.
Este modelo em particular tem campos onde os usuários podem inserir o valor de sua casa (custo total da casa) e o valor de seu pagamento inicial (quanto o comprador paga adiantado ao adquirir uma propriedade).
Os usuários também podem usar os controles deslizantes para inserir informações sobre a taxa de juros de seu empréstimo imobiliário e o prazo da hipoteca.
Após inserir essas informações, a seção inferior irá calcular automaticamente o valor do pagamento mensal e anual da hipoteca do usuário, o total de juros pagos e o pagamento total da hipoteca.
Você pode encontrar essa fórmula de cálculo indo em ‘Opções de Campo’ e navegando até a aba ‘Avançado’ no painel esquerdo. Na parte inferior, você encontrará a caixa ‘Fórmula’.
Recomendamos não fazer alterações nesta seção, a menos que você tenha confiança para fazê-lo. Dito isso, o WPForms tem uma folha de consulta de Cálculos que você pode usar se precisar de ajuda.
Se você estiver com dificuldades na fórmula, pode usar o recurso Cálculos com IA para facilitar.
Simplesmente clique no botão ‘Gerar Fórmula’ ao lado da caixa Fórmula.
Isso abrirá uma janela de chat onde você pode descrever que tipo de cálculo precisa em linguagem simples, e a IA gerará instantaneamente a fórmula correta para você.
Agora, vamos personalizar o formulário. Para adicionar um novo campo, vá para a seção ‘Adicionar Campos’ no painel esquerdo. Em seguida, basta arrastar e soltar qualquer campo para o construtor de formulários.
Aqui, adicionamos um campo ‘Nome’ ao formulário para capturar o nome do usuário.
Para personalizar um campo, basta clicar nele, e o painel esquerdo exibirá a aba ‘Opções do Campo’. Aqui, você encontrará três abas: Geral, Avançado e Lógica Inteligente.
Se você quiser alterar o rótulo do campo, inserir texto descritivo ou tornar o campo obrigatório, você precisará selecionar ‘Geral’.
Na imagem a seguir, alteramos o rótulo do campo ‘Valor da Casa’ para ‘Preço do Imóvel’ e adicionamos algumas instruções adicionais. Também tornamos o campo obrigatório, para que os usuários devam completar esta seção para obter o cálculo do pagamento da hipoteca.
A aba ‘Avançado’ é onde você pode adicionar texto de espaço reservado, especificar quaisquer classes CSS que deseja usar, ocultar o rótulo do campo e habilitar 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.
Alternativamente, você pode inserir um exemplo no rótulo do campo, como ‘ex. 500.000’, para que o usuário saiba como inserir o preço corretamente.
A aba ‘Lógica Inteligente’ permite que você habilite lógica condicional no campo. É opcional, mas é um bom recurso para tornar seu formulário de calculadora de hipoteca mais envolvente.
Para usá-la, basta ativar o botão ‘Habilitar lógica condicional’.
Em seguida, você pode escolher mostrar ou ocultar o campo com base em certos critérios. No exemplo abaixo, escolhemos mostrar o campo ‘Preço do Imóvel’ se o usuário inserir seu endereço de e-mail.
Assim que terminar de personalizar o formulário, clique em ‘Salvar’ no canto superior direito.
Configure as Definições do Formulário
Agora, vamos prosseguir e mudar para a aba ‘Configurações’ no lado esquerdo.
Na aba ‘Geral’, você pode alterar o nome do formulário e adicionar uma descrição no topo do formulário. Você pode até 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 do botão de envio e o texto de processamento.
Você também vai querer mudar para a aba ‘Proteção contra Spam e Segurança’.
O WPForms já vem com proteção anti-spam que está ativada por padrão. No entanto, você pode ativar o Akismet para medidas de proteção adicionais.
Adicionalmente, sinta-se à vontade para definir um número mínimo de segundos que um 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 esta configuração se o seu site imobiliário vende apenas em um determinado país.
Depois de ativar o botão 'Ativar filtro de país', basta clicar em 'Permitir' abaixo do 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 pode impedir envios de formulários com spam usando um CAPTCHA.
O WPForms suporta CAPTCHA, reCAPTCHA e hCAPTCHA personalizados.
Vamos prosseguir para a aba 'Notificações'.
O WPForms pode enviar um e-mail para você toda vez que alguém preencher o formulário. Para ativar esta função, basta clicar em 'Ativar Notificações'.
🧑💻 Dica Pro: Para responder a novas submissões de formulário imediatamente, você vai querer garantir 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 entrega de e-mail e resolver 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 de formulários do WordPress.
Quando estiver satisfeito com essas configurações, não se esqueça de clicar em 'Salvar' para armazenar suas alterações.
Incorpore a Calculadora de Custo de Hipoteca em seu site WordPress
Agora você está pronto para exibir a calculadora de hipoteca em seu blog WordPress ou site. Para fazer isso, clique no botão 'Incorporar' no menu superior.
Agora, você pode adicionar o formulário a uma página existente ou criar uma página completamente nova.
Alternativamente, você pode usar um shortcode.
O processo para adicionar o formulário a uma página existente ou nova é bem semelhante.
Se você clicar em ‘Selecionar Página Existente’, poderá escolher a página que deseja usar. Depois disso, clique em ‘Vamos!’
Se você optar por criar uma nova página, precisará digitar um título para a página.
Semelhante ao método anterior, clique em ‘Vamos!’ para prosseguir.
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 ‘Selecionar um Formulário’.
Depois disso, basta escolher o formulário que você criou anteriormente.
Agora você verá seu formulário recém-criado.
Na barra lateral de configurações do bloco, você pode personalizar ainda mais o design do formulário.
Por exemplo, você pode alterar a cor de fundo e a borda dos campos. Você também pode retornar ao construtor do WPForms selecionando ‘Editar Formulário’.
Quando estiver satisfeito com a aparência do formulário, basta clicar em ‘Atualizar’ ou ‘Publicar’ para tornar as alterações ao vivo.
Veja como nosso formulário de calculadora de hipoteca fica:
Se você estiver usando um tema WordPress clássico, que não seja de blocos, você também pode exibir o formulário em uma área pronta para widgets.
Basta ir em Aparência » Widgets e clicar no botão ‘+’ para adicionar um bloco em qualquer área pronta 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 do bloco do widget de calculadora de hipoteca.
Quando estiver satisfeito com a aparência do formulário, basta clicar em ‘Atualizar’.
Alternativamente, se esses métodos não funcionarem, você pode usar o método de shortcode para inserir os formulários em páginas, posts e outras partes do modelo.
Simplesmente retorne ao editor do WPForms e clique em ‘usar um shortcode’ no pop-up de incorporação.
Você pode então copiar o shortcode e adicioná-lo a qualquer página, post ou área pronta para widgets.
Para mais informações, consulte nosso guia sobre como adicionar um shortcode no WordPress.
Método 2: Adicionar uma Calculadora de Hipotecas Avançada no WordPress com Formidable Forms
Este próximo método é excelente se você deseja criar uma calculadora de hipoteca avançada para WordPress que leve em consideração seus impostos anuais sobre a propriedade, seguro e PMI (seguro hipotecário privado).
Uma vez que o formulário tenha esses dados, juntamente com o preço da casa do usuário, valor do empréstimo, prazo do empréstimo e taxa de juros, ele poderá exibir o detalhamento do pagamento do usuário, que também é chamado de cronograma de amortização.
Para este método, usaremos o plugin Formidable Forms. Este plugin de formulário de contato amigável para WordPress vem com um modelo de calculadora de hipoteca avançada que você pode adicionar ao seu site.
Fizemos uma análise aprofundada deste plugin e o colocamos à prova. Você pode encontrar tudo sobre ele em nossa análise detalhada do Formidable Forms!
A primeira coisa que você precisa fazer é instalar e ativar os plugins Formidable Forms Lite e Formidable Forms Premium (plano Business).
O plugin gratuito tem recursos limitados, mas o Formidable Forms Pro o utiliza como base para seus recursos mais avançados.
Para instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para Formidable » Configurações Globais 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 solicitará permissão para instalar o plugin Pro. Basta clicar em ‘Conectar e Instalar Formidable Forms Pro’ para ativar sua chave de licença.
Agora que você configurou o Formidable Forms com sucesso, está pronto para adicionar um formulário de calculadora de hipoteca ao WordPress.
Use o Modelo de Formulário de Calculadora de Hipoteca Avançada
Para começar, vá para Formidable » Formulários e clique em ‘Adicionar Novo’.
Uma janela pop-up aparecerá, mostrando todos os modelos prontos que você pode usar em seu site WordPress.
Para encontrar o modelo de formulário de cálculo de hipoteca, basta digitar ‘Calculadora de Hipoteca Avançada’ na barra de pesquisa. Em seguida, passe o cursor sobre o modelo e clique em ‘Usar Modelo’.
Você chegará agora ao construtor do Formidable Forms.
Neste ponto, você pode personalizar o formulário para atender às suas necessidades.
Para começar, clique no campo que você deseja personalizar e, em seguida, selecione a guia ‘Opções do 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 pode ser o cálculo deles.
Se você clicar em qualquer um dos campos na seção ‘Análise Financeira’, tente evitar alterar as ‘Opções Avançadas’.
Esta área contém as fórmulas de cálculo, portanto, alterá-las pode quebrar completamente a calculadora de hipoteca.
Quando estiver satisfeito com a aparência do formulário, clique em ‘Salvar’ no canto superior direito para salvar suas alterações.
Depois disso, digite um nome para o seu formulário para que você possa identificá-lo facilmente mais tarde. Em seguida, clique em ‘Salvar’.
Personalize o Estilo do Formulário de Calculadora de Hipoteca
Vamos agora mudar para a guia ‘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 ‘+ Novo Estilo’.
Depois disso, um pop-up aparecerá. Basta digitar um nome para este novo estilo e clicar em ‘Criar novo estilo.’
Você será direcionado para uma página onde poderá personalizar o estilo do formulário.
Sinta-se à vontade para modificar a tipografia, esquema de cores, estilos de botões, caixas de seleção e assim por diante.
Assim que estiver satisfeito com o design, basta clicar no botão ‘Atualizar’ no canto superior direito.
Configurar as Definições do Formidable Forms
Nesta etapa, você pode navegar até o menu ‘Configurações’ na parte superior.
Primeiro, você pode personalizar o título e a descrição do formulário na aba ‘Geral’. Este 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.
Rolando para baixo, você encontrará uma configuração que habilita Honeypot e JavaScript.
Recomendamos habilitar ambas as configurações, pois elas podem prevenir entradas de spam falsas e maliciosas.
A aba ‘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 personalizada de agradecimento, redirecionar os usuários para um URL específico ou enviá-los para outra página.
Outra aba que recomendamos verificar é ‘Botões’.
É aqui que você pode personalizar o rótulo e a posição do botão de envio. Você pode até adicionar um botão ‘Recomeçar’ caso o usuário queira reiniciar o envio do formulário.
Depois de configurar as definições do formulário, basta clicar no botão ‘Atualizar’ para salvar suas alterações.
Incorpore o Formulário Calculadora de Hipoteca Avançada em Seu Site
Agora que seu formulário de calculadora de hipoteca avançada está pronto, você pode adicioná-lo a qualquer post, página ou área pronta para widgets.
Para começar, clique no botão ‘Incorporar’ no canto superior direito.
Agora você verá um pop-up dizendo que 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 você escolher a opção de página existente, 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.
Com isso feito, prossiga e clique em ‘Criar página’.
Com ambas as opções, o Formidable Forms inserirá automaticamente o bloco do formulário no editor de blocos da página.
Se você precisar editar o formulário diretamente do editor de conteúdo, basta abrir a barra lateral de configurações do bloco e clicar em ‘Ir para o formulário’.
Quando estiver pronto, clique em ‘Publicar’ ou ‘Atualizar’.
Veja como nosso formulário de calculadora de hipoteca do Formidable Forms se parece:
Alternativamente, você pode adicionar a calculadora de hipoteca usando um shortcode ou código PHP.
No pop-up de incorporação de antes, 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, recomendamos este método apenas se você se sentir confortável trabalhando com trechos de código. Recomendamos o uso do WPCode para isso, pois este plugin torna seguro e fácil inserir código no WordPress.
Para mais informações, você pode ler nosso guia sobre como inserir trechos de código no WordPress.
E para saber mais sobre o plugin, veja nossa análise completa do WPCode. Alguns de nossos parceiros de negócios o utilizam para inserir e gerenciar trechos de código personalizados, e tem funcionado excepcionalmente bem!
Recursos Bônus 🔗: Expanda seu Site WordPress de Imóveis
Procurando melhorar ainda mais o seu site imobiliário? Desde atrair mais leads até acelerar suas páginas, estes recursos selecionados podem ajudar você a crescer e otimizar seu site WordPress:
- Melhores Plugins de Imóveis para WordPress
- Melhores Temas de WordPress para Imóveis para Corretores
- Como Incorporar um Mapa do Google com um Marcador em Formulários do WordPress
- Como Adicionar Corretamente um Slider de Conteúdo em Destaque no WordPress
- Como Criar um Diretório Web no WordPress
- Dicas para Crescer seu Negócio Online
- O SEO Local Definitivo para WordPress para Aumentar Rankings
- O Guia Definitivo para Aumentar a Velocidade e o Desempenho do WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar uma calculadora de hipoteca no WordPress. Você também pode querer ver nosso artigo sobre como criar uma calculadora de empréstimo de carro 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, 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.
Jiří Vaněk
É possível alterar dólares para outra moeda na calculadora. Ex: CZK (coroa tcheca)?
WPBeginner Support
WPForms does allow you to change currencies, you would need to check with WPForms’ support for the current currencies available
Admin
Jiří Vaněk
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.
Mrteesurez
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?
WPBeginner Support
Dependeria de como você quer que fique, mas você pode aplicar CSS a esses plugins.
Admin
Jiří Vaněk
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ê.
Karina Le Roux
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?
WPBeginner Support
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
Erick
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?
WPBeginner Support
Você precisaria entrar em contato com o suporte do plugin para obter os detalhes e provavelmente conseguiria configurar da maneira que deseja.
Admin
Nitin
se eu mudar o tema do WordPress isso pode afetar o SEO
WPBeginner Support
Dependendo do tema, pode ter algum efeito, mas não deve ser um efeito grande
Admin