Collect and Display Donations on Your Website Using Gravity Forms and GravityView

Are you looking for a way to collect and display donations on your website using Gravity Forms?

Whether you run an NGO, charity, nonprofit, or startup you may need a way for people to send you donations. There are several WordPress donation plugins out there but not all of them allow you to display donations on the front end.

In this post, we’ll show you how to use Gravity Forms and GravityView to collect, process, and display donations on the front end of your website. Keep reading to find out more! 👇

💡 Check out a live demo of the latest donations and get your own free trial site preloaded with all GravityKit add-ons!

A Sneak Peek at What We’re Going to Build

Here’s a sneak preview of what we’re going to build in this tutorial 🕵

As you can see, on the left we have a donation form built with Gravity Forms and on the right is a GravityView table layout displaying the latest donations, including the name of the donor and the amount they donated. Finally, underneath the list of donations is the total amount raised.

What You’ll Need

Plugin/Add-On	Free/Paid
Gravity Forms Pro or Elite license	Paid
GravityView (any license level)	Paid
Math by GravityView (optional)	Paid (included in the GravityView All Access license)

Taking Donations Through Your WordPress Website Using Gravity Forms

Depending on the type of organization you run, you may need to collect and manage donations through your website.

Charities

Charities engage in charitable work in order to benefit society and improve the lives of the people. Charities often help to alleviate poverty, further the arts and sciences, and raise awareness about important issues.

In order to operate, charities rely on support from the people in the form of volunteers and/or donations.

Nonprofits and NGOs

A nonprofit organization is dedicated to furthering a particular societal cause or shared mission. Nonprofits operate in a variety of different fields, including healthcare, science, religion, public safety, and more. An NGO (non-governmental organization) is a type of nonprofit group that functions independently of any government. NGOs often work to further humanitarian objectives.

Crowdfunding

The term ‘crowdfunding’ refers to a way of raising money through a collective effort between friends, family, and other individual investors. The idea behind crowdfunding is to tap into the power of the internet in order to draw donations from a large number of people online.

Whether you’re raising money for your local sports club to buy new uniforms or you’re trying to get your startup off the ground, crowdfunding campaigns can help you achieve your goal. 

All of the above rely on donations or recurring memberships in one form or another. 

Choosing a Gravity Forms Payment Add-On to Accept Donations

Before creating your donation form, you’ll need to choose and install a payment gateway to handle the donation process.

Gravity Forms supports a number of popular payment processors including PayPal (great for recurring donations) and Stripe. For access to these payment gateway add-ons, you’ll need a Gravity Forms Pro or Elite license.

Assuming you already have a Pro or Elite license, you can install and activate one or more payment processors from the Gravity Forms Add-Ons page in WordPress.

After activating your chosen payment processor, you’ll need to check out the add-on documentation to get it set up and configured.

Creating the Donation Form in Gravity Forms

To start collecting donations through your website, the first step is to create a Gravity Forms donation form. This allows users to donate a specific, or custom, amount to your organization.

💡 Pro tip: To get a headstart, simply download and import this Gravity Forms donation form template from the Gravity Forms template library.

Otherwise, log in to your WordPress site, hover over Forms in the left-hand menu and click New Form. After giving your new form a name, you can start adding fields to it using the drag and drop form editor.

Most donation forms include the following fields:

• Name
• A contact field (phone number or email address)
• Donation amount
• Payment field for credit card details

You’ll find the Name, Email, and Phone fields under the Advanced Fields tab on the right.

To accept donations, you’ll need to add pricing fields to your form. If you want to give people the option of donating different amounts, you can do this using the Product field. 

After adding the Product field to your form, open the Field Settings and select your desired field type. This can either be Single Product, Drop Down, Radio Buttons, or User Defined Price (if you want to allow the donator to choose their own amount). 

When you’re finished configuring your Gravity Forms donation form, you can embed it on a page or post on your website. If you’re using the WordPress block editor (Gutenberg), you can do this by adding a Gravity Forms block to your layout and selecting your donation form from the dropdown menu.

Here’s an example of a Gravity Form containing the Stripe payment field:

Now that our form is set up and we’re ready to collect donations, we can turn our attention to displaying those donations on the front end.

Displaying Donations Collected With Gravity Forms on the Front-End

After creating your donation form and embedding it on your site, you’re ready to start accepting donations! The next step is to install GravityView and create a View so you can display donations on the front end.

Installing GravityView

GravityView is an add-on for Gravity Forms that allows you to display form data on the front end of your website. GravityView’s diverse layouts and powerful filtering settings allow you to display donations in a variety of ways. But before we get to that, you’ll need to install the GravityView plugin.

Start off by choosing a license option. You can also sign up for a free trial if you’re still on the fence! Next, open your Account page, click on the Downloads tab and download the GravityView plugin ZIP file. 

When you’re done, log into your WordPress website, head over to the Plugins page, and click Add New. Now upload the plugin folder you downloaded in the previous step.

After installing and activating GravityView, you’re ready to start building your first View.

Creating a New View

“Views” allow you to display Gravity Forms entries on the front end. To create a new View, hover over Views in your WordPress admin menu and select New View.

Next, give your View a name and select your newly created donation form as the Data Source. Now, under where it says “Choose a View Type”, select Table.

After selecting a layout, you can start constructing your new View using GravityView’s intuitive drag and drop interface. You can add fields to your View by scrolling down to the Entries Fields section and clicking on the + Add Table Column button. Now simply click on the field name to add it as a column in your table.

You may also wish to add widgets to your View. Widgets make it easier to navigate your View and search for entries. You can add widgets to the top or bottom widget areas by clicking on the + Add Widget button.

After creating your View, you may wish to change the way donations are displayed by modifying the View Settings.

Holding Donations for Approval

If you would like to approve donations before they show up on the front end, scroll down to the View Settings meta box and check the box that says “Show only approved entries”.

You will now be able to approve donations first in Gravity Forms before they show up on the front end.

Embedding Your View on the Front End

After configuring your View, you can embed it on your website using the GravityView embed shortcode.

All you need to do is copy and paste the shortcode into a “Shortcode” block, or, if you’re not using Gutenberg, simply paste it into your page layout where you want the View to appear.

Here’s what our View looks like on the front end:

As you receive new donations, your View will update automatically to include the latest donor and the amount donated. If you enabled entry approval, you’ll need to approve new donations before they can be displayed.

To alter your View so that it looks like the one in our preview at the beginning, simply remove the Email and Donation Date fields.

Displaying the Total Amount Raised

Along with each individual donation, you may also wish to display the total amount raised. This is easy to accomplish using our math plugin!

Math by GravityView is an add-on for Gravity Forms that allows you to perform advanced calculations using your form data. You can calculate averages, totals, and much more.

Using the gv_math Shortcode

Math by GravityView allows you to perform calculations using the powerful [gv_math] shortcode.

To calculate the sum of a field in Gravity Forms, you need two things:

• The form ID
• The merge tag of the field you want to sum

So for example, let’s say our form ID is ‘1’ and the merge tag for the donation field is ‘{donation amount:2}‘, our shortcode would look like this:

[gv_math scope="form" id="1"] {donation amount:2} [/gv_math]

The “scope” tells the shortcode where to pull data from. In this case, we’ve set it to “form” because we’re working with form entry data. 

If you’re summing a product pricing field, you’ll need to add the :price operator to convert the currency format to a number format.

[gv_math scope="form" id="1"] {donation amount:2:price} [/gv_math]

If you wanted to display the total number of donations received, you could tweak the above shortcode by adding the :count operator, like this:

[gv_math scope="form" id="1"] {donation amount:2:count} [/gv_math]

When you’re done constructing your shortcode, simply paste it into a WordPress “Shortcode” block.

As you can see, when loading the page on the front end, the shortcode is replaced by the total amount raised!

BONUS: Displaying Donations in Different Categories

If your organization raises money for multiple causes, you may wish to allow your donors to select a cause to donate towards. In this case, it’s helpful to split donations into separate categories.

If you want to display donations in different categories, you can accomplish this using our Advanced Filtering extension.

After activating the Advanced Filtering extension, you’ll be able to display donations based on conditions that you set. To do this, edit your View, scroll down to the View Settings and click on the Filter & Sort tab.

Next, click Add Condition to set up an advanced filtering condition for your View. 

In the above example we’re only displaying donations where the “Cause” was set to “Education”.

Displaying the Total Amount Raised for Each Category 

Now you’re probably wondering how to display the total amount raised for each cause or donation category. As before, we can calculate this using the [gv_math] shortcode! All we need to do is apply a filter based on the specific cause or category.

[gv_math scope="form" id="1" filter=filter_5=Education&op_5=is"] {Donation Amount:2} [/gv_math]

As you can see, the shortcode is mostly the same as above apart from a few new additions:

• The filter parameter allows us to filter the entries in the scope by a specified value
• filter_5: the number 5 here refers to the ID of the field we want to filter on
• op_5: the operation to be used when filtering (default: is)

The above shortcode may seem confusing, but it’s actually quite straightforward! To learn more about [gv_math], check out our ultimate guide to Gravity Forms calculations. 

Putting it All Together: Creating the Donation Page

Now you know how to create a donation form, display donations on the front end, and calculate the total amount raised! Finally, we can put everything together on one page.

To do this, create a new page and add a Columns block to it using the WordPress block editor. You can do this by clicking on the ‘+’ icon and searching for “Columns”. The columns block allows you to add different width columns to your page layout – select the “50 / 50” variation.

Now add a Gravity Forms block to the left column by clicking on the ‘+’ icon and searching for “Gravity Forms”. After adding the block, select your donation form from the dropdown menu. Finally, embed your View in the right-hand block by placing the GravityView embed shortcode inside a Shortcode block.

If you would like to display the total amount raised, you can do this by adding the [gv_math] shortcode to another Shortcode block (as described above).

That’s it! 🙌

Start Displaying Gravity Forms Donations on Your Website Today

If you run a charity, NGO, or nonprofit organization, you probably need a way to accept donations through your website. While there are several WordPress donation plugins out there, many of them are confusing and lack certain key features.

Gravity Forms integrates with a range of payment processors, allowing you to accept donations through your website. Using GravityView you can then display those donations on the front end. You can also calculate and display donation totals using the Math by GravityView plugin.

If you found this post helpful, subscribe to our email list below so we can notify you when we publish new content!