Cómo agregar una calculadora de hipotecas en WordPress (paso a paso)

Una calculadora hipotecaria puede realmente aumentar la efectividad de tu sitio web. Y la verdad es que, sin una calculadora hipotecaria en tu sitio, probablemente estás perdiendo clientes potenciales a otros sitios web.

Lo hemos visto una y otra vez: los visitantes llegan a tu sitio, se interesan, luego se van a calcular los pagos en otro lugar, a menudo para no regresar.

Es por eso que tener tu propia calculadora es tan importante. Ayuda a mantener a los visitantes interesados y los convierte en clientes potenciales. 🙌

En esta guía paso a paso, te mostraremos exactamente cómo agregar una calculadora hipotecaria a tu sitio de WordPress. Hemos encontrado los métodos más confiables y fáciles de usar que funcionan para todos, sin importar tu experiencia técnica.

¿Por qué agregar una calculadora hipotecaria en WordPress?

Una calculadora hipotecaria permite a los usuarios obtener estimaciones de sus pagos hipotecarios, con la tasa de interés y el período de amortización.

Los visitantes simplemente pueden agregar información como el valor de su casa, el pago inicial, las tasas de interés, etc. Después de eso, la calculadora determinará cuánto necesitan pagar por mes.

Si estás creando un sitio web de bienes raíces con listados de propiedades IDX, entonces una calculadora hipotecaria también ayudará con la generación de clientes potenciales. Los visitantes pueden usar la calculadora, pero tendrán que ingresar su dirección de correo electrónico para guardar sus resultados.

Esto también puede reducir tu tasa de rebote, ya que los visitantes no tienen que visitar un sitio diferente para obtener un cálculo hipotecario.

Asesores financieros, corredores hipotecarios, bancos y educadores de finanzas personales también pueden beneficiarse de agregar una calculadora de hipotecas a su sitio.

Dicho esto, veamos cómo crear fácilmente una calculadora de hipotecas en WordPress. Este tutorial te mostrará dos métodos amigables para principiantes con dos plugins diferentes para calculadoras de hipotecas: WPForms y Formidable Forms.

Puedes usar estos enlaces rápidos para saltar a un plugin específico:

• Método 1: Agrega una calculadora de hipotecas simple en WordPress con WPForms
• Método 2: Agrega una calculadora de hipotecas avanzada en WordPress con Formidable Forms
• Recursos adicionales 🔗: Haz crecer tu sitio web de WordPress para bienes raíces

¡Empecemos!

Método 1: Agrega una calculadora de hipotecas simple en WordPress con WPForms

El primer método es usar WPForms. Con sus herramientas de IA y más de 2000 plantillas de formularios, este plugin de formularios de arrastrar y soltar te permite crear varios formularios, incluida una calculadora de hipotecas.

Este método se recomienda para personas que solo desean crear una calculadora de hipotecas simple pero receptiva, sin cálculos adicionales para impuestos o seguros.

En WPBeginner, usamos WPForms para crear todo tipo de formularios, desde nuestro formulario de contacto hasta nuestras encuestas anuales de lectores. Es nuestra herramienta de referencia y la recomendamos encarecidamente. Consulta nuestra reseña completa de WPForms para obtener más información al respecto.

Primero lo primero, procede a instalar el plugin en WordPress.

Hecho esto, ve a WPForms » Configuración e inserta la clave de licencia de tu plan Pro desde la página de tu cuenta de WPForms. Luego, simplemente haz clic en ‘Verificar clave’.

Elige y personaliza una plantilla de formulario de calculadora de hipotecas

Una vez que la clave de licencia esté activa, deberás navegar a WPForms » Agregar Nuevo.

En la siguiente pantalla, puedes darle un nombre a tu nuevo formulario. Puede ser algo tan simple como 'Formulario de Calculadora Hipotecaria'.

Después de eso, elegirás cómo construir el formulario. Con WPForms, puedes:

• usar un lienzo en blanco para crear formularios desde cero
• aprovechar el constructor de formularios con IA para crear formularios al instante usando una indicación simple
• elegir una plantilla prefabricada.

Para este tutorial, te mostraremos cómo usar una plantilla y personalizarla para que se ajuste a tus necesidades utilizando el editor de arrastrar y soltar.

Así que desplacémonos hacia abajo en la página de 'Configuración' y usemos la barra de búsqueda para encontrar una plantilla de formulario de calculadora hipotecaria.

WPForms tiene dos plantillas: Formulario de Calculadora Hipotecaria y Formulario de Calculadora Hipotecaria Simple. Ambas plantillas proporcionan funcionalidad similar pero tienen campos ligeramente diferentes.

La Plantilla de Formulario de Calculadora Hipotecaria Simple es la mejor para sitios inmobiliarios que desean ayudar a los compradores potenciales a estimar rápidamente su pago hipotecario mensual.

Por otro lado, la Plantilla de Formulario de Calculadora Hipotecaria proporciona un desglose completo de los detalles de la hipoteca, incluido el interés total pagado, el pago hipotecario total y el monto del pago anual.

Este nivel de detalle puede ser útil para los clientes que desean comprender completamente sus obligaciones financieras.

Puedes hacer clic en 'Ver demostración' para ver cada formulario en acción. Puedes elegir cualquiera de las dos plantillas, pero para este tutorial, usaremos la Plantilla de Formulario de Calculadora Hipotecaria.

Una vez que hayas tomado tu decisión, simplemente pasa el cursor sobre el cuadro y haz clic en 'Usar plantilla'.

En esta etapa, aparecerá una ventana emergente indicando que necesitas el complemento de Cálculos.

Simplemente haz clic en ‘Sí, instalar y activar’ para continuar.

Ahora llegarás al constructor de formularios de arrastrar y soltar. Como puedes ver, la plantilla viene con los campos de calculadora integrados.

Esta plantilla en particular tiene campos donde los usuarios pueden ingresar el valor de su casa (costo total de la casa) y el monto de su pago inicial (cuánto paga el comprador por adelantado al comprar una propiedad).

Los usuarios también pueden usar los controles deslizantes para ingresar información sobre la tasa de interés de su préstamo hipotecario y el plazo de la hipoteca.

Después de ingresar esta información, la sección inferior calculará automáticamente el monto del pago mensual y anual de la hipoteca del usuario, el interés total pagado y el pago total de la hipoteca.

Puedes encontrar esta fórmula de cálculo yendo a ‘Opciones de campo’ y navegando a la pestaña ‘Avanzado’ en el panel izquierdo. En la parte inferior, encontrarás el cuadro ‘Fórmula’.

Recomendamos no hacer cambios en esta sección a menos que estés seguro de hacerlo. Dicho esto, WPForms tiene una hoja de referencia de Cálculos que puedes usar si necesitas ayuda.

Si tienes problemas con la fórmula, puedes usar la función Cálculos con IA para que sea más fácil.

Simplemente haz clic en el botón ‘Generar fórmula’ junto al cuadro de Fórmula.

Esto abrirá una ventana de chat donde puedes describir qué tipo de cálculo necesitas en lenguaje sencillo, y la IA generará instantáneamente la fórmula correcta para ti.

Ahora, vamos a personalizar el formulario. Para agregar un nuevo campo, ve a la sección ‘Agregar campos’ en el panel izquierdo. Luego, simplemente arrastra y suelta cualquier campo en el constructor de formularios.

Aquí, hemos agregado un campo de ‘Nombre’ al formulario para capturar el nombre del usuario.

Para personalizar un campo, simplemente haz clic en él y el panel izquierdo mostrará la pestaña ‘Opciones del campo’. Aquí encontrarás tres pestañas: General, Avanzado y Lógica inteligente.

Si deseas cambiar la etiqueta del campo, insertar texto descriptivo o hacer que el campo sea obligatorio, deberás seleccionar ‘General’.

En la siguiente imagen, hemos cambiado la etiqueta del campo ‘Valor de la casa’ a ‘Precio de la propiedad’ y hemos agregado algunas instrucciones adicionales. También hemos hecho que el campo sea obligatorio, por lo que los usuarios deben completar esta sección para obtener el cálculo del pago de su hipoteca.

La pestaña ‘Avanzado’ es donde puedes agregar texto de marcador de posición, especificar las clases CSS que deseas usar, ocultar la etiqueta del campo y habilitar una función de cálculo si es necesario.

Por defecto, el formulario muestra un signo de ‘$’ para que los usuarios sepan que deben ingresar sus valores en dólares estadounidenses.

Alternativamente, puedes insertar un ejemplo en la etiqueta del campo, como ‘ej. 500,000,’ para que el usuario sepa cómo insertar el precio correctamente.

La pestaña ‘Lógica Inteligente’ te permite habilitar lógica condicional en el campo. Es opcional, pero es una buena característica para hacer que tu formulario de calculadora de hipotecas sea más atractivo.

Para usarla, simplemente activa el botón ‘Habilitar lógica condicional’.

Luego, puedes elegir mostrar u ocultar el campo según ciertos criterios. En el ejemplo a continuación, hemos elegido mostrar el campo ‘Precio de la propiedad’ si el usuario ingresa su dirección de correo electrónico.

Una vez que hayas terminado de personalizar el formulario, simplemente haz clic en ‘Guardar’ en la esquina superior derecha.

Configurar los ajustes del formulario

Ahora, vamos a cambiar a la pestaña ‘Ajustes’ en el lado izquierdo.

En la pestaña ‘General’, puedes cambiar el nombre del formulario y agregar una descripción en la parte superior del formulario. Incluso puedes escribir algunas instrucciones y agregar un llamado a la acción para animar a los usuarios a completar el formulario.

Además, puedes personalizar la etiqueta del botón de envío y el texto de procesamiento.

También querrás cambiar a la pestaña ‘Protección contra spam y seguridad’.

WPForms ya viene con protección antispam que está habilitada por defecto. Sin embargo, puedes activar Akismet para medidas de protección adicionales.

Adicionalmente, siéntete libre de establecer un número mínimo de segundos que un usuario debe esperar antes de enviar el formulario. Esto da a los usuarios genuinos suficiente tiempo para completar el formulario, pero no el tiempo suficiente para que un bot de spam envíe el formulario rápidamente.

Al desplazarte hacia abajo, también puedes habilitar un filtro de país, que limita el formulario a usuarios de países específicos. Recomendamos esta configuración si tu sitio web de bienes raíces solo vende en un país determinado.

Una vez que hayas activado el botón 'Habilitar filtro de país', simplemente haz clic en 'Permitir' debajo del Filtro de país y selecciona el país al que vendes.

También puedes personalizar el Mensaje del filtro de país si es necesario.

Si te desplazas hacia abajo en la página, también puedes prevenir envíos de formularios spam usando un CAPTCHA.

WPForms soporta CAPTCHA, reCAPTCHA y hCAPTCHA personalizados.

Vayamos adelante y pasemos a la pestaña 'Notificaciones'.

WPForms puede enviarte un correo electrónico cada vez que alguien complete el formulario. Para habilitar esta función, simplemente haz clic en 'Habilitar Notificaciones'.

Puedes editar el contenido del correo electrónico según sea necesario. Además, puedes enviar correos electrónicos de confirmación después del envío de formularios de WordPress.

Cuando estés satisfecho con estas configuraciones, no olvides hacer clic en 'Guardar' para almacenar tus cambios.

Incrusta la Calculadora de Costos Hipotecarios en tu sitio de WordPress

Ahora estás listo para mostrar la calculadora hipotecaria en tu blog de WordPress o sitio web. Para hacer esto, haz clic en el botón 'Incrustar' en el menú superior.

Ahora, puedes agregar el formulario a una página existente o crear una página completamente nueva.

Alternativamente, puedes usar un código corto.

El proceso para agregar el formulario a una página existente o nueva es bastante similar.

Si haces clic en 'Seleccionar página existente', entonces puedes elegir la página que deseas usar. Después de eso, haz clic en '¡Vamos!'

Si optas por crear una página nueva, entonces necesitarás escribir un título para la página.

Similar al método anterior, haz clic en '¡Vamos!' para continuar.

Ambas opciones te llevarán al editor de bloques de WordPress estándar.

Aquí, haz clic en el botón de bloque '+' y selecciona el bloque WPForms.

En el nuevo bloque, abre el menú desplegable 'Seleccionar un formulario'.

Después de eso, simplemente elige el formulario que creaste anteriormente.

Ahora verás tu formulario recién creado.

En la barra lateral de configuración del bloque, puedes personalizar aún más el diseño del formulario.

Por ejemplo, puedes cambiar el color de fondo y el borde de los campos. También puedes regresar al constructor de WPForms seleccionando 'Editar formulario'.

Cuando estés satisfecho con cómo se ve el formulario, simplemente haz clic en 'Actualizar' o 'Publicar' para que los cambios se hagan en vivo.

Así es como se ve nuestro formulario de calculadora de hipotecas:

Si estás usando un tema de WordPress clásico, que no sea de bloques, entonces también puedes mostrar el formulario en un área lista para widgets.

Simplemente ve a Apariencia » Widgets y haz clic en el botón de agregar bloque '+' en cualquier área lista para widgets. Ahora puedes agregar el bloque WPForms y seleccionar el formulario que acabas de crear.

En el editor de widgets, también puedes editar la configuración del bloque del widget de calculadora de hipotecas.

Cuando estés satisfecho con cómo se ve el formulario, simplemente haz clic en 'Actualizar'.

Alternativamente, si estos métodos no funcionan, puedes usar el método del código corto para insertar los formularios en páginas, publicaciones y otras partes de la plantilla.

Simplemente regresa al editor de WPForms y haz clic en ‘usar un shortcode’ en la ventana emergente de incrustación.

Luego puedes copiar el shortcode y agregarlo a cualquier página, publicación o área lista para widgets.

Para más información, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Método 2: Agrega una calculadora de hipotecas avanzada en WordPress con Formidable Forms

Este siguiente método es excelente si deseas crear una calculadora de hipotecas avanzada para WordPress que tenga en cuenta tus impuestos anuales sobre la propiedad, el seguro y el PMI (seguro hipotecario privado).

Una vez que el formulario tenga esos datos, junto con el precio de la vivienda del usuario, el monto del préstamo, el plazo del préstamo y la tasa de interés, puede mostrar el desglose del pago del usuario, que también se llama calendario de amortización.

Para este método, usaremos el plugin Formidable Forms. Este plugin de formularios de contacto de WordPress fácil de usar viene con una plantilla de calculadora de hipotecas avanzada que puedes agregar a tu sitio.

Hemos investigado a fondo este plugin y lo hemos puesto a prueba. ¡Puedes encontrar todo sobre él en nuestra detallada reseña de Formidable Forms!

Lo primero que debes hacer es instalar y activar tanto el plugin Formidable Forms Lite como Formidable Forms Premium (plan Business).

El plugin gratuito tiene funciones limitadas, pero Formidable Forms Pro lo utiliza como base para sus funciones más avanzadas.

Para obtener instrucciones detalladas, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Formidable » Configuración global en el panel de WordPress. Aquí, puedes hacer clic en ‘Conectar una cuenta’.

En la siguiente pantalla, simplemente inicia sesión en tu cuenta de Formidable Forms.

Formidable Forms ahora te pedirá permiso para instalar el plugin Pro. Simplemente haz clic en ‘Conectar e instalar Formidable Forms Pro’ para activar tu clave de licencia.

Ahora que ha configurado correctamente Formidable Forms, está listo para agregar un formulario de calculadora hipotecaria a WordPress.

Use la plantilla de formulario de calculadora hipotecaria avanzada

Para comenzar, vaya a Formidable » Formularios y luego haga clic en ‘Agregar nuevo’.

Ahora aparecerá una ventana emergente que muestra todas las plantillas listas para usar en su sitio web de WordPress.

Para encontrar la plantilla del formulario de cálculo hipotecario, simplemente escriba ‘Calculadora hipotecaria avanzada’ en la barra de búsqueda. Luego, pase el cursor sobre la plantilla y haga clic en ‘Usar plantilla’.

Ahora llegará al constructor de Formidable Forms.

En este punto, puede personalizar el formulario para que se ajuste a sus necesidades.

Para comenzar, haga clic en el campo que desea personalizar y luego seleccione la pestaña ‘Opciones de campo’.

Desde allí, puede cambiar la etiqueta del campo, elegir si el campo es obligatorio u opcional, agregar texto de marcador de posición y muchas otras cosas.

Con Formidable Forms, también puede insertar un valor predeterminado en la calculadora. Esto permite a los usuarios ver cómo puede ser su cálculo.

Si hace clic en alguno de los campos en la sección ‘Análisis financiero’, intente evitar cambiar las ‘Opciones avanzadas’.

Esta área contiene las fórmulas de cálculo, por lo que cambiarlas puede romper por completo la calculadora hipotecaria.

Cuando esté satisfecho con la apariencia del formulario, simplemente haga clic en ‘Guardar’ en la esquina superior derecha para guardar sus cambios.

Después de eso, escriba un nombre para su formulario para que pueda identificarlo fácilmente más tarde. Luego, haga clic en ‘Guardar’.

Personalice el estilo del formulario de calculadora hipotecaria

Ahora cambiemos a la pestaña ‘Estilo’ en el menú superior. Aquí es donde puede elegir un diseño para el formulario.

Si no le gusta ninguno de los estilos, simplemente haga clic en el botón ‘+ Nuevo estilo’.

Después de eso, aparecerá una ventana emergente. Simplemente escriba un nombre para este nuevo estilo y haga clic en ‘Crear nuevo estilo’.

Ahora será dirigido a una página donde puede personalizar el estilo del formulario.

Siéntete libre de modificar la tipografía, el esquema de color, los estilos de los botones, las casillas de verificación, etc.

Una vez que estés satisfecho con el diseño, simplemente haz clic en el botón 'Actualizar' en la esquina superior derecha.

Configurar los Ajustes de Formidable Forms

En esta etapa, puedes navegar al menú 'Ajustes' en la parte superior.

Primero, puedes personalizar el título y la descripción del formulario en la pestaña 'General'. Este puede ser un buen lugar para insertar algunas instrucciones sobre cómo usar el formulario.

También puedes dar estilo al texto usando HTML.

Al desplazarte hacia abajo, encontrarás una configuración que habilita Honeypot y JavaScript.

Recomendamos habilitar ambas configuraciones, ya que pueden prevenir entradas de spam falsas y maliciosas.

La pestaña 'Acciones y Notificaciones' es donde puedes personalizar el correo electrónico de confirmación que Formidable Forms envía al usuario.

Puedes mostrar un mensaje de agradecimiento personalizado, redirigir a los usuarios a una URL específica o enviarlos a una página diferente.

Otra pestaña que recomendamos revisar es 'Botones'.

Aquí puedes personalizar la etiqueta y la posición del botón de envío. Incluso puedes agregar un botón de ‘Empezar de nuevo’ en caso de que el usuario quiera reiniciar el envío de su formulario.

Después de haber configurado los ajustes del formulario, simplemente haz clic en el botón ‘Actualizar’ para guardar tus cambios.

Incrusta el formulario avanzado de calculadora hipotecaria en tu sitio web

Ahora que tu formulario avanzado de calculadora hipotecaria está listo, puedes agregarlo a cualquier publicación, página o área lista para widgets.

Para empezar, haz clic en el botón ‘Incrustar’ en la esquina superior derecha.

Ahora verás una ventana emergente que dice que puedes agregar el formulario de tres maneras.

Puedes agregar el formulario a una página existente, crear una nueva página o usar un código corto (shortcode).

Si eliges la opción de página existente, seleccionarás una página en la siguiente pantalla.

Luego, haz clic en ‘Insertar formulario’.

Por otro lado, si eliges la opción de página nueva, puedes escribir un nombre para la nueva página.

Hecho eso, procede a hacer clic en ‘Crear página’.

Con ambas opciones, Formidable Forms insertará automáticamente el bloque del formulario en el editor de bloques de la página.

Si necesitas editar el formulario directamente desde el editor de contenido, simplemente abre la barra lateral de configuración del bloque y haz clic en ‘Ir al formulario’.

Cuando estés listo, haz clic en ‘Publicar’ o ‘Actualizar’.

Así se ve nuestro formulario de calculadora hipotecaria de Formidable Forms:

Alternativamente, puedes agregar la calculadora hipotecaria usando un código corto (shortcode) o código PHP.

En la ventana emergente de incrustación de antes, haz clic en ‘Insertar manualmente’.

Luego, puedes copiar el código corto o el código PHP. De nuevo, para la primera opción, puedes leer nuestro artículo sobre cómo agregar un código corto en WordPress.

En cuanto al código PHP, solo recomendamos este método si te sientes cómodo trabajando con fragmentos de código. Recomendamos usar WPCode para esto, ya que este plugin hace que sea seguro y fácil insertar código en WordPress.

Para más información, puedes leer nuestra guía sobre cómo insertar fragmentos de código en WordPress.

Y para aprender más sobre el plugin, consulta nuestra reseña completa de WPCode. Algunos de nuestros socios comerciales lo usan para insertar y administrar fragmentos de código personalizados, ¡y ha estado funcionando excepcionalmente bien!

Recursos adicionales 🔗: Haz crecer tu sitio web de WordPress para bienes raíces

¿Buscas mejorar aún más tu sitio inmobiliario? Desde atraer más clientes potenciales hasta acelerar tus páginas, estos recursos seleccionados pueden ayudarte a crecer y optimizar tu sitio de WordPress:

• Los mejores plugins de WordPress para bienes raíces
• Los mejores temas de WordPress para bienes raíces para agentes inmobiliarios
• Cómo incrustar un mapa de Google con un marcador en formularios de WordPress
• Cómo Agregar Correctamente un Slider de Contenido Destacado en WordPress
• Cómo crear un directorio web en WordPress
• Consejos para hacer crecer tu negocio en línea
• El SEO local definitivo de WordPress para mejorar rankings
• La guía definitiva para mejorar la velocidad y el rendimiento de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar una calculadora de hipotecas en WordPress. También te puede interesar nuestro artículo sobre cómo crear una calculadora de préstamos para automóviles o pagos de autos en WordPress y nuestros consejos de expertos sobre las mejores maneras de crear formularios más interactivos.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.