Overview
If you’ve ever done any type of fundraising, you know how powerful an incentive a progress meter can be. From physical manifestations like the office canned food drive’s barrel to digital solutions like GoFundMe’s progress meter, these tell your potential donators how much money you plan to raise and how close to the goal you currently are. Knowing the current progress of a project encourages people to donate and creates a feedback loop to keep those donations flowing.
We have built a plugin to add a progress meter to your Gravity Forms for tracking donations and form submissions. You set the goal and it will automatically track the number of submissions. If you collect payments via the form, it can track the amount of money collected. It can even count the quantity of products sold.
Styling for the progress meter is inspired by Gravity Forms 2.5. We love the look and feel of the new progress meter for multi-page forms, and we want to keep that experience consistent with our progress meter.
Using the Plugin
Prerequisites
Confirm that you have Gravity Forms installed and activated and that you’ve installed and activated the plugin.
Using the Shortcode
Gravity Forms Progress Meter adds additional parameters to the [gravityforms]shortcode. Using these parameters, you can activate and customize the progress meter to meet your needs. Let’s step through the different configurations.
Progress Meter With Goal
Add the Progress Meter to your form by setting the action parameter to meter and adding a goal value to the [gravityforms].
[gravityforms id="211" action="meter" goal="75"]This will generate a progress meter at the top of your form with a goal of 75 form submissions.
Currency Goals
If your goal is a specific currency amount and your form collects payment using a Gravity Forms Add-On such as PayPal or Stripe, you can count the payment amount instead of the number of submissions by adding the field parameter to the shortcode and setting its value to payment_amount.
[gravityforms id="211" action="meter" field="payment_amount" goal="75"]The progress meter will increment based on the amount spent after a payment has been processed. If the payment method has delayed processing, such as often the case with PayPal, then the count won’t increase until payment is finalized.
Custom Labels
Gravity Forms Progress Meter supports custom labels for both the submission count and the goal, using the count_label and goal_label parameters. Here’s an example where we replace both.
[gravityforms id="211" action="meter" count_label="Donations %d" goal_label="Goal %d" goal="75"]Note the %d within the parameter value. The plugin uses this know where to insert the submission count and goal count.
Combine with Currency Goals
If you combine custom labels with Currency Goals, you can track the amount spent and display it above your form, similar to what you see on Kickstarter and GoFundMe.
[gravityforms id="211" action="meter" field="2.3" goal="25"]field parameter. This targets the quantity input within a Product field.
[gravityforms id="211" action="meter" field="payment_amount" count_label="Donations $%d" goal_label="Goal $%d" goal="1000"]Count Values in a Field
Instead of counting submissions, you can count the value of a field using the field parameter. This is useful for counting the quantity of an item sold, or the amount of money spent. Below is an example where we count the quantity of a Product whose Field ID is 2.
[gravityforms id="211" action="meter" field="2.3" goal="25"]field parameter. This targets the quantity input within a Product field.Parameters
– id integer required
The form ID that acts as the data source for the progress meter.
action string required
The action that will be performed. Use “meter” to add a progress meter.
goal integer required
Specify the goal amount for the progress meter.
field string optional
Specify a field ID to count the sum of this field’s submitted values. Use “payment_amount” to count currency.
count_label string optional
The label to display for the submission count. Must include %d to include the count.
goal_label string optional
The label to display for the goal amount. Must include %d to include the count.
Summary
We’re releasing this plugin today with the plans to build additional features in the future. Currently, here’s what we have on our to-do list:
- Support for different colors and themes.
- Live updates as new entries are submitted.
- Option to calculate by true form total rather than captured payments.
- Offer this functionality as a custom block for the Block Editor.
Let us know if you have any ideas for other features or options you’d like to see in the plugin. We’re eager to hear how you’d like to use it!
Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 33+ essential add-ons for Gravity Forms with support you can count on.
Hi Samual,
I’ve got an urgent question regarding Count Values in a Field. I would like to show count in the progress bar only after the payment is succesful. Now it shows immediately after the form is filled in and sent. Showing x donations when there isn’t any payments done. Please advice.
PS. Thanks for the reply on my previous message.
Hi Asta,
Which shortcode are you using, because if you’re to use the Currency Goals, the count won’t increase until payment is finalized.
Best,
Thanks for the very quick reply!
I’m using this shortcode. (Combined with Mollie addon – currently in testing mode, so not live)
[gravityforms id="14" action="meter" field="26.3" count_label="%d pakketten" goal_label="Min. aantal pakketten %d" goal="108"]
Hi Asta,
It will count after the payment was processed. If you are a Gravity Wiz customer, drop us a line Support a we will help you troubleshoot.
Best,
After going live it counts BEFORE the payment is processed. A really big bummer as I’ve been working a long time to get this working.
Thanks for the quick replies.
Hi, thanks for this amazing snippet.
I’d like to ask if it is possible to create a progress bar like this url using Gravity Forms and snippets: https://secure.avaaz.org/campaign/nl/india_covid_crisis_loc_3b_op/?thRyWrb
(Showing the current goal in the bar and the line below in the example to display the numbers in text.)
Another cool thing would be to type in the donation amount in the form like that.
Hi Asta,
This will definitely require some customization to the snippet. I’m currently not sure about the extent of the work involved to get this done, but if you’re a Gravity Perks customer, you can get in touch via our support form so we take a deeper look into this and see if this is something that we can add support for.
Best,
Hi,
Is is possible to use this to display time?
Where the progress bar and label would display time in hours and minutes.
Each of the option box values would be in minutes. The Goal time would be in total time of hours and minutes.
Hi Glenn,
I’m getting in touch with you via email to request additional information.
Best,
Hi,
Can you use this plugin to track selections made in option boxes. I would like to have 3 option boxes with 1 vote, 2 votes or 3 votes. Then the progress bar will count total number of votes from all submissions up to a goal amount. Is that possible?
Hi Glenn,
This should be possible if you set the value of the checkbox field options to 1,2,3 and then using a Number field, you’ll enable calculations to get the sum of the values in the checkbox. You will then use this shortcode [gravityforms id="3" action="meter" field="28" goal="25"], where 28 will be the ID of the calculation Number field to get the total number of votes for the progress meter. You can set the visibility of the Number field to hidden so it isn’t visible to the public.
Best,
It would be amazing if there was a parameter to filter entries using the value of a given field. For instance, my org has a fund for medical treatments for our shelter pets. There is one donation form with each current pet listed as choices to donate. Before users get to the donation form, we have all the current needs posted on a page with the goal for each pet. The user can choose one of the pets where they’ll go to the donation form with that pet selected so we know where to apply the donation. For my purposes, I’d like to show a progress bar for each pet on the initial page. To do that, I would need a parameter to filter the entries on the donation form to the specific pet to get the correct progress total. I hope that made sense.
Hi Michael,
This an interesting use case and thanks for the detailed description of what you’re trying to do. This is currently not possible with the snippet, so I’ll forward your question to our developers as a feature request.
Best,
Love this idea, Michael. I took a look at the code to see what was possible. It’s a little more robust of a feature than we can add on the fly but we’ve logged the feature request and will keep an ear out for other folks who want to do the same thing!
Is it possible to count list entries and/or Nested Field entries?
Hi Andrew,
You could count the number of Nested Entries in a Number field and then target that with the progress meter.
It would be really useful if we could also add manual amounts (eg. donations received via cheque).
Hi Andrew,
You may want to check out this snippet, that allows you to edit the payment details on an entry. In this way, you could add the cheque payment manually to the entry which would then be reflected in the progress meter.
Best,