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.

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

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

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 information can help them decide what changes they should make to improve their health.

A BMI calculator in WordPress

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.

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

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

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 of the pre-made templates that you can use.

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

Formidable Forms' template library

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, you can change the text that appears above a field by typing 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.

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

Changing the form action in Formidable Forms

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.

Adding a custom form submission 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 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.

Customizing the form submission message

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.

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

The Styles tab of Formidable Forms

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.

Adding a new style in Formidable Forms

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.

Creating a custom form style

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.

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

Changing the form field settings

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.

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, go to Formidable » Forms. You can then hover your mouse over the BMI calculator form and click on the ‘Edit’ link.

Editing the BMI calculator form that you created

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.

Applying a custom style to the BMI calculator

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.