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
| Part 2:
Creating your donation form with Gravity Forms
Connecting to Stripe or PayPal
| Part 3:
Integrating with MailChimp
| Part 4:
Styling your forms
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.
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.
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).
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).
Our process starts with a WordPress site and Gravity Forms, and then adds the following plugins:
- Gravity Forms Add Subtotal Merge Tag (This is an INN fork of Subtotal Merge Tag and must be installed manually)
- Gravity Forms MailChimp Add-On (requires Gravity Forms Business license or better, and a MailChimp API key)
A Payment Processing Add-On (either Stripe or PayPal):
- Gravity Forms Stripe Add-On (requires Gravity Forms developer license or better, and a Stripe API key)
- Either the Gravity Forms PayPal Standard Add-On or the Gravity Forms PayPal Payments Pro Add-On (they both require Gravity Forms developer license and a PayPal API key)
1. Before installing, start by getting the following:
- Gravity Forms developer license.
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.
- Stripe API key for handling purchases. (Stripe charges a transaction fee for most accounts; following this instruction set will help you cover that transaction fee.)
- MailChimp API key for sending a newsletter to your subscribers. (MailChimp's pricing varies based on mail volume.)
- (optional) A reCaptcha site key to help prevent spam submissions.
- SSL certificate (if you want to accept payments directly on your site).
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.)
- Gravity Forms
- Gravity Forms Add Subtotal Merge Tag
- A payment processing add-on (either Stripe or PayPal):
- Gravity Forms MailChimp Add-On
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.
- 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.
- 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.
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.