If your WordPress website is targeted towards a particular niche related to health and fitness content, products, and services – you might want to consider adding a BMI calculator to your site. 

A BMI calculator is a handy tool that you can use to make visitors spend more time on your website to read more of your content or even purchase services or products.

BMI stands for Body Mass Index, and it is used to provide a rough ratio of body fat via the weight and height measurements.

It’s not a 100% reliable method but you can get a non-scientific estimation if you’re underweight, overweight, or just the average weight for your height.

If your visitors use your BMI calculator to find their BMI – they’ll likely come back again to track progress, so it’s an excellent way to gain more traffic.

How is BMI calculated?

There are two formulas you can use to calculate BMI depending on the units:

Metric: BMI = kg/m2 

(kg stands for your weight in kilograms, and m2 stands for your height in meters squared)

Imperial: BMI = [weight lbs / height inches2] x 703

To be healthy – you need to be in the 18.5 – 25 range. If you’re below 18.5 – you’re underweight; if you’re above 25 – you’re overweight.

You don’t want your visitors to use their calculators to get the correct number, so adding a simple BMI calculator to input their height and weight to get results is the best idea.

That way, you can engage your visitors, get more traffic, and potentially convert them into customers.

Adding a BMI calculator to your WordPress website

In this article, we’ll use the Formidable Forms plugin to add a BMI calculator to our WordPress website.

It’s a comprehensive form builder plugin that allows you to create advanced forms via drag and drop functionality.

Formidable Forms is a premium plugin and you’ll need a Business subscription to use the BMI calculator template.

Once you sign up for the Formidable Forms account, complete the purchase and download the plugin in ZIP format.

Install a BMI Plugin

Log in to your WordPress dashboard, head to Plugins > Add New, and click the Upload Plugin button on top:

Click Browse, select the plugin’s ZIP file on your computer, and click the Install Now button to install the plugin on your website:

Once installed, click Activate to activate the Formidable Form Builder plugin:

Set up BMI calculator

1. Head to Formidable > Forms and click + Add New to add a new form. Scroll down and find the BMI calculator template, or fill in BMI in the search field.

2. Click Create Form next to the BMI Calculator to go to the next step.

3. Provide the name and the description for your new form. The name could be BMI Calculator, for example, and you can skip the description as it’s optional.

4. This is where Formidable Forms will automatically create a BMI Calculator form for you, and you can customize it as you like. The plugin will take you to the Build view, where you can see the available options in the left frame and your form in the right frame.

The BMI calculator works out of the box with default settings. However, you can add more fields to the form by clicking on the desired field on the left. If you want to remove a field, click it and then click the trash can icon in the field’s top-right corner.

If you want to simplify the form, feel free to remove the BMI Prime field, and if you want your visitor to submit the form to receive a result – you can remove the Underweight, Overweight, Obese, and Healthy weight fields.

Customizing options

Text

To adjust options for your calculator, click the Settings tab on the top of your screen. Here, you can tweak various options related to your form. We recommend changing the default messages shown to your visitors once they submit the form. To do that, scroll down to the On Submit box.

We recommend adding various links for additional reading, such as interesting articles on your website, different diet products, etc. The plugin supports HTML, so you can add it to the On Submit box if needed.

Make sure to work on the wording used in the results box and make it appropriate for your audience.

Buttons

To change the form button text, click Styling & Buttons option on the left (under the form Settings menu). We recommend changing the Submit Button Text and Update Button Text values to tailor it for your visitors.

Style

By default, the form is quite simple, so you might want to adjust the colors, fonts, font sizes, etc., to make it really stand out. To do that, we first need to create a unique style for our BMI calculator form.

Head to Formidable > Styles, and click the + New Style button. Same as earlier, the form options are on the left, while the preview of your form is on the right. Click any option (Form Title, Form Description, Field Labels, etc.) to expand a full set of features for each of the options. 

For example, you can change the labels’ size on your forms, increase the font size and field height for your fields, change the button color and font size, etc.

The Form Messages tab allows you to customize the result message’s look, so check that out as well.

Once ready, click the Update button in the top-right corner to save changes.

To apply the new style to your BMI calculator form, click Formidable > Forms, click the form title to edit it > Settings > Styling & Buttons, and select your new style under the Style Template dropdown menu.

Publishing calculator

To publish the calculator form on your website, add a new post/page, or edit the existing post/page. In the Gutenberg editor, click the + button to add a new block, go to the Widgets section, and click the Formidable Forms option.

Select your BMI calculator form in the dropdown menu, and publish your post/page.

That’s it!

If you want to tweak or adjust your form or its options, you can always find it under Formidable > Forms in your WordPress dashboard. Each time you update your form – it will automatically update everywhere on your website, so you don’t have to adjust the shortcode or change anything.