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.

¿Te preguntas cómo crear una calculadora personalizada en tu sitio web WordPress?

Las calculadoras son una forma estupenda de conseguir más clientes potenciales recopilando la dirección de correo electrónico de los visitantes. También puedes utilizarlas para aumentar la participación o responder a las preguntas de los usuarios para que permanezcan más tiempo en tu sitio.

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

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

Viene con un maquetador de arrastrar y soltar, más de 1300 plantillas prediseñadas y una completa protección contra el spam, lo que facilita la creación de cualquier formulario que desee, incluida una calculadora de hipotecas, un descuento por envío, una calculadora de edad y mucho más.

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, donde observará un aviso previa del formulario a la derecha con los campos del formulario en la columna de la izquierda.

Desde aquí, puede añadir fácilmente más campos desde el panel izquierdo y también arrastrar los campos para reorganizar su orden.

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

A continuación, debe desplazarse hasta la sección “Elementos disponibles” y hacer 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 online.

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 todos los demás campos de formulario de la misma manera.

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 ‘+’ de añadir bloque en la esquina superior izquierda para abrir el menú de bloques y añadir 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, etc.

Formidable forms

Puedes usar el plugin para crear una calculadora de porcentajes, de edad, de seguros de vida, de interés compuesto y mucho más.

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 para principiantes 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.