Looking to Add a BMI Calculator to Your WordPress Site?

If you have a WordPress website that focuses on health and fitness, a BMI calculator can be a valuable addition to engage your visitors and enhance their experience. In this article, we’ll show you how to easily integrate a BMI calculator on your WordPress site without any coding or complex calculations.

Using Formidable Forms for Your BMI Calculator

The Formidable Forms plugin is the easiest way to create a BMI calculator on your WordPress site. With a built-in BMI calculator template, this popular contact form plugin allows you to effortlessly add a BMI calculator. Users can input their weight and height, and the calculator will automatically calculate their BMI and provide a category (underweight, healthy, overweight, or obese). It also includes a button to see specific weight categories and their ranges.

Setting Up Formidable Forms

Start by installing and activating both the Formidable Forms Lite and Formidable Forms premium plugins. The free version offers basic features, while the premium version provides advanced functionalities. Connect your WordPress account to your Formidable Forms account by going to “Formidable » Global Settings” in your WordPress dashboard. Follow the instructions to establish the connection or manually enter your license key from your Formidable Forms account.

Creating a BMI Calculator in WordPress

Once you’ve set up Formidable Forms, go to “Formidable » Forms” in your WordPress dashboard and click on “Add New.” Look for the “BMI Calculator” template under the “Calculator” section and preview it by clicking the eye icon. To use this template, click on “Use this template.” Enter a title in the “Form Name” field to identify the calculator in your WordPress dashboard. Click “Create” to open the BMI calculator template in the drag-and-drop editor.

Customize Your BMI Calculator

The BMI calculator template already includes the necessary fields, but you can customize it to fit your needs. Select a field in the editor and adjust its settings in the left-hand menu. For example, you can change the text above a field by clicking on it and entering new text in the “Field Label” setting. You can also add more fields by going to the “Add Fields” tab and dragging and dropping the desired field onto the form editor. To delete a field, hover over it, click the three-dotted icon, and select “Delete.”

Fine-tune the Settings for Your BMI Calculator

After customizing the appearance of your BMI calculator, check its settings by clicking on the “Settings” tab. In the “General” tab, you can modify the form’s title and description. To specify what happens when a visitor submits the form, select “Actions & Notifications” in the left-hand menu. Expand the “Confirmation” section to edit the default message shown to visitors after submitting the form. You can customize the message and add links or additional information based on the user’s BMI result. The “Messages” box supports HTML code for text formatting and hyperlinks. Avoid modifying any code inside square brackets to maintain the calculator’s functionality.

Modify the “Submit Button Text” and “Submit Button Position” settings under the “Buttons” section to personalize the call-to-action button. Once you’re done with the settings, click “Update” to save your changes.

Adding the BMI Calculator to Your WordPress Site

To add the BMI calculator to your WordPress site, open an existing post or create a new one. Click the “+” button to add a new block and search for “Formidable Forms” in the popup. Select the appropriate block from the options. Open the “Select a form” dropdown and choose the BMI calculator you created earlier. Your WordPress site will now display the BMI calculator. Preview the page to ensure it integrates seamlessly with your website’s design and content. If everything looks good, update or publish the page.

Customizing the BMI Calculator’s Style

If the default style of the BMI calculator doesn’t match your website’s aesthetic, you can create a custom style. Go to “Formidable » Forms” in your WordPress dashboard, find your BMI calculator, and click “Edit.” In the “Style” tab, select “New Style” and provide a name for your custom style. Modify the various settings to customize the appearance of form labels, radio buttons, fonts, colors, and more. Click “Update” to save your changes.

To apply the new style to your BMI calculator, select the “Style” tab and click the dotted icon on the custom style. From the dropdown, choose “Apply,” and then click “Update” to finalize your changes. Your BMI calculator will now showcase your custom form style.

Conclusion

By adding a BMI calculator to your WordPress site using Formidable Forms, you can improve user engagement, enhance the visitor experience, and encourage them to take actions related to health and fitness. It’s an easy and effective way to provide an interactive tool for your audience. Remember to subscribe to our YouTube Channel and follow us on Twitter and Facebook for more insightful WordPress tutorials.