How to create a leaderboard on your WordPress site without code

Want to create a dynamic, auto-updating leaderboard on your WordPress site?

With Gravity Forms and GravityMath, you can easily rank users based on submitted data—whether it’s sales figures, fitness challenges, or competition scores. In this tutorial, I’ll show you, step-by-step, how to build a leaderboard that updates as you receive new data. Let’s get started!

Sneak peek

Here’s a sneak peek at the final leaderboard. As you can see it’s a table showing how much each sales rep has sold. The leaderboard shows the highest seller first and updates automatically when new entries are added!

What you’ll need

Here are the plugins you’ll need to create a leaderboard like the one in this example:

• Gravity Forms (any license level)
• GravityMath

Building leaderboards with Gravity Forms and GravityMath

Gravity Forms is a powerful form and data management plugin for WordPress. It enables you to build forms with different field types and easily capture user-submitted data. GravityMath is an add-on for Gravity Forms that enables you to perform advanced calculations on your form data and display summary reports of your data.

Summary reports enable you to group entries by certain field values and perform calculations such as count, sum, max and min, providing insights into your data. Summary reports also update automatically as you receive new data! That’s why they are perfect for creating leaderboards and ranking reports.

Using Gravity Forms and GravityMath, you can create leaderboards based on any user-submitted data. Here are some examples:

• Host fitness and exercise challenges
• Display sales figures
• Show sports rankings
• Loads more!

1. Creating the submission form

In this example, we’re going to create a leaderboard for sales representatives showing rankings for who has sold the most (in dollars) over a set period.

The first thing we need to do is create a form where sales reps can submit their sales data. To create a new form, we’ll hover over “Forms” in the WordPress sidebar menu and click “New Form”. Feel free to select from one of the premade templates, or click “Blank” to build your form from scratch.

For this example, we’ll keep things simple by adding the following 3 fields:

• Purchase ID (“Single Line Text” field)
• Sales rep (“Drop Down” field)
• Total amount (“Number” field)

Next, we’ll populate the dropdown with the names of the various sales reps taking part in the competition. We can do this by opening the field settings, clicking “Edit Choices” and adding options.

After that, we’ll open the field settings for the “Total amount” field and change the number format to “Currency”. This will enable sales reps to input a dollar amount when recording their sales figures.

That’s it for the form.

After creating your form, make sure to embed it on a page or post. You can do this using a shortcode or a block.

2. Creating the leaderboard with GravityMath

After creating the form, we can turn our attention to building our leaderboard. For this example, we’re going to show a ranking of sales reps based on how much they have sold (in USD).

We’ll start by creating a new page and giving it a name (“Sales Leaderboard”). Next, we’ll add a “GravityMath Summary” block to our layout. 

After adding the block to our page, we’ll need to configure the block settings. Here we can select what data to show, change what calculations to perform and plenty more.

Here’s a full list of options to configure on the GravityMath Summary block:

• Select a Form – Choose a form with the data you want to show in your leaderboard.
• Group By – Choose a field to group entries by (in this example, we’re using the “Sales rep” field).
• Operation – Choose an operation to perform on the data (count, sum, average, min, max).
• Apply To – Select which field the calculation should apply to (in this example, we’re summing the “Total amount” field). 
• Decimals – Choose how many decimal places to show.
• Sort By – Choose how to sort the results (e.g., highest to lowest).
• Display – Choose whether to show all results or only the top 3, 5 or 10.
• Group By Label – Change the column header text.
• Operation Label – Change the column header text.

3. Adding table styles

The GravityMath Summary block outputs a simple HTML table of results. While this is exactly what we need, it didn’t look that impressive without any styles applied to it.

So naturally, I went to ChatGPT and asked if it could generate some CSS styles for me to use. It did not disappoint! After ChatGPT generated the CSS code, I copied and pasted it into an “HTML” block on the same page as the leaderboard. Here’s the result:

You can find the full CSS snippet below! If you don’t know how to add CSS to your website, read this helpful article. 

Bonus: Building full-on web apps with GravityView

GravityView turns Gravity Forms into an app builder, enabling you to create dynamic web applications all using drag-and-drop (no code required). So if you’re looking to take things further and create a sales dashboard, or a fitness tracker, GravityView is the ideal solution.

Home are some examples of what you can build:

• Expense tracker
• Fitness tracker
• Task management system
• Sales dashboard

Create your own leaderboard today

Leaderboards are a great way to inspire friendly competition and motivate peope to achieve their goals.

With Gravity Forms and GravityMath, you can create a fully automated leaderboard that updates automatically. Whether you’re tracking sales, competition results, or any other user-submitted data, this setup just works—no code necessary.

And if you want to take it even further, check out GravityView to turn your leaderboard into a full-fledged web app!