Almost every website needs a contact form. This is a dynamic element that helps visitors interact with you. However, contact is not the only job of a website form. You can also create a donation form if you work as or for a charity, develop software, or need financial support for your project.
While you’ll piece together the form in the same way as any other, some elements will be different. So you need to introduce a flexible and great plugin for this job. Gravity Forms is one of the best examples, and it has received praise from users and developers alike.
In this post, we will show you how to build a donation form using the Gravity Forms plugin. We’ll discuss why it’s the focus of this article later. First, let’s talk about the general concepts and thought process behind adding a donation form to your website.
How to accept donations on your website
A website isn’t always a static business card, that’s a given. It can be the dynamic and flexible center of your project. Also, if you rely on user support, you will want to make engagement the core of your strategy. There are many industries and market segments that require user contributions:
- Indie, hobbyist or open source developer.
- Churches and other sacred and spiritual institutions.
- Creative people working as a hobby or part-time.
The key here is that the method of giving needs to be super easy to use, otherwise it will negatively impact the donations you will receive. We think the best way is to use a dedicated donation form in WordPress. There are several reasons for this:
- First, forms will be your typical way of getting user input. Accepting donations is a specific form of input.
- Next, a good form plugin will integrate with many different payment gateways. This makes the whole implementation easier.
- WordPress will provide embedded and inline design options for the form you choose and its location.
That last point raises a good question: where should you put your donation form for maximum impact? This issue will be discussed in more detail in the next second.
Why Gravity Forms is the best tool to make Donation Form
In fact, there is an opinion that this plugin is the first choice of all WordPress form plugins. Indeed, Gravity Forms are great for donations because:
- It provides a beautiful and powerful drag and drop builder to help you create the perfect design.
- You can add numerous fields to your form to cover all possible situations and scenarios.
- Gravity Forms provides built-in conditional logic capabilities that are ideal for helping end users do the right thing.
- There are many payment gateways to choose from. This is critical if you want to tailor the donation experience to your users and needs.
There is no free version of Gravity Forms, and the basic plan does not include the add-ons required to implement payments. However, Elite and Pro licenses will cost you $159-259 per year.
If your budget won’t be that high, you’ll want to check out our list of contact form plugins. Some of these will give you the right mix of features and may be more cost-effective to start.
4 Steps to Create a Donation Form in WordPress
Build your Gravity Forms
Once Gravity Forms is installed and activated, you can go to the Forms > New Form screen. This will display a popup dialog for creating a new form. Here, enter the required title and optional description, then click Create Form:
Note that while the description is optional, it’s a great way to help showcase your cause and why you donate. It’s always a good idea to provide a convincing argument for this kind of support, and Gravity Forms lets you do that almost as soon as you get the chance.
At this point, you’ll be taken to the form builder screen. From here, you can start piecing together your donation form.
Build the structure of the form
Before you start using the donation feature, you will need to spend some time building the general layout of the form and adding some necessary fields. For starters, you will need to ask for the name and email address. You can do this from the right sidebar. The Advanced Fields section provides task-specific fields:
To add them to your form, drag the options you want onto the form “canvas”:
It’s a good idea to set these fields to Required and add an email confirmation field. Only add the fields required to process donations. We recommend asking for name, email address and donation amount. For the latter, you can look at a number of different approaches.
Add donation function
How you let users choose the donation amount will be subjective. However, Gravity Forms provides many ways to do this. You’ll start with the Pricing Fields > Product option:
Select the field type from here. In this case it’s radio buttons – but there are others:
The Label field is what you’ll see on the front end, and the Price should be the amount the user will donate:
It’s also a good idea to let users specify a quantity if they are not satisfied with the quantity available. To do this, you can add another radio button using the Plus icon, with the label “Other” (or whatever wording suits you):
Of course, this won’t let the user enter custom graphics (yet). To do this, you need to add another product field to the form. This time, select User Defined Price from the drop-down options and name it the same as your custom radio button:
To provide functionality for this field, you need to enable conditional logic. This will help you provide unique options on your form, which we’ll discuss next.
Create custom fields with conditional logic
No matter which layer you choose, every instance of Gravity Forms comes with conditional logic. Although you may need to enable the feature first, this is popular and suits your needs well. It’s simple: click on the User Defined Price field, then toggle the switch under the Conditional Logic section:
You’ll see Gravity Forms has rich options, which will let you choose from multiple drop-down lists to build your logic. You don’t need anything too complicated here, although if you choose a unique naming convention for your fields, the results can look messy.
In short, when the radio buttons under the Donation Amount section are related to user-defined pricing options, you need to ensure that the conditional logic makes the custom pricing field visible:
The form is almost done, but it needs a way for the user to pay, so this will be the penultimate step.
Integrate your donation form with a suitable payment gateway
We need two elements: the way the user sees the total amount and the payment method. The first one is simple; select the Pricing Fields > Total option:
For payment methods, it’s also simple. However, if you don’t have any activated gateways yet, go to the Forms > Add-Ons screen and install the gateway that suits your needs:
Depending on your activated gateway, you will be able to choose from various options in the Pricing Fields section:
From here, you need to connect the card field to the gateway. You can do this by selecting it from the “Settings” drop-down menu at the top of the form builder screen:
How feeds are connected depends on the relevant gateway. The Gravity Forms website has full documentation on how to do this for the provider of your choice.
Embed your Gravity Forms in your articles or pages
The embedding process is as simple as any other WordPress element. While we are using the block editor, you can use Elementor, Beaver Builder or other page builders. However, the process will be similar: select the Gravity Forms option, and place it on the page. From there, select the correct table from the drop-down menu:
Save your changes and view the form on the front end:
There are many projects, hobbies, and industries that rely on user donations to pay their bills. In fact, in the case of charities, the giving strategy will help determine whether it operates or not. Using a WordPress plugin like Gravity Forms can help you build great looking donation forms for your website and get users to give generously to your projects.
This post explains how to use Gravity Forms to create a donation form on your website. The good news is that the process is as easy as using any other form plugin. The core idea is to drag the fields into place, adjust them according to your requirements, and publish the results. You’ll also need to link a suitable payment gateway to make sure users can donate to you, but it’s not much harder than the other steps.