How to Add a BMI Calculator in WordPress (Step by Step)

Do you want to add a BMI calculator to your WordPress site?

If you offer health and fitness-related content, products, or services, then a BMI calculator could be really useful for your audience. This can improve the visitor experience and keep them on your site for longer.

In this article, we’ll be showing you how to easily add a BMI calculator in WordPress without any coding or math required.

How to Calculator BMI (And Why Add a BMI Calculator to WordPress)?

BMI stands for Body Mass Index. It’s a rough measure of a person’s body fat based on their height and weight using the following calculation:

BMI = kg/m²

The kg is the person’s weight in kilograms and m² is their height in meters squared.

A BMI reading can help your visitors, patients, or clients figure out whether they’re underweight, overweight, or a healthy weight for their height. However, asking visitors to do the calculation themselves isn’t a good user experience.

This is where a BMI calculator comes in.

If you’ve started a health or fitness blog, then a BMI calculator can help visitors plan the next steps in their health journey. For example, someone who decides to reduce their BMI might sign up for your fitness tracker.

A BMI calculator can also encourage people to spend more time on your site. This can increase pageviews and decrease your bounce rate.

The more time someone spends on your site, the more likely they are to convert. For example, they might decide to book a trial at your CrossFit gym or buy exercise equipment from your online store.

It’s also a good way to encourage repeat traffic. If someone is trying to change their BMI, then they’ll keep coming back to your site to see whether their BMI is in a healthy range.

With that in mind, let’s see how you can easily add a BMI calculator in WordPress.

Creating a BMI Calculator in WordPress

The easiest way to create a BMI calculator is by using Formidable Forms. This popular WordPress contact form plugin has a BMI calculator template that you can add to your site with just a few clicks.

After that, visitors can simply type in their weight and height and the BMI calculator will perform the calculation automatically. It will then show their BMI and say whether they are underweight, a healthy weight, overweight or obese.

If the visitor wants more information, then they can click on ‘See My Range.’

The calculator will then show the ranges for all the different weight categories. If the visitor doesn’t have a healthy BMI, then this can help them decide what changes they should make to improve their health.

How to Setup Formidable Forms

The first thing you need to do is to install and activate both the Formidable Forms Lite and Formidable Forms premium plugins. The free plugin has limited features, but Formidable Forms Pro uses it as the basis for its more advanced features.

For more details, check out our instructions on how to install a WordPress plugin. Upon activation, you will see a message asking for a license key.

Another option is to go to Formidable » Global Settings in the WordPress dashboard.

Here, you can click on ‘Connect an Account’ and follow the instructions to connect WordPress to your Formidable Forms account.

Another option is to select ‘Click to enter a license key manually’ and then type your license key into the field.

You’ll find this information by logging into your account on the Formidable Forms website.

After entering the key, click on ‘Save License.’

Create a BMI Calculator in WordPress

Once you’ve successfully set up Formidable Forms, you’re ready to create a BMI calculator for your WordPress website. To get started, head over to Formidable » Forms and then click on ‘Add New.’

This opens a popup with all the pre-made templates that you can use.

You’ll find the BMI Calculator template by clicking on the ‘Calculator’ section.

To preview how the form will look on your site, just hover your mouse over the ‘BMI Calculator’ template.

Then, click on the little button that looks like an eye.

Formidable Forms will show a preview of the BMI calculator that you can interact with.

To build a calculator using this template, simply click on the ‘Use this template’ button.

Next, type a title into the ‘Form Name’ field. This is just for your reference so you can use anything that will help you identify the calculator in your WordPress dashboard.

Next, click on the ‘Create’ button.

This will open the BMI calculator template in the drag and drop editor.

The form is on the right side of the screen. On the left, there’s an area where you can add or edit the form’s fields.

The BMI calculator will work perfectly with the default settings. However, you can change any field by selecting it in the editor and then using the settings in the left-hand menu.

For example, to change the text that appears above a field, simply click to select that field. Then, type some text into ‘Field Label.’

If you want to add more fields to the BMI calculator, then select the ‘Add Fields’ tab in the left-hand menu.

You can then drag and drop any field onto the form editor.

To delete a field, simply hover your mouse over that field and click on the three-dotted icon.

You can then go ahead and click on ‘Delete.’

Adjusting the Settings for Your BMI Calculator

When you’re happy with how the BMI calculator looks, you can check its settings by clicking on the ‘Settings’ tab.

First, you can change the form’s title and description in the ‘General’ tab.

You can also change what will happen when a visitor submits the form by selecting ‘Actions & Notifications’ in the left-hand menu.

If you click to expand the ‘Confirmation’ section then you’ll see the message that Formidable Forms shows to visitors by default.

The default message is a mix of plain text and code. For example, the first part of the default message is:

Your BMI Result is:
[if 52 less_than=”18.5″]Underweight[/if 52]

This means that a visitor with a BMI under 18.5 will see the following message: Your BMI Result is Underweight.

You may want to change the wording, add more text, or even add links to some useful resources. For example, you might include links to your site’s low-calorie recipes or muscle-building exercises depending on whether the person has a low or high BMI.

The ‘Messages’ box supports HTML code, so you can easily add links and use formatting such as bold and italic.

If you do make any changes, then be careful not to change any of the code inside the square brackets, as this may stop the calculator from showing the right results.

Tip: The ‘Messages’ box is quite small, so you may find it easier to paste the text into a code editor. You can then make your changes and paste the text back into the ‘Messages’ box when you’re finished.

Changing Your BMI Calculator’s Button Text

By default, the calculator has a ‘See my range’ button.

You can change the text that appears on this button and the button’s position by selecting ‘Buttons’ in the left-hand menu.

Just type the text that you want to use into the ‘Submit Button Text’ field. For example, in the following image we’re using ‘Show My BMI Range’ as the button label.

You can also change where the button appears on the page using the ‘Submit Button Position’ dropdown menu.

Adding The BMI Calculator Form to Your Website

When you’re happy with how the form is set up, you’re ready to add it to your WordPress blog or website.

First, you’ll want to click the ‘Update’ button on the top right to save your changes.

Next, you’ll need to open the post or page where you want to add the calculator, or create a new post.

After that, click the ‘+’ button to add a new block. In the popup, type ‘Formidable Forms’ and then click on the right block when it appears.

After that, go ahead and open the ‘Select a form’ dropdown and choose the BMI calculator you created earlier. WordPress will now add the calculator to your page.

You might want to preview your page to see how the BMI calculator will look on your website. If you’re happy with it, then you can go ahead and update or publish the page.

Now if you visit your site, you’ll see the BMI calculator live.

BONUS: Changing the Styling for Your BMI Calculator

If you’re not happy with how the default BMI template looks, then you can create a new style for the form.

In the WordPress dashboard, go to Formidable » Forms. You can now hover your mouse over the BMI calculator you created earlier and click on the ‘Edit’ link when it appears.

With that done, click on the ‘Style’ tab.

Then, select ‘New Style.’

In the popup that appears, type a title into the ‘Style Name’ field. This is just for your reference so you can use any title you want.

After that, click on ‘Create new style.’

There are lots of different settings you can try. However, to start you may want to change the size, font, or color of the form labels.

To do this, just click on the ‘Field Labels’ tab and then use the different settings in this section. For example, in the following image we’re changing the text size to 18px.

On the right of the screen, you’ll see a preview of the form’s styling. As you make changes, this preview will update automatically.

You can also change the font size and height of the fields themselves, by selecting the ‘Field Settings’ option.

To change the size of the form’s radio buttons, simply click to expand the ‘Check Box & Radio Fields’ section.

Finally, if you want to make the button text smaller or larger, then click on the ‘Buttons’ section. Here you can also change the color of the button, so it stands out from the rest of your WordPress theme.

When you’re happy with the style, simply click the ‘Update’ button.

To apply the new style to your BMI calculator, select the ‘Style’ tab. Then, find the custom style in the left-hand menu.

You can now click on the style’s dotted icon.

In the dropdown that appears, click on ‘Apply.’

Finally, click on the ‘Update’ button to save your changes. Now, if you visit the calculator on your site, you’ll see your new form style in action.

We hope this tutorial helped you learn how to add a BMI calculator in WordPress. You may also want to check out our guide on how to create a contact form and the must-have WordPress plugins for business sites.

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.