How to Create a Fitness Tracker in WordPress (With Charts)


Do you want to create a fitness tracker in WordPress?

Many health and fitness-related businesses and online communities offer fitness tracking tools for their users. This helps to keep users engaged and grow your business.

In this article, we’ll show you how to easily create a fitness tracker in WordPress to boost user engagement on your website.

Creating a fitness tracker in WordPressCreating a fitness tracker in WordPress

What is a Fitness Tracker?

A fitness tracker is an online tool that helps users track different aspects of their health and fitness performance.

It could be a weight loss tracker, a BMI calculator, a meal planner, or other type of health tracker. These online tools can be created using no-code WordPress plugins that calculate different values on the fly.

Why You Should Add a Fitness Tracker to Your WordPress Site

If you run a WordPress website for a health and fitness business or an online community, then adding a fitness tracker to your website is an easy way to build user engagement.

This includes websites like:

  • Gym websites
  • Weight loss websites
  • Fitness trainer’s personal site
  • Nutritional site or food blog
  • Health and fitness community
  • Lifestyle communities
  • and more

You can provide your users with actual tools to track their fitness performance, which is more likely to keep them on your site longer.

Improved user engagement leads to higher conversion rates and better customer retention for your business.

Building an Online Fitness Community

One of the easiest ways to monetize a health and fitness website is by using MemberPress. It is the best WordPress membership plugin and allows you to easily sell online courses and subscriptions.

You can create different types of fitness plans, hide members-only content behind a paywall, create online courses, and more.

Users can then use your built-in fitness tracker to measure their performance and progress over time. This helps them spend more time on your website which improves subscription renewals, upsells, and customer retention.

For more details, see our step by step tutorial on how to create a membership website in WordPress.

Creating an Online Fitness Tracker in WordPress

To create an online fitness tracker in WordPress, you’ll need Formidable Forms.

It is the best WordPress calculator plugin on the market that allows you to create advanced forms and calculators for your website. The drag and drop form builder makes it easy to create your fitness tracking forms without having to write any code or hire a developer.

Plus, it works great with other tools that you may already be using like MemberPress, WooCommerce, or your email service provider.

First, you need to install and activate the Formidable Forms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: There is a limited free version of the plugin called Formidable Lite. However, you’ll need the premium version to unlock more features.

Upon activation, you need to visit the Formidable » Global Settings page to enter your plugin license key. You can find this information under your account on the Formidable Forms website.

Formidable Forms license keyFormidable Forms license key

After that, you need to visit the Formidable » Forms page.

Here, simply click on the Add New button to create your fitness tracking form.

Create a new fitness tracking formCreate a new fitness tracking form

Next, you will be asked to choose a template for your form.

There are a bunch of templates that you can use, but for this tutorial we’ll be starting with a blank form.

Choose blank form templateChoose blank form template

Next, provide a name and description for your form and click on the Create button.

This will launch the Formidable Forms drag and drop builder. In the left column, you’ll see a list of the form fields that you can add.

To your right, you’ll see the form preview. Since our form is blank, there are no fields in the preview column.

Form builder interfaceForm builder interface

Let’s change that and add the form fields for our weight loss fitness tracker.

For this tracker, we’ll be adding the following form fields.

  1. User ID – This will be automatically filled by Formidable Forms for logged in users so that users can see their own performance.
  2. Date – Users will be able to enter the date they measured their weight.
  3. Number – We’ll rename this field to ‘Weight’ and ask users to enter their weight in lbs or kg.
Add form fieldsAdd form fields

After adding the fields, you can just click on a field to change its properties.

For instance, we edited the number field to change its label to ‘Weight’ and provided instructions in the description option.

Edit the form fieldEdit the form field

Once you are finished editing the form, click on the Update button to save your form.

Save your formSave your form

Adding Fitness Tracker in a WordPress Post or Page

Next, you would want to add the fitness tracker form to your WordPress website.

If you are using MemberPress, then you can simply edit the Account page. You can also create a new page and restrict it to members-only. This way users will be required to login to enter their fitness data.

On the page edit screen, simply add the Formidable Forms block to your page and choose your Fitness Tracker from the drop down menu.

Formidable Forms blockFormidable Forms block

Formidable Form will now display a preview of your form in the page editor. You can go ahead and save your changes.

You can now go ahead login with a dummy new user account and fill out a few test entries.

Live fitness trackerLive fitness tracker

Display Fitness Form Tracker Data in WordPress

Formidable Forms makes it super easy to display the data collected by your forms on your WordPress website.

You can choose exactly which fields you want to show and display the data in graphs and charts.

Simply edit the post or page where you want to display the form data. Obviously, if you are using MemberPress then you want to restrict that page so that only logged in users can view their own fitness data.

Next, you will need to add a shortcode to your page in the following format.

 [frm-graph fields="22" y_title="Weight" x_axis="21" x_title="Date" type="line" title="Weight tracking" user_id="current" data_type="average"] 

This shortcode has the following parameters.

  • Fields – ID for the field you want to use to display data from (in this case, the weight field).
  • y_title – Title for the Y Axis. In this case we will be using Weight.
  • x_axis – ID of the field you want to use in the x_axis. In this case the date field.
  • x_title – Title for x_axis. In this case, we will use Date.
  • user_id – ‘Current’ so that only logged in users can view their own data.

You can find the field ID by simply editing your fitness tracker form. You’ll see the ID for each field in the form preview.

Finding the field IDFinding the field ID

After adding the shortcode, don’t forget to save your changes.

Next, you need to login with the dummy user account you used earlier to add test entries, and visit the page you just created.

Here is how it looked on our test website:

Fitness tracker data chartFitness tracker data chart

Creating More Fitness Tracking Tools in WordPress

Formidable Forms is the most advanced tools builder for WordPress.

Apart from the weight-loss tracking form, you can also use it to create several other types of online fitness calculators and tools.

It even comes with built-in templates for a BMI calculator and a Daily Calorie Intake calculator.

Fitness calculator templatesFitness calculator templates

We hope this article helped you learn how to easily add a fitness tracker in WordPress. You may also want to see our expert pick of the best live chat software for small business, or follow our complete WordPress SEO guide to get more free visitors from search engines.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.