Turn Your Minimum Efforts Into Maximum Results
  • Products
      Explore package advantages
  • Support
  • Blog
  • Contact

Make BMI Calculator With Elementor [Easy & Simple Steps]

make bmi calculator with elementor

Table ofContents

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_to_make_BMI_calculator_using_Elementor_&_Element_pack_pro

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

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.

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.

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.

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.

Share this post to your social media

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

Leave a Reply

Over 300,000+ Readers
Get fresh content from Bdthemes
Subscribe tonewsletter

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

No spam messages. Only high-quality information that you deserve.

Explore OurProduct

Table of Contents

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins. This website is powered by Element Pack Pro and Rooten Theme.

Subscribe to newsletter

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

Join Thousands of Happy Users

Get Tips & Tricks, Updates, Fresh Blogs & Offers.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge