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

¬ŅDesea 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, 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ódigos!

Agregar una calculadora de IMC a su sitio web de WordPress

¬Ņ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. Calcular su IMC le da una indicación rápida de si tiene bajo peso, sobrepeso o 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ándote algo, o una de tus ofertas de afiliados.

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

También es una buena manera de alentar el tráfico repetido. Si alguien está tratando de perder peso, puede regresar 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 usando las unidades imperiales, puede usar la siguiente fórmula:

IMC = (peso libras / altura pulgadas2) x 703

Un IMC saludable est√° en el rango de 18.5 – 25. Un IMC inferior a 18.5 indica que la persona tiene bajo peso y un IMC superior a 25 indica que tiene sobrepeso.

Obviamente, pedirles a tus 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 les muestre su IMC. De esta forma, los usuarios se mantienen involucrados en su sitio web y es m√°s probable que se conviertan en clientes.

Crear una calculadora de IMC en WordPress

Para este tutorial, utilizaremos el complemento Formidable Forms. Es uno de los mejores complementos de WordPress para crear formularios en el mercado y le permite crear formularios avanzados utilizando herramientas simples de arrastrar y soltar.

Viene con toneladas de plantillas de formularios, 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 de Formidable Forms, luego instalar y activar el complemento. Para obtener más detalles, consulte nuestras instrucciones sobre cómo instalar un complemento de WordPress.

Tras la activaci√≥n, debe visitar Formidable ¬ĽFormularios p√°gina y luego haga clic en el bot√≥n "Agregar nuevo" en la parte superior para crear su calculadora de IMC.

Crear 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 "IMC" en la barra de b√ļsqueda para localizarlo.

Cargar plantilla de formulario de Calculadora de IMC

Ahora que tiene la plantilla 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.

Se lo dirigir√° directamente a la vista "Construir" de su formulario. Como puede ver, tiene el formulario 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 formularios formidables

La calculadora de IMC funcionará perfectamente con la configuración predeterminada. 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 el cuadro de IMC Prime si desea mantener el formulario simple. No es necesario 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 de bajo peso, peso saludable, sobrepeso y obesidad.

Ajuste de 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 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 ajustar la redacción para que sea apropiada para su audiencia.

Otra opción aquí es agregar enlaces a más orientación. Por ejemplo, es posible que tenga contenido que ofrezca consejos sobre dieta o ejercicio.

Puede ingresar el 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. Lo veremos 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

Propina: El cuadro donde puede editar el mensaje de resultados es bastante peque√Īo. Puede copiar el mensaje desde el cuadro y pegarlo en un editor de c√≥digo para que sea m√°s f√°cil de editar. Vuelva a copiarlo 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 usar. 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 en el botón que aparece después de que se haya enviado el formulario por primera vez.

Cambiar los mensajes del botón Enviar y actualizar en Formidables Formularios

Cambiar el estilo de su calculadora de IMC

Por defecto, la calculadora de IMC parece bastante simple. 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 Formidable ¬ĽEstilos en tu panel de WordPress.

La pesta√Īa Estilos de formularios formidables

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.

Agregar 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. Vamos a aumentar esto de 14px a 18px originales.

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 ampliar 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 esquina superior derecha para guardar los cambios en el estilo.

Actualizando el nuevo estilo que has creado

Luego puede aplicar el estilo a su formulario. Primero ve Formidable ¬ĽFormularios luego encuentra tu forma. Haga clic en el t√≠tulo del formulario para editarlo, o pase el cursor sobre el formulario y haga clic en el enlace "Editar" justo debajo de √©l.

Edición del formulario de 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 tu formulario.

Aqu√≠, puede usar 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 calculadora de IMC con los nuevos estilos aplicados

Agregar el formulario de 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 esquina superior derecha para guardar los cambios:

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

Selección del bloque Formularios de formularios para agregar a su publicación o página

Ahora, simplemente puede elegir su formulario de IMC. Haga clic en el men√ļ desplegable "Seleccionar un formulario" y elija su calculadora de IMC, de esta manera:

Seleccionar el formulario correcto del men√ļ desplegable Formularios

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 regrese a su formulario en el panel de WordPress. Puedes encontrarlo debajo Formidable ¬ĽFormularios.

Cada vez que realice cambios en su formulario, se actualizar√° autom√°ticamente en todas partes en su sitio. No necesita cambiar el shortcode ni hacer nada adicional.

Esperamos que este tutorial lo haya ayudado a aprender c√≥mo agregar una calculadora de IMC en WordPress usando Formidable Forms. Tambi√©n le pueden gustar nuestros art√≠culos sobre los widgets de WordPress m√°s √ļtiles y debe tener complementos de WordPress para sitios de negocios.

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