BMI Calculator - Step by Step


Let's say you want your Joomla! site to have a Body Mass Index Calculator.

First you need to know the formula to produce the index. You can get it from an internet site, for example: Wikipedia.

Draw on a piece of paper the input fields your calculator will need. If you look at the formula, you will see that in our case they are two: mass and height. To make the things a bit more sophisticated let's add a third input field: Metric or Imperial Units to be used in the calculation.

Under the input fields write the result your calculator will display. For example: "Your BMI is 25.3 - you are overweight!" - The two underlined words are the results you expect your calculator to produce.



Now that you have gathered the information for all the three steps of building a calculator, it's time to go back to the generator!

Add the first input field by clicking the "Number Field" tab.

Fill in the pop-up box like this:

Add the second input field by clicking again the "Number Field" tab. Fill in the pop-up box like this:

Click the "Choose Field" tab to add the question about the units used for measuring the height and weight. Fill in the pop-up box like this:

Fill in the second pop-up box like this:


Now scroll to the formulas section. If you check again the BMI formula, you will see that the Result is equal to weight devided by the square of height if the user has chosen Metric units, and the Result is equal to mass multiplied by 703 divided by square of height if the user has chosen Imperial units. So you clearly need a conditional statement here.

Click the "Condition" tab. The tab goes black.

Now click the third input field (C) - the one with the units question.

Your formula now contains a conditional statement based on the variable C ("Units"). This construction tells the calculator what to do if the user has selected the one or the other answer to the units question. For now it says to add 0 in all cases. You have to change that.

Delete the first 0 (the one that is added if the user has selected 1-metric) and click the second input field - B ("Weight") from the list in the previous section. The B variable is added to the formula.

Click on(or next to) the B variable to get a blinking cursor (if it is not there already). Type "/" (division operator).

The next part of the formula needs an advanced math function - to raise A ("Height") field to the power of 2. Go to the Math tab in the upper right corner and select "power" from the drop-down list.

The function appears on the screen with default values of 0 and 2, i.e. "0 squared". You have to replace "0" with "A". To do this just delete "0".

Then click the first input field - A ("Height"). This is the formula for BMI if the entered units are kg and m.

Now you need to write the formula in case the user has chosen Imperial units.

Delete the second 0 in the conditional statement (when C is =2) and click B ("Weight") field. Type " * 703 / ". Select the "power" function again, delete the default 0 and click A ("Height") field.


You are almost ready now. You can even do the first test drive of your calculator!

Click "Test Calculator" button and you will see two previews (in the middle and in the right column of the site). Both are operational and you should test it with some example values to ensure that everything is ok.

If the calculator doesn't work as expected, modify the formula or the fields definitions.

When you are ready scroll to the final section - 3. There you will edit the output text.

Click "edit" button. Delete all the text in the white area and write "Your BMI is - you are !". Now position you cursor between "is" and "-" (click there to reposition the blinking insertion point). Click the formula you have already built.

Now test your modified calculator. Click again the "Test Calculator" button. The new preview should display the modified text after clicking "Get Results!".

Finally you can include some additional explanation to the result. For example: is the calculated BMI good or bad?

Add new formula to the formulas section (by clicking the tab "Add Formula").

Click the first formula, so the second formula becomes equal to the first.

Click the "edit" button in the output section. Postion the blinking cursor between "are " and "!". Click the second formula. Click OK.

Now you have two exactly the same results in the output text. Why do you need the second formula then? Because you will give text values to the second result.

Click the second result (Result1) in the output.

Check "Text" in the pop-up box.

Fill in the second pop-up box like this:

This scale is a short version of the Wikipedia definition, but you could choose to base your calculator on the full version:

That's it! Test you calcualtor again. If you like it and want to give it a try on your own site click "Download Module".


Try to enhance your new calculator by adding some conditional statements to deal with the devision by zero problem (if the user has left Height field blank). You could also give a text value to the result of 0 (in case the user has left the Units field or Weight field blank).

Check the Demo calculators to find more tips and tricks.