Building a WordPress Donation Form (Part 1)

The team at INN Labs has researched and experimented with various tools for building donations forms on WordPress sites and we've defined a standard set of forms, payment processors, and integrations that you can use.

The following series of articles will show you how to create a donation form on your WordPress site using Gravity Forms which integrates with either Stripe or PayPal, and MailChimp.

Here's what you’ll learn about in this 4-part series:

Part 1 (this article!):
What you should know
Getting started: Installation
Plugin configuration
Part 2:
Creating your donation form with Gravity Forms
Connecting to Stripe or PayPal
Testing transactions
Part 3:
Integrating with MailChimp
Part 4:
Styling your forms

What you should know

Payment processors

We typically use Stripe to process payments because the fees are lower and it offers more flexibility (with PayPal as our second choice), and Gravity Forms has  add-ons for several other payment gateways if you'd prefer to use one of those.

Stripe charges 2.9% of the transaction total, plus a $0.30 flat fee per transaction (with no monthly or annual fee). We use the  subtotal merge tag plugin to create a checkbox that gives users the option of paying the fees so that their entire donation amount goes to the organization they're choosing to support.

MailChimp Integration

In addition to collecting money, donation forms are an excellent place to ask donors if they want to become newsletter subscribers. We add a checkbox to our default donation form and conditional logic and the Gravity Forms MailChimp Add-On to automatically add donors to an organization's mailing list.

Automation

Gravity Forms also allows you to automate the sending of receipts and donation acknowledgments and also to send notifications via email or  Slack when a new donation is received (more below).

Form Styles

For our sites, we've created  some boilerplate code containing default styles and a clean WordPress template for use on these donation pages. We've also included importable form templates if you'd like to use our form designs (see below).

Let’s get started: Installation

Our process starts with a WordPress site and  Gravity Forms, and then adds the following plugins:

A Payment Processing Add-On (either Stripe or PayPal):

1. Before installing, start by getting the following:

A developer license costs $199/year and will allow you to use the plugin and any add-ons on as many sites as you would like. INN has a developer key for all member sites we host. If you’re an INN member and want to use our group license, simply contact our support team.

For sites we host, SSL certificates are available for free through our hosting company (via  Let's Encrypt). If you'd like us to request a certificate on your behalf, open a support ticket and we’ll be happy to take care of this for you.

For sites hosted elsewhere, you'll need to check with your hosting provider to see what options are available for SSL.

2. Now you’re ready to install these plugins:

(Sites hosted with INN should contact us to have us install these plugins for you.)

NOTE: All of the plugins must be installed manually because they're not available in the official plugin repository and require the aforementioned Gravity Forms developer license.

  1. If you have FTP/SFTP access to your site, you can upload them to the plugins directory of your site using an SFTP client or similar program. WordPress.org has instructions on how to do this.
  2. You can also install them from the WordPress dashboard by going to Plugins > Add New. Click on the Upload Plugin and upload the .zip file of the plugin(s).

Once you've installed the plugins, you'll also need to activate them. To do this, go to the Plugins screen and find the newly uploaded plugin in the list. Then, click Activate.

Plugin Configuration

Each plugin (including the add-ons) has a configuration section in the WordPress dashboard, at Forms > Settings. Here’s what you’ll want to configure:

1. Gravity Forms (main plugin)

You'll need to enter your Gravity Forms license key in the Gravity Forms plugin settings. This will be the license you’ve purchased or the group license INN has for our members.

2. Gravity Forms Stripe (or PayPal) Add-On

The add-ons have four keys to enter:

  • Test Secret Key
  • Test Publishable Key
  • Live Secret Key
  • Live Publishable Key

You can create/access these from the API Keys tab of the Account Settings page in Stripe or PayPal.

There's also a set of radio buttons for switching your site from using the Test API to the Live API.

NOTE: You'll need to switch from Test to Live both on the settings page in WordPress and in the Stripe or PayPal dashboard itself. If you're using the payment processor for the first time, you'll also need to provide your bank information before Stripe will allow you to switch to Live mode.

Typically, when you're setting up a new form, you'll use the Test API to run some test transactions  using their testing credit cards to make sure everything works before switching your form/site to Live mode.

Follow the instructions on the Stripe add-on settings page to add your site's Gravity Forms callback hook to your Stripe account. If you are testing the form on a staging site, note that the callback URL should be your live site or else the callbacks will not work properly (this is something to also double check on your site before making the new form live).

3. Gravity Forms MailChimp Add-On

If you're going to use your donation form to collect email addresses for your MailChimp newsletter, you need to add your MailChimp API key.

You can get a MailChimp API key by logging in to MailChimp and going to Account > Extras > API Keys. There, click on Create A Key and give it a name (such as "Gravity Forms") and then copy the newly created key and add it to the Gravity Forms MailChimp Add-On settings in the field provided.

Still need help? Contact Us Contact Us