¿Quiere agregar una calculadora de IMC a su sitio de WordPress?

Si ofrece contenido, productos o servicios relacionados con la salud y el estado físico, entonces una calculadora de IMC podría ser realmente útil para su audiencia.

En este artículo, le mostraremos cómo agregar fácilmente una calculadora de IMC en WordPress. ¡No se requieren matemáticas ni código!

¿Qué es el IMC y por qué es importante?

IMC significa índice de masa corporal. Es una medida aproximada de la grasa corporal basada en la altura y el peso. El cálculo de su IMC le da una indicación rápida de si tiene bajo peso, sobrepeso o si tiene el peso adecuado para su estatura.

Si ha comenzado un blog sobre fitness o salud, entonces podría tener mucho sentido ofrecer una calculadora de IMC para sus visitantes.

Agregar una calculadora de IMC a su sitio puede hacer que las personas pasen más tiempo en su sitio. Incluso podrían terminar comprándole algo a usted o una de sus ofertas de afiliados.

Vista previa de un formulario de calculadora de IMC en un sitio web

También es una buena forma de fomentar el tráfico repetido. Si alguien está tratando de perder peso, es posible que regrese a su sitio para ver si su IMC ha mejorado.

¿Cómo calculo el IMC?

Puede calcular el IMC utilizando el siguiente cálculo:

IMC = kg / m2

El kg es el peso de una persona en kilogramos y m2 es su altura en metros cuadrados.

Si prefiere calcular el IMC utilizando las unidades imperiales, puede utilizar la siguiente fórmula:

IMC = [weight lbs / height inches2] x 703

Un IMC saludable está en el rango de 18,5 a 25. Un IMC por debajo de 18,5 indica que la persona tiene bajo peso y un IMC superior a 25 indica que tiene sobrepeso.

Obviamente, pedirle a sus lectores que saquen su calculadora no es muy útil.

Puede agregar una calculadora simple en su sitio web donde los usuarios pueden ingresar su altura y peso, para que la calculadora pueda mostrarles su IMC. De esta manera, los usuarios permanecen comprometidos con su sitio web y es más probable que se conviertan en clientes.

Creando una calculadora de IMC en WordPress

Para este tutorial, usaremos Formidable Forms plugin. Es uno de los mejores creadores de formularios de WordPress. plugins en el mercado y le permite crear formularios avanzados usando herramientas simples de arrastrar y soltar.

Viene con toneladas de plantillas de formulario, calculadoras, campos repetidores avanzados y otras herramientas. Esto le permite crear formularios avanzados altamente interactivos para su sitio web.

Primero, deberá registrarse para obtener una cuenta Formidable Forms, luego instalar y activar el plugin. Para obtener más detalles, consulte nuestras instrucciones sobre cómo instalar un WordPress. plugin.

Tras la activación, debe visitar Formidable »Formas página y luego haga clic en el botón ‘Agregar nuevo’ en la parte superior para crear su calculadora de IMC.

Crear un nuevo formulario de calculadora de IMC

Una vez que haya hecho eso, verá una variedad de plantillas que puede usar para crear un formulario.

Desplácese hacia abajo para encontrar la calculadora de IMC o simplemente escriba ‘BMI’ en la barra de búsqueda para ubicarla.

Cargar plantilla de formulario de calculadora de IMC

Ahora que tiene la plantilla de la Calculadora de IMC en la pantalla, pase el cursor del mouse sobre ella y haga clic en el botón Crear formulario.

A continuación, se le pedirá que proporcione un nombre para su formulario y una descripción. Puede usar el nombre predeterminado y omitir la descripción si lo desea. Una vez que esté listo, haga clic en el botón «Crear».

Escriba un nombre para su formulario de calculadora de IMC

Una vez que haya hecho eso, Formidable Forms creará automáticamente su formulario de calculadora de IMC para usted.

Serás llevado directamente a la vista ‘Crear’ de tu formulario. Como puede ver, tiene el formulario en sí en el lado derecho de la pantalla. A la izquierda, hay un área donde puede agregar o editar los campos de su formulario.

La vista de compilación predeterminada en Formidable Forms

La calculadora de IMC funcionará perfectamente con la configuración predeterminada en su lugar. Si desea agregar campos adicionales, puede hacerlo haciendo clic en el campo de la izquierda y se agregará automáticamente a su formulario.

Es posible que desee eliminar la casilla BMI Prime si desea mantener el formulario simple. No es necesario para que el formulario funcione.

Para eliminar el campo, simplemente haga clic en él, luego haga clic en el icono de la papelera.

Eliminar el campo BMI Prime del formulario

Si desea que el usuario envíe el formulario para ver sus resultados de IMC, también puede eliminar los campos Bajo peso, Peso saludable, Sobrepeso y Obeso.

Ajustar la configuración de su calculadora de IMC

Una vez que esté satisfecho con su calculadora de IMC, haga clic en la pestaña ‘Configuración’ en la parte superior de la pantalla.

La pestaña Configuración para el formulario Calculadora de IMC

Es posible que desee realizar cambios aquí. Por ejemplo, puede cambiar los mensajes predeterminados que se muestran a los usuarios después de que envían el formulario. Si se desplaza hasta la parte inferior de la página, puede verlos enumerados en el cuadro Al enviar.

Los mensajes de Formidable Forms

Cuando alguien usa la calculadora, su resultado se mostrará así:

El resultado predeterminado de la calculadora de IMC

Es posible que desee modificar la redacción para que sea apropiada para su audiencia.

Otra opción aquí es agregar enlaces para obtener más orientación. Por ejemplo, puede tener contenido que ofrezca consejos sobre dieta o ejercicio.

Puede ingresar código HTML en el cuadro. Para cambiar el tamaño de fuente y el color de fondo del cuadro, puede usar la función Estilos de Formidable Forms. Veremos eso más adelante en este tutorial.

Aquí hay un ejemplo del mensaje de resultado con un enlace relevante incluido:

Un mensaje de resultados personalizado en Formidable Forms

Consejo: El cuadro donde puede editar el mensaje de resultados es bastante pequeño. Puede copiar el mensaje del cuadro y pegarlo en un editor de código para que sea más fácil de editar. Cópielo de nuevo en el cuadro de mensaje cuando haya terminado.

Cambiar el texto del botón de la calculadora de IMC

Si desea cambiar el texto del botón de su formulario, puede hacerlo en Configuración »Estilo y botones.

Simplemente escriba el texto que desea utilizar. Vamos a utilizar el texto «Mostrar mi rango de IMC» en lugar de «¡Ver mi rango!» para el texto del botón.

También hemos cambiado «Actualizar resultados» en lugar de «Actualizar» para el texto del botón que aparece después de que el formulario se ha enviado por primera vez.

Cambiar los mensajes del botón Enviar y Actualizar en Formidable Forms

Cambiar el estilo de su calculadora de IMC

Por defecto, la calculadora de IMC parece bastante sencilla. El texto también es bastante pequeño, así:

El estilo predeterminado para el formulario de IMC

Puede cambiar el estilo de su formulario utilizando diferentes colores, tamaños de fuente y mucho más. Para hacerlo, primero deberá ir a Estilos »formidables en su panel de WordPress.

La pestaña Estilos de Formidable Forms

A continuación, puede hacer clic en el botón ‘+ Nuevo estilo’ para comenzar a crear un nuevo estilo. Alternativamente, puede editar el estilo predeterminado existente, si desea utilizar el mismo estilo para todos sus formularios.

Vamos a crear un nuevo estilo solo para nuestro formulario de Calculadora de IMC.

Añadiendo un nuevo estilo en Formidable Forms

Si hace clic en el menú desplegable junto a la pestaña Etiquetas de campo, puede cambiar el tamaño de las etiquetas en los campos de su formulario. Aumentaremos esto de los 14px originales a 18px.

Cambiar el tamaño de las etiquetas de campo

A la derecha de la pantalla, verá una vista previa del estilo de su formulario. A medida que realice cambios, esto se actualizará automáticamente.

Es probable que también desee aumentar el tamaño de fuente y la altura de campo de los propios campos, en ‘Configuración de campo’. Puede cambiar el tamaño de los botones de opción (Imperial vs Métrico) en la pestaña ‘Casilla de verificación y campos de radio’.

También puede aumentar el tamaño de fuente del botón en la pestaña Botones. También puede elegir un color para el botón.

Si desea agrandar el mensaje de resultados o cambiar el color de fondo, puede hacerlo en la pestaña Mensajes de formulario.

Una vez que haya realizado todos los cambios que desea, haga clic en «Actualizar» en la parte superior derecha para guardar los cambios en el estilo.

Actualizar el nuevo estilo que ha creado

Luego puede aplicar el estilo a su formulario. Primero ve Formidable »Formas luego encuentra tu formulario. Haga clic en el título del formulario para editarlo, o pase el cursor sobre el formulario y haga clic en el enlace «Editar» que se encuentra debajo.

Editar el formulario de la calculadora de IMC que creó

Luego puede ir a la pestaña Configuración y hacer clic en Estilo y botones para configurar los estilos de su formulario.

Aquí, puede utilizar el menú desplegable Plantilla de estilo para seleccionar su nueva plantilla de estilo. Simplemente haga clic en el menú desplegable y luego haga clic en el estilo que desea usar.

Elegir el estilo para su calculadora de IMC de la lista desplegable

Ahora, su formulario tendrá el estilo de la plantilla. Así es como se ve el nuestro:

El formulario de la calculadora de IMC con los nuevos estilos aplicados

Agregar el formulario de la calculadora de IMC a su sitio web

Una vez que esté listo, puede poner su formulario en vivo en su sitio. Primero, querrá hacer clic en el botón ‘Actualizar’ en la parte superior derecha para guardar sus cambios:

Actualizar su calculadora de IMC

A continuación, deberá editar una publicación o página existente o crear una nueva.

Una vez que haya hecho eso, puede hacer clic en el botón (+) para agregar un nuevo bloque. Vaya a la sección Widgets y haga clic en el bloque Formidable Forms. O, si lo prefiere, puede usar la barra de búsqueda para encontrarlo.

Seleccionar el bloque Formidable Forms para agregar a su publicación o página

Ahora, simplemente puede elegir su forma de IMC. Haga clic en el menú desplegable ‘Seleccionar un formulario’ y elija su calculadora de IMC, así:

Seleccionar el formulario correcto del menú desplegable Formidable Forms

Es posible que desee obtener una vista previa de su página para ver cómo se ve su calculadora de IMC terminada en vivo en su sitio. Aquí está el nuestro:

Ver la calculadora de IMC en el sitio web

Si hay algo que desee cambiar o modificar, simplemente vuelva a su formulario en el panel de WordPress. Lo puedes encontrar debajo Formidable »Formas.

Siempre que realice cambios en su formulario, se actualizará automáticamente en todas partes de su sitio. No es necesario cambiar el código corto ni hacer nada adicional.

Esperamos que este tutorial le haya ayudado a aprender cómo agregar una calculadora de IMC en WordPress usando Formidable Forms. También puede que le gusten nuestros artículos sobre los widgets de WordPress más útiles y debe tener WordPress plugins para sitios comerciales.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

.

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.