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.

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 Calcualtor 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 calculation 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 can be useful.

If you’ve started a health or fitness blog, then a BMI calculator can add more value for your readers, and help them plan the next steps in their health journey. For example, someone who wants 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 check 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

For this tutorial, we’ll be using the Formidable Forms plugin. It is one of the best WordPress form builder plugins on the market and allows you to create advanced forms using a simple drag and drop builder.

It also comes with tons of ready-made templates including a powerful BMI template that lets you add a calculator to your site with just a few clicks.

Visitors can type in their weight and height and the ready-made BMI calculator will perform the calculation automatically. It will then show their BMI, plus 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 information can help them decide what changes they should make to improve their health.

First, you’ll need to sign up for a Formidable Forms account, then install and activate the plugin. 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.

Clicking on the link will take you to the plugin’s Global Settings.

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

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 of 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, you can change the text that appears above a field by typing into ‘Field Label.’

If you want to add more fields to the BMI calculator, then select the ‘Add Fields’ tab.

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 review its settings by clicking on the ‘Settings’ tab.

In the ‘On Submit’ section, you can see what happens when visitors submit the form. By default the BMI calculator will show a message every time someone clicks on ‘Submit.’

In the ‘Messages’ section, you can see the text that will be shown to visitors.

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 117 less_than=”18.5″]Underweight[/if 117]

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 clicking on the ‘Styling & Buttons’ tab.

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

You can also change where the button appears on the page using the ‘Submit Button Alignment’ 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 that 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 your form.

To do this, go to Formidable » Styles in the WordPress dashboard.

To create a new style, click on the ‘+New Style’ button. Alternatively, you can edit the existing default style, although this change will affect all of your forms.

We’re going to make a new style just for the BMI Calculator form.

If you do create a new style, then start by typing a title into the ‘Style Name’ field.

This is just for your reference so you can use any title you want.

There are lots of different settings that 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’ tab.

To change the size of the form’s radio buttons, simply select ‘Check Box & Radio Fields.’

Finally, if you want to make the button text smaller or larger, then click on the ‘Buttons’ tab. 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, go to Formidable » Forms. You can then hover your mouse over the BMI calculator form and click on the ‘Edit’ link.

Next, click on the ‘Settings’ tab and select ‘Styling & Buttons’ from the left-hand menu.

Once you’ve done that, open the ‘Style Template’ dropdown and choose the style that you want to use.

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.