Fraud Blocker
BdThemes Web Solution Company

Table ofContents

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.

advanced divider
On Key

Related Posts

Khandkar Sayed Alam

Khandkar Sayed Alam

Kh Sayed Alam is a WordPress enthusiastist. He always loved to read and write about content marketing, SEO, and UX. Since 2018, he has been with the WordPress ecosystem to make it easy for non-technical audiences.

Share ourarticle

Subscribe tonewsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.

No spam messages. Only High-Quality information that You deserve.

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.

Our supported payment system and security badge