Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo crear una calculadora personalizada en WordPress (paso a paso)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

Los elementos interactivos como las calculadoras pueden mejorar la experiencia del usuario en su sitio de WordPress. Pueden servir para muchas cosas, como generar clientes potenciales a través de la captura de correos electrónicos, fomentar la participación de los usuarios y atender las consultas de los visitantes.

Al proporcionar herramientas valiosas que responden directamente a las necesidades de los usuarios, puede hacer que permanezcan más tiempo en su sitio web, mejorar su experiencia en línea y, en última instancia, alcanzar los objetivos de su sitio web.

En WPBeginner, nuestro equipo probó múltiples herramientas y plugins para encontrar la que hace más fácil añadir una calculadora para cualquier propósito, como simplificar cálculos complejos, proporcionar recomendaciones personalizadas o captar clientes potenciales para futuros esfuerzos de marketing.

En este artículo, le mostraremos cómo crear una calculadora personalizada en WordPress fácilmente y paso a paso.

Create A Custom Calculator In WordPress

¿Por qué añadir una calculadora personalizada en WordPress?

Una calculadora personalizada permite a los usuarios calcular cosas rápidamente sin salir de su sitio web.

Por ejemplo, si tiene un blog sobre salud y forma física, puede añadir una calculadora de IMC para que los usuarios puedan ver su IMC y decidir qué plan de suscripción o producto comprar en su sitio web.

An example of a BMI calculator

Si vende en todo el mundo, una calculadora en línea que convierta las unidades métricas en imperiales también puede aumentar sus ventas al ayudar a los clientes a comprobar si un producto tiene la talla o el peso deseados.

También puede generar confianza y reducir el abandono del carrito ofreciendo una calculadora de envíos. De este modo, los clientes no se sorprenderán con costes inesperados al finalizar compra / pago.

También puede añadir una calculadora de hipotecas a su sitio web inmobiliario o una calculadora de pagos de automóviles al sitio de su concesionario de vehículos.

An example of a car payment calculator

Estas calculadoras personalizadas también son una buena forma de generar clientes potenciales. Por ejemplo, puedes pedir a los usuarios que introduzcan su dirección de correo electrónico para poder enviarles los resultados. De este modo, una calculadora puede ayudarte a crear una lista de correo electrónico en WordPress.

Dicho esto, veamos cómo crear fácilmente una calculadora personalizada en WordPress.

Cómo crear una calculadora personalizada en WordPress

Puede crear fácilmente una calculadora personalizada en WordPress con WPForms. Es el mejor plugin de calculadora personalizada y maquetador de formularios del mercado.

Incluye un maquetador de arrastrar y soltar, más de 1.800 plantillas prediseñadas y una completa protección contra el spam. Esto hace que sea fácil crear cualquier formulario que desee, incluyendo una calculadora de hipoteca, descuento de envío, calculadora de edad, y mucho más. Además, es muy fácil de usar.

Primero, necesita instalar y activar el plugin WPForms. Para obtener instrucciones detalladas, consulte nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Nota: WPForms también tiene un plan gratuito. Sin embargo, necesitará la versión pro del plugin para desbloquear la extensión Calculations.

Tras la activación, debe visitar la página WPForms ” Ajustes desde la barra lateral del administrador de WordPress para introducir su clave de licencia.

Puede obtener esta clave desde su cuenta en el sitio web de WPForms.

WPForms license key

Después de eso, diríjase a la página WPForms ” Addons desde el escritorio de WordPress y encuentre el ‘Calculations Addon’.

Una vez hecho esto, sólo tiene que hacer clic en el botón “Instalar extensión” para activarla en su sitio.

Install and activate the Calculations addon

A continuación, diríjase a la página WPForms ” Añadir nuevo desde su panel de administrador.

Esto le llevará a la página “Seleccionar una plantilla”, donde puede empezar escribiendo un nombre para el formulario que está acerca de crear.

Después, puede hacer clic en la opción “Calculadora” de la columna de la izquierda para abrir las más de 87 plantillas de calculadoras prefabricadas que ofrece WPForms, entre las que se incluyen:

  • Plantilla de calculadora hipotecaria
  • Plantilla de calculadora de propinas
  • Plantilla de calculadora de arrendamiento
  • Plantilla de calculadora de IMC
  • Plantilla de calculadora de ahorros e inversiones

Desde aquí, puede hacer clic en el botón ‘Usar plantilla’ debajo de cualquier plantilla de formulario que desee. Para este tutorial, vamos a crear un simple formulario de ‘Calculadora de Descuento de Envío’.

Choose the shipping discount calculator form template

Esto abrirá el maquetador de formularios en su pantalla. Aquí verá un aviso previa del formulario en el lado derecho con los campos del formulario en la columna izquierda.

Ahora puede añadir fácilmente más campos desde el panel izquierdo y también arrastrarlos para reorganizar su pedido / orden.

Calculator form template will open in the form builder with form fields on the left

A continuación, desplácese hasta la sección “Elementos disponibles” y haga clic en este campo para abrir sus ajustes en la barra lateral.

Una vez hecho esto, podrá añadir el título, la imagen y el precio de todos los elementos / artículos que venda en su tienda de comercio electrónico.

Sin embargo, tenga en cuenta que si quiere añadir imágenes para los elementos que vende, tendrá que conmutar la opción “Usar opciones de imagen”.

También puede hacer clic en el botón “+” para añadir más elementos o en el botón “-” para eliminar un elemento de la sección.

Add the price, image, and name for the items that you want to sell in the form

A continuación, debe hacer clic en el campo “Envío” para abrir sus ajustes en la columna de la izquierda. Este campo calculará el descuento de envío basado en el total de su producto. Si borras este campo, la calculadora no funcionará para tus usuarios, así que asegúrate de mantenerlo en el formulario.

Por defecto, el campo Envío ofrece un descuento automático del 10% en compras inferiores a 50 $ y, a continuación, multiplica el descuento por 0,25% a medida que aumenta el total.

Sin embargo, si desea cambiar el descuento de envío, vaya a la pestaña “Avanzado” de la columna de la izquierda y desplácese hasta la sección “Fórmula”.

Aquí puede sustituir el valor de 10 por el porcentaje de descuento que desee ofrecer. También puede cambiar los totales de los productos.

Si desea personalizar aún más el descuento de envío, puede enlazar la ‘Hoja de trucos’ en la parte superior. Esto le llevará a la página ‘Calculations Formula Cheatsheet’, donde podrá entender mejor las reglas y cadenas a utilizar.

Change the shipping discount value

A continuación, puede establecer los ajustes de todas las demás opciones de campo del mismo modo.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar” de la parte superior para guardar tus ajustes.

Save your custom calculator form

A continuación, debe abrir la página o entrada de WordPress en la que desea añadir el formulario de la calculadora de envíos en el editor de bloques.

Desde aquí, haga clic en el botón añadir bloque ‘+’ en la esquina superior izquierda para abrir el menú de bloques e incrustar el bloque WPForms.

Una vez hecho esto, sólo tiene que elegir el formulario de la calculadora de descuentos por envío en el menú desplegable del propio bloque.

Add calculator form on a page

Por último, haz clic en el botón “Actualizar” o “Publicar” de la parte superior para guardar tus ajustes. Ahora, puede visitar su sitio web WordPress para ver el formulario de calculadora personalizado en acción.

Aquí, el campo de envío calculará automáticamente el coste de envío de acuerdo con el precio de los diferentes elementos que su cliente está pidiendo en su sitio.

Shipping discount calculator form preview

Personalizar el formulario de la calculadora en WordPress

En algún momento, puede intentar cambiar la calculadora para ver si consigue más conversiones. Por ejemplo, puede hacer que el campo “Correo electrónico” sea obligatorio.

Para hacer estos cambios, simplemente visite la página WPForms ” Todos los Formularios desde el escritorio de WordPress.

Una vez allí, haga clic en el enlace “Editar” situado bajo el nombre del formulario para iniciarlo de nuevo en el maquetador de formularios.

Click the Edit link under form name

Ahora puede personalizar los campos del formulario o añadir nuevos campos siguiendo el proceso descrito anteriormente.

Cuando haya terminado, sólo tiene que hacer clic en el botón “Guardar” y los cambios aparecerán automáticamente en el sitio web o blog de su empresa.

Visualización de sus entradas en el formulario de la calculadora

Cada vez que alguien completa un formulario en su sitio web, WPForms guarda automáticamente su entrada en su base de datos de WordPress. Esto le permite ver cómo la gente está utilizando el formulario y ver la información de contacto de sus visitantes.

Para ver esta información, simplemente vaya a la página WPForms ” Entradas en el escritorio de WordPress y desplácese hacia abajo hasta la sección ‘Nombre del formulario’.

A continuación, haga clic en el formulario de la calculadora para ver las entradas / registros.

Choose the custom calculator form on the entries page

Se abrirá un anuncio / catálogo / ficha con todas las entradas / registros de su página. Desde aquí, puede hacer clic en el icono del círculo para marcar una entrada como leída.

También puede hacer clic en el enlace “Ver” situado junto a cada entrada para ver todos los detalles del formulario, incluidos la dirección de correo electrónico, el número de teléfono, los elementos pedidos, el descuento del envío, etc.

View the calculator form entries

A veces, es posible que desee compartir los datos de un formulario con personas que no tienen acceso a su escritorio de WordPress. Por ejemplo, puedes dirigir una agencia de desarrollo de WordPress y gestionar varios sitios web para clientes.

Con WPForms, puede exportar todos sus datos como un archivo CSV o XLSX al hacer clic en el enlace ‘Exportar todo’ en la parte superior.

Se abrirá una nueva pantalla en la que podrá seleccionar todos los campos del formulario cuyos datos desee exportar. A continuación, haga clic en el botón “Descargar archivo de exportación” para guardar los datos del formulario como archivo XLSX.

Choose the form fields whose data you want to export as a CSV file

Bonificación: Cree complejas calculadoras personalizadas con Formidable Forms

Si quieres crear calculadoras más complejas en tu sitio web de WordPress, te recomendamos que utilices Formidable Forms. Es un plugin de formularios avanzado que viene con un maquetador de arrastrar y soltar, plantillas prefabricadas y campos dinámicos.

Además, el plugin puede realizar cálculos avanzados como el uso de fórmulas, cálculos condicionales, formateo de números y mucho más, lo que lo convierte en un gran maquetador de calculadoras.

Formidable forms

Puedes usar el plugin para crear diferentes tipos de calculadoras como calculadora de porcentajes, calculadora de precios, calculadora de préstamos, calculadora de edad, calculadora de seguros de vida y calculadora de interés compuesto.

Por ejemplo, si vende cursos en línea, puede añadir un formulario de calculadora del rendimiento de la inversión para mostrar a los usuarios cómo la compra de su curso puede aumentar su potencial de ingresos.

Adding a custom calculator to WordPress

Otras características de Formidable Forms son la lógica condicional, los indicadores de progreso, los formularios multipágina y un campo ChatGPT que ayuda a los usuarios a rellenar el formulario más rápidamente.

Formidable Forms puede incluso integrarse con diferentes servicios de marketing por correo electrónico para hacer crecer su lista de correo electrónico. Para más información, vea nuestra reseña / valoración completa de Formidable Forms.

Esperamos que este artículo te haya ayudado a añadir una calculadora personalizada en WordPress. También puedes consultar nuestra guía paso a paso sobre el seguimiento de conversiones en WordPress y nuestra selección de los mejores plugins para formularios de contacto en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

2 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Anne says

    Wanted to create a BMI calculator on my health website too, but doesn’t have the WP Forms Pro version. Plan to buy in the future and follow your easy guide. Well, you guided me very well and convinced me to buy this plugin.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.