How to Add a BMI Calculator in WordPress (stepbystep)

How to Add a BMI Calculator in WordPress (step-by-step)

How to Add a BMI Calculator in WordPress (step-by-step) 1

Wondering how to add a BMI calculator to your health and fitness-related website?

Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women. By calculating BMI, you can identify if a person is at a healthy weight. If you have a health and fitness-related website adding a BMI calculator is a great way to attract more visitors and keep them engaged.

In this article, we’ll show you how to add a BMI calculator to your website in a step-by-step manner.

Why Measuring BMI is Important

Calculating your BMI, helps you figure out if you’re at a healthy weight.

In general, the higher the BMI, the higher is the risk of developing various health problems like diabetes, arthritis, liver disease, some types of cancer, high blood pressure, etc.

As a publisher, by adding a BMI calculator to your WordPress site, you can make your visitors engaged and drive more repeat traffic. In this tutorial, we’ll use the Formidable Forms plugin to create the BMI calculator.

Step 1: Download the Formidable Forms Plugin

First off, download the Formidable Forms plugin. Formidable Forms is an advanced WordPress form builder plugin that lets you easily create any types of complext forms within a matter of minutes without having to hire a developer.

With the Business or the Elite plan, you can build a BMI calculator.

Once downloaded, install and activate the plugin on your WordPress site.

Step 2: Create Your BMI Calculator With Formidable Forms

Once your plugin is installed and activated, go to your dashboard and click on Formidable » Add New.

How to Add a BMI Calculator in WordPress (step-by-step) 2

You’ll now be taken to a new page where you’ll have the option to add a form of your choice. By default, it comes with a few options at the top. For adding a BMI calculator, you’ll have to scroll down your screen and check for the BMI calculator option under the Premium Templates option.

Formidable Forms BMI calculator

Hover over the BMI calculator option and click Create form.

click BMI calculator

This will launch a small popup where you can name the form and specify form description. Add a name and click on Create.

Step 3: Designing Your BMI Calculator

Now you’ll be directed to a new screen where you can start designing your calculator. You’ll have 4 tabs at the top of your screen.

  • Build
  • Settings
  • Entries
  • Views

BMI calculator

Under the Build tab, you can work on the form fields. You can add a field from the left panel and customize that field in the builder instantly, which is on the right-hand side. Form fields are grouped under 3 different headings.

  • Add Fields
  • Advanced Fields
  • Pricing Fields

You can drag any field from your left and drop it in the builder. If you want a basic BMI calculator, you can go with the default fields. Keep in mind that you can customize the form anytime you want.

Step 4: Confuguring BMI Calculator Settings

Once you’ve added all the fields, you can work on its settings. The settings option has 5 different sections.

1. General

Here, you can configure the basic settings, like the form title, description, confirmation message, etc. You’ll also have a BMI calculator key and an embed key that can be used to display the form on your site.

How to Add a BMI Calculator in WordPress (step-by-step) 3

If you want to submit the form without page reloading, you can select Submit this form with AJAX. You can also opt for validating the form with javascript.

You can also set a message to be displayed upon the successful submission of the form.

bmi calculator settings

2. Action and Notification

Under Action and Notification, you can add actions to your form. Here you can integrate your form with email marketing service, eCommerce gateway or even specify where to send notifications once a form is submitted.

How to Add a BMI Calculator in WordPress (step-by-step) 4

3. Form Permissions

Under this option, you can determine who can see, submit, and edit the form entries. If you want to limit the number of form entries or form visibility, you can configure from here.

How to Add a BMI Calculator in WordPress (step-by-step) 5

4. Form Scheduling

The next option lets you schedule your forms. With this option, rather than publishing a form immediately, you can choose a date when you want to display it. This option comes in handy especially when you want to display time-sensitive forms.

BMI Calculator

5. Styling and Buttons

In the next option, you can style your buttons. You can also select a template to make your form look more appealing. You can also choose not to use any template.

You can add your button texts and align them as well. It also has an option to add conditional logic to your submit button.

How to Add a BMI Calculator in WordPress (step-by-step) 6

6. Customize HTML

The last option is to customize your form with HTML tags.

Step 5: Publishing Your BMI Calculator

Once you’re done creating your BMI calculator form, you can go ahead and publish it. To publish your form, you can click on the Publish button on the top right corner of your screen under the Build tab.

Now go to the Settings tab and you’ll see an option called the Embed Shortcode.

How to Add a BMI Calculator in WordPress (step-by-step) 7

Copy this shortcode and paste it within your posts and pages where you want the BMI calculator to be displayed. Once done, publish the page. Your BMI calculator should now be live on your site.

That’s it. You have successfully published your BMI calculator on your website on your own without coding.

We hope you liked this article on adding a BMI calculator to WordPress. You might also want to check out the best contact form plugins on WordPress.

Keep reading the article at IsItWP – Free WordPress Theme Detector. The article was originally written by Editorial Team on 2020-03-16 09:07:06.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top