Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

Adding a BMI calculator to your WordPress website

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/m2

The kg is the person’s weight in kilograms and m2 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.

A BMI calculator created using Formidable Forms

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.

A BMI calculator in WordPress

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.

Add Your Formidable Forms Pro 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.

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

Adding a license key to the Formidable Forms plugin

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

Creating a new Formidable Form

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.

The Formidable Forms BMI calculator template

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.

Previewing the Formidable Forms BMI calculator template

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.

Previewing the BMI calculator template in WordPress

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.

Creating a new Formidable form

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 Formidable Forms drag-and-drop form editor

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

Changing the label in a BMI calculator form

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.

Adding a field to a BMI calculator in WordPress

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

Removing a field from the WordPress BMI calculator

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.

Changing the BMI calculator settings

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.

Adding a custom message to the BMI calculator

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.

Changing the BMI calculator message

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.

Customizing the BMI calculator submission button

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.

Saving your BMI calculator

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.

The Formidable Forms block

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.

Creating a custom form style

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

Then, select ‘New Style.’

Creating a custom style for a BMI calculator

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

How to create a custom style for a BMI calculator

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.

Changing the size of the field labels

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.

Changing the form field settings

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.

Creating a custom style for a BMI calculator

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.

Customizing the form style

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

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

Applying a custom style to a WordPress form

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 CommentsLeave a Reply

  1. Is it possible to insert BMI calculator form into wp site manually without using any plugin? If so can you refer a step by step guide? Actually I avoid installing too much plugins on my site and want to implement stuff manually.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.