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

Deseja adicionar uma calculadora de hipoteca no WordPress?

Se você tem um site de imóveis ou de finanças, uma calculadora de hipoteca pode ajudar os visitantes a ver se eles podem pagar pelos imóveis que você está promovendo. Isso pode manter as pessoas em seu site por mais tempo e ajudá-lo a vender mais propriedades.

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 inserir informações como o valor da casa, o pagamento da entrada, as taxas de juros e assim por diante. Depois disso, a calculadora de pagamento de hipoteca calculará quanto eles terão de pagar por mês com base nos detalhes fornecidos.

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 porque os visitantes não precisam acessar outro site para obter um cálculo de hipoteca.

Outras pessoas que podem se beneficiar de uma calculadora de hipoteca em seus sites são consultores financeiros, corretores de hipotecas ou bancos e educadores de finanças pessoais.

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ários, esse plug-in de formulário de arrastar e soltar é perfeito para criar vários formulários, inclusive uma calculadora de hipoteca, para diferentes tipos de sites.

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.

Depois disso, 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

Agora que a chave de licença está ativa, você precisa 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.

Você verá que 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). Ambos os modelos oferecem funcionalidade semelhante, mas diferem nos campos específicos que incluem.

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 valor 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.

Cabe a você decidir qual calculadora deseja usar, mas, para fins de demonstração, usaremos o modelo de formulário de calculadora de hipoteca.

Você pode clicar em “Exibir demonstração” para ver como cada formulário se parece em ação.

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

Nessa etapa, aparecerá uma janela pop-up informando que o formulário requer o 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 já tem os campos da calculadora adicionados para você.

Esse modelo específico tem campos para os usuários inserirem 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.

Quando o formulário tiver todos os detalhes da hipoteca, 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 a fórmula de cálculo para essa seção inferior acessando “Opções de campo” e navegando até a guia “Avançado” no painel esquerdo. Na parte inferior, você encontrará a caixa “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 do lado esquerdo o levará à guia “Field Options” (Opções de campo). Há três guias que você pode configurar ainda mais: General (Geral), Advanced (Avançado) e Smart Logic (Lógica inteligente).

O que você pode personalizar varia de acordo com o tipo de campo. Se você quiser alterar o rótulo do campo, inserir texto descritivo ou tornar o campo obrigatório, vá para “General” (Geral).

Aqui, alteramos o rótulo do campo “Home Value” para “Property Price” e adicionamos um texto descritivo para instruções adicionais. Também tornamos o campo obrigatório, de modo que os usuários devem inserir esse campo para obter o cálculo do pagamento da hipoteca.

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

Por padrão, o formulário tem um sinal de “$” como espaço reservado para permitir que os usuários saibam que os valores devem estar 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 tiver inserido 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 do menu.

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

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

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. Mas você também 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 gastar antes de poder enviar o formulário. Isso dá aos usuários 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 para permitir que usuários de determinados países preencham o formulário. Recomendamos fazer isso 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á ativar uma funcionalidade CAPTCHA para evitar envios de formulários com spam.

O WPForms permite CAPTCHA, reCAPTCHA e hCAPTCHA personalizados.

Vamos prosseguir e passar para a guia “Notificações”. É aqui que você pode enviar um e-mail para si mesmo sempre que houver um novo envio de formulário.

Para ativar essa função, basta clicar em “Enable Notifications” (Ativar notificações). Também recomendamos o uso do WP Mail SMTP para garantir que você sempre receba essas notificações por e-mail, pois é provável que os e-mails enviados pelo WordPress se percam.

Para obter mais informações sobre isso, consulte nosso guia sobre como corrigir o problema do WordPress que não está enviando e-mails.

Sinta-se à vontade para editar o conteúdo do e-mail conforme necessário.

Você também pode criar um e-mail de confirmação personalizado para o usuário nessas configurações. Para fazer isso, você pode seguir nosso tutorial sobre como enviar e-mails de confirmação após o envio de formulários do WordPress.

Como antes, não se esqueça de clicar em “Save” (Salvar) depois de concluir as configurações.

Incorporar a Calculadora de custos de hipoteca em seu site WordPress

Agora você está pronto para exibir o formulário da calculadora de hipoteca em seu blog ou site do WordPress. O que você precisa fazer é clicar no botão “Embed” (Incorporar) no menu superior.

Agora, uma janela pop-up de incorporação será exibida, solicitando que você selecione uma página existente ou crie uma nova página para adicionar o formulário.

Como alternativa, você também pode usar um shortcode.

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

Se você escolher a opção “Select Existing Page” (Selecionar página existente), a próxima tela solicitará que você escolha uma página à qual adicionar o formulário. Depois disso, clique em “Let’s Go!”.

Se você escolher a opção de nova página, a próxima tela solicitará que você dê um nome a essa nova página para que o WPForms possa criá-la para você.

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 do Gutenberg.

Agora, clique no botão “+” adicionar bloco em qualquer lugar da página e selecione o bloco WPForms.

Quando o bloco estiver lá, 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 exibido no editor de blocos.

Na barra lateral de configurações do bloco, você pode personalizar ainda mais o design do formulário, como a cor de fundo e a borda do campo. Você também pode clicar em “Edit Form” (Editar formulário) para voltar ao construtor do WPForms, se necessário.

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

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

Se você usar um tema WordPress clássico, sem blocos, e quiser exibir o formulário em uma área pronta para widgets, como cabeçalhos, rodapés ou barras laterais, também poderá fazer isso.

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

No editor de widgets, você também pode editar as configurações de bloco do widget de calculadora de hipoteca, da mesma forma que faria no editor de blocos.

Quando estiver satisfeito com o formulário, basta clicar em “Update” (Atualizar).

Como alternativa, se os métodos acima 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 clicar no link “usar um shortcode” no pop-up de incorporação anterior.

Em seguida, copie o shortcode e cole-o onde quiser.

Para obter mais informações, leia 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 do imóvel do usuário, o valor do empréstimo, o prazo do empréstimo e a taxa de juros, ele poderá visualizar 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.

Você deve ter as informações da sua conta depois de adquirir um plano.

Agora você chegará a uma página que solicita sua permissão para instalar o Formidable Forms Pro.

Clique em ‘Connect and Install 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, basta acessar Formidable ” Forms e clicar 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.

O interessante do Formidable Forms é que você pode inserir um valor padrão na calculadora, permitindo que os usuários vejam como será o cálculo mais tarde.

Se você clicar em qualquer um dos campos da seção “Análise financeira”, tente evitar alterar qualquer uma das “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 escrever um nome para esse novo estilo e clicar em ‘Create new style’ (Criar novo estilo).

Agora você será direcionado para uma página em que poderá personalizar o design do 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, na guia “General” (Geral), você pode personalizar o título e a descrição do formulário, bem como optar por exibi-los no site posteriormente. Esse pode ser um bom lugar para inserir algumas instruções sobre como usar o formulário.

Observe que, se quiser estilizar o texto, você precisará usar HTML.

Rolando para baixo, você encontrará uma configuração para ativar o Honeypot e o JavaScript para prevenção de spam.

Recomendamos ativar ambos para 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 para o usuário.

Você pode mostrar 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 texto e a posição do botão Enviar e até mesmo ativar um botão “Recomeçar”, caso o usuário queira esvaziar o formulário e começar de novo.

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

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 do seu tema do WordPress.

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 incorporar o formulário a uma página existente, inseri-lo em 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, ao escolher a opção de nova página, você criará e nomeará uma nova página.

Depois de fazer isso, clique em “Criar página”.

Com ambas as opções, o Formidable Forms insere automaticamente o bloco de formulário no editor de blocos da página. Tudo o que você precisa fazer é reorganizá-lo.

Se você precisar editar o formulário diretamente do 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, recomendamos usá-lo somente 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 nossa seleção de especialistas dos melhores serviços de marketing por e-mail para pequenas empresas.

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.