make bmi calculator with elementor

Make BMI Calculator With Elementor [Easy & Simple Steps]

Did you ever make a BMI calculator with Elementor? It’s not impossible but quite tricky if you don’t know the way. There may arise a need for you to build a BMI calculator on your website for visitors or users. Why you may ask?

A BMI calculator is an essential element in any kind of fitness website. BMI is a primary unit that will help many things to go in order. In other words, we can say that without a proper BMI calculation system, no gym fitness websites can be made easily.

BMI is the main principle in health section.  Today we will help you make a BMI calculator with elementor by showing an easy step-by-step tutorial.

Who needs this BMI Calculator:

If you are planning to build a website related to health and fitness, then you will definitely need a BMI calculator. From BMI calculator, a user can determine whether they need to lose weight or have to gain or he is at his ideal weight. Cause diet charts depend on BMI unit. Also, bodybuilders need to make their nutrition list the base of their BMI.

Necessity of BMI Calculator on your website:

BMI chart with Meter and some character

If your website has a BMI Calculator, then your visitor won’t go to other places to measure it. They will spend more time on your website. Also, if you add a calorie calculator like the gym calculator, that will increase the engagement and conversion rate improves a lot in this way.
More conversion, more sell of your product. In addition, you can also include a cost calculator like how much expense will spend on their diet chart. All in all, pack for your visitor to make them rely on your site!!

BMI chart

A BMI chart in BMI calculator using Elementor shows the indicator of weight according to height:


How can you make BMI Calculator With Elementor?

In the WordPress theme pack, there are many types of fitness wordpress theme. There you can easily build a BMI calculator by using  WordPress Calculator plugin.
There is an alternative way that requires nothing. You don’t need to do a single line of code or draw a design line.
It can be easily prepared by Elementor. Today I will use Element pack pro to do it. They have an advanced calculator. It has key features like customizing the whole plugin according to your necessity. Here we add a formula, a new feature in this type of addon. Let’s rush into the main part. Make a BMI calculator for your gym theme-based website.

Step-1: Form field customization

First, to make a BMI calculator using Elementor, go to the Admin menu, click on the square box, type ‘calculator’ in the search bar, some widgets will appear. Select the ‘Advanced Calculator’, hold and drag it to the text area.

BMI calculator with elementor1

Now, a form will appear showing the value field and submit button.

BMI calculator with elementor

Start customizing with the Value fields. Click on the ‘First Value’, click ‘Content’, select ‘Number’ from the ‘Type’ option.

BMI calculator in elementor

Now, select ‘First Value’ in the Label, select ‘Enter your value’ in the ‘Placeholder’ option. Type ‘Your Weight (Kg)’.

Next, click on ‘Second Value’, in the first portion, set ‘Select’ in the ‘Type’ option, set ‘Your Height (Feet)’ in the Label, set the column width to 50%. In the option section, type 1 to 7. See the document to insert the value.

BMI calculator in elementor
BMI calculator in elementor

Now, copy the section and make it into another portion. In the second portion, set ‘Select’ in the ‘Type’ option, set ‘Your Height (Inch)’ in the Label option, set the column width to 50%. In the option section, type 1 to 12.

Step-2: Inserting Formula

In this step making a BMI calculator using Elementor, we will insert a formula to calculate BMI. Now, click on the ‘Formula’ bar, type the formula in the formula box. The formula is: SUM (f1/ ((f2*0.3048 + f3 *0.0254)* (f2*0.3048 + f3 *0.0254))).

BMI calculator in elementor
BMI calculator in elementor

A little more to finish! Be patient and keep reading.

Step-3: Column customization

In this step making a BMI calculator using Elementor, we will customize the column. To do this, click on the ‘Column’ option then click ‘Advanced’ tab in the upper left 3rd position, set the padding to 80.

After that, click on the ‘Style’ bar in the upper left 2nd position, customize the box shadow.

BMI calculator in elementor

Almost done! Keep patience, we are going to proceed to the final step.

Step-4: Styling

In this step making a BMI calculator using Elementor, click on the ‘Form Style’, change the Spacing, text colour, and Typography.

BMI calculator in elementor

After that, click on the ‘Fields’ bar, change the text colour, placeholder colour, and background colour.

BMI calculator in elementor
BMI calculator in elementor12 - BdThemes

Then, in the fields section change the width, colour, and padding.

BMI calculator in elementor

After that, click on the ‘Submit Button’, change the colour and add some padding around it.

BMI calculator in elementor13 - BdThemes

Then, click on the ‘Content’ tab, change the alignment of the submit button to ‘justify’.

BMI calculator in elementor

Now, customize the ‘Result’, change the condition of the result section.

BMI calculator in elementor

After that, click on ‘Style’ bar, change the ‘Error’ section. This section will show an error message if the user enters the wrong information.

BMI calculator in elementor

If the user inserts wrong information or does not put the value then an error message will show like this.

BMI calculator in elementor17 - BdThemes

All done! You have finished making a BMI calculator using Elementor successfully. Now, you can offer your visitors to check their BMI using this calculator very easily.

Now that your BMI calculator using Elementor is ready to perform. This is how it works.

BMI Calculator view - BdThemes

You can easily make your website a perfect fitness zone with a BMI calculator. By doing calculation on it , your visitor can make some good impression on website. Also, who are their own personal trainer, this calculator helps them a lot.
We hope our step-by-step guide will help you a lot in your gym WordPress theme. Let us know what is your experience on it.

Leave a Reply

Your email address will not be published.


Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.