Create a WordPress BMI Calculator for Health-Focused Website

Shaugat Ashraf ○ February 6, 2023 ○ 6 minutes
BMI calculator and a girl cycling

Do you want to add a BMI calculator to your health and fitness-focused website? If your business offers health and fitness products or services, a BMI calculator on your website can be a great addition. It can also drive a considerable amount of traffic to your website, which will eventually lead to higher revenue. 

On top of that, adding a BMI calculator is easier than you think. In this article, we will show you how to create a WordPress BMI calculator. So, let’s get started! 

Fluent Forms is the most beginner-friendly form builder. Download now and start crafting beautiful forms FREE!!!

What is a BMI calculator? 

Body Mass Index (BMI) is a measure of body fat based on an individual’s weight and height. It is a commonly used tool to broadly categorize people as underweight, healthy, overweight, and obese. 

To calculate BMI, you need to know your weight and height in the correct measurement unit. Once you have this information, you can enter it into the BMI calculator, which will then calculate your BMI. 

The formula for calculating BMI is – 

BMI = Weight (kg) / Height (m)2 

The result is then presented as a number, which helps you understand if your weight is within a healthy range. Some examples of BMI calculators are the ones on the official website of the National Health Service (NHS) and Diabetes Canada.

BMI calculator on Diabetes Canada website

Why create a WordPress BMI Calculator? 

If you offer products or services related to the health and fitness industry, a BMI calculator on your business website can be a helpful tool. It can be especially useful for people trying to assess their risk for health problems related to being overweight or obese. 

You can also take advantage of the WordPress BMI calculator to generate leads. By offering a BMI calculator on your website, you can collect email addresses from visitors who are interested in receiving more information about health and fitness. 

Now that you know why you need a BMI calculator for your WordPress site, let’s create one. 

How to create a WordPress BMI calculator 

To create a BMI calculator for a WordPress website, all you need is a plugin that takes numeric inputs from the visitors, calculates the BMI and shows the result. One great plugin which is capable of doing all these is Fluent Forms. 

It is the most lightweight and smartest plugin for real-time calculations based on user inputs. But Fluent Forms doesn’t stop here; it is packed with tons of powerful features like – 

As we have selected the right tool, let’s dive into the process of making a WordPress BMI calculator. 

Step 1: Install Fluent Forms 

Installing Fluent Form is similar to installing any other WordPress plugin. Go to Plugins from your WordPress dashboard and click on the Add New button. Search for Fluent Forms, install and activate it. 

Install Fluent Forms

You need to upgrade to the Pro version of Fluent Forms to use the Numeric Field feature. With Fluent Forms Pro, you can reveal a whole bunch of extra features and functionalities. 

Step 2: Create a BMI calculator 

Now, hover over Fluent Forms Pro on your WordPress dashboard and click on New Form > Create Form to start creating a BMI calculator. 

Create a new form

You will be landed on the form editor interface. Rename the form by clicking on the top left corner of the form editor. 

Rename the BMI calculator

To give your BMI calculator a title, add a Custom HTML field and customize it.  

Using Custom HTML for the title of the calculator

Now add a Numeric Field. Customize the field by changing the Element LabelPlaceholder and other necessary settings. 

Adding input field for weight

Similarly, add another Numeric Field for collecting information about height. Use Placeholder to mention the appropriate unit of measurement. 

Adding input field for height

To calculate the BMI, add one more Numeric Field to the form editor and make the following changes – 

  • Hide the Element Label.
  • Insert ff-hidden in the Element Class from the Advanced Options tab. This will keep the field hidden.
  • Check the box beside Enable Calculation and put the following code as the Calculation Expression

Put appropriate name attributes of the respective fields in the above calculation.

These changes will allow you to show the calculated BMI once a user provides the necessary data and clicks on a button. 

Adding calculation expression

Lastly, customize the Submit button. 

Customizing the submit button

Don’t forget to click on the Save Form button. 

Your BMI calculator is all set to be published on your website. 

Step 3: Display the calculator on your website 

You can display the BMI calculator on your WordPress site in three ways. 

First, you can use the Gutenberg block editor to choose the BMI calculator you have just created. Click Add New under Pages in the WordPress dashboard’s left sidebar. Give the page a title. 

In the block editor’s blank area, click the plus (+) sign or insert a forward slash (/). Then enter Fluent Forms in the search box and choose the BMI calculator. 

Publishing BMI calculator using Gutenberg block editor

Fluent Forms’ Shortcode feature is a second option that you can use to show the calculator. The shortcode is found at the top of the window that displays the form editor. 

Fluent Forms shortcode

Click on the shortcode to copy it and then paste it using a shortcode block anywhere you want to display the form on your website. 

Publishing BMI calculator using shortcode

The third approach, which is the most impressive one, is to display the BMI calculator on a dedicated landing page. To do this, go to Settings & Integrations > Landing Page. Check the box to Enable Form Landing Page Mode. The landing page is fully customizable to match your brand identity. 

WordPress BMI calculator on a landing page

Try out the BMI calculator below:

Your data will be automatically deleted after form submission. We don’t store them.

BMI Calculator

Calculate Your BMI

Your BMI is

Wrapping up 

In this article, we showed you how you can create a WordPress BMI calculator. It’s a great way to add valuable functionality to your website. With little effort, you can provide your visitors with a useful tool that helps them calculate their body mass index, track their progress, and achieve their fitness goals. 

The capability of Fluent Forms doesn't end here. You can create almost any kind of calculator, interest rate calculator, car loan calculator, sales tax calculator, ideal weight calculator, you name it.

Follow our social media channels and keep an eye on our website for more tutorials like this. 

Shaugat Ashraf
Shaugat Ashraf

An Econ major turned into a Digital Marketer by choice. Hello! This is Ashraf and I am here to enlighten you on various WordPress topics and help you make informed decisions.

Leave a Reply

Your email address will not be published. Required fields are marked *

Search Post

Subscribe for weekly email
fluentform Newsletter Inline
We won't send you spam. Unsubscribe at any time.