Building a WordPress Donation Form (Part 2)

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.

This article is part of a series which shows 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:
What you should know 
Getting started: Installation 
Plugin configuration
Part 2 (this article!):
Create your donation form with Gravity Forms
Connect to Stripe or PayPal
Test transactions
Part 3:
Integrating with MailChimp
Part 4:
Styling your forms

Create Your Donation Form with Gravity Forms

We've created a couple of sample forms based on the forms we've developed for a few of our members/clients. We recommend importing one of these forms first so that you can examine how things are put together before attempting to create a form of your own. You might even find that one of the example forms will work well for you with very little modification!

1.a. Create a form by importing

Gravity Forms allows you to  import forms from JSON files, so we've provided two example donation forms that you can download and import to get started:

  1. To import a form, save the importable .json file from either of the above links, then upload it following Gravity Forms' import instructions.
  2. Once you've imported a form, find the form in the list of forms and click "Edit." From here you'll see the various form fields and how they're configured.
  3. Note that each of these examples uses conditional logic to show/hide certain form fields depending on the options a donor selects in the form. For more on how conditional logic works in Gravity Forms, see the relevant section of their documentation.
  4. If you like how one of the example forms works, you can move on to setting up notifications, confirmations and the MailChimp and Stripe feeds to ensure they are set up correctly with your site's information. Refer to the Gravity Forms documentation if you have specific questions.

1.b. Create a form from scratch

After you've imported one of the forms above and examined it to see how it's put together, you may want to try your hand at creating a form from scratch that's customized to the individual needs of your site.

Check out this post to read our best practices for setting up a custom donation form.

2. Set up notifications

To receive notifications from your website when someone submits a response to the form, find your form in the list of forms, hover over it, and then click "Settings" when that text appears.

Under the "Settings" tab are at least three tabs including: "Form Settings," "Confirmations," and "Notifications".

Under Confirmations, you can set what happens when a donor submits the donation form. Gravity Forms gives you a couple options, but we prefer sending people to a “thank you” page after the form is successfully submitted. If you don't want to create a “thank you” page, you can choose to display confirmation text.

If you want to send users to a “thank you” page, here’s what you’ll want to do:

  1. First you’ll want to first create a WordPress page, which will be the “thank you” page. Here's an example on INN's website.
  2. Once the page is created, go back to the settings for the form you're working on and click on Confirmations.
  3. Now, select the "Page", choose your page from the drop-down list of pages, and save the confirmation:
  4. Under the Notifications tab, you can set which email notifications are sent when a form is submitted. Typically, you'll want to send an email to one or more members of your staff to let you know a new donation has been received and also send an email to the donor with the details of their donation.

In the INN example form, two notification emails are sent on submission:

  1. The first one is sent to the site administrator, with a subject of {form_title} and message body of {all_fields}. These form fields surrounded by curly brackets are Gravity Forms' merge tags, and allow you to put information from the form into the email.
    1. NOTE: You can send notifications to multiple email addresses by adding each address separated by commas in the "send to email" field.
  2. The second confirmation is sent to the email address provided by the donor in the form, thanking them for their donation and again using the {all_fields} merge tag so that the donor has a receipt for their donation.
    1. NOTE: You can use conditional logic here if you'd like to send different confirmation messages to different segments of donors based on the information they submitted. So, for example, you could send a different confirmation message to one-time vs. recurring donors, or an automated response to low-dollar donors but send yourself a notification for large-dollar donors so you can send them a personalized note.

Connect to Stripe or PayPal

The Stripe connection for each form is configured in the form's settings area, in a "Stripe" tab that appears underneath the "Notifications" tab. The Stripe settings area allows you to create different "Feeds" for this form.

A "Feed" is a type of transaction and a single form can have multiple types of transactions. In the INN example, there are three feeds:

  1. a monthly recurring donation (subscription)
  2. a yearly recurring donation (subscription)
  3. a one-time transaction (products and services)

When creating a donation form with multiple donation types, add a " Radio Buttons" element to let the donor choose between "Per Month," "Per Year," and "One Time".

NOTE: You don't have to have multiple feeds. Sometimes all you want to do is create a one-time donation form. If that's the case, you can skip ahead to the "One Time Donation" example below, and ignore the "Conditional Logic" box.

Then, in the Settings area for this form, create three Stripe feeds, matching the donation types.

If you have multiple feeds set up (because you have multiple types of donations) make sure to check the "Conditional Logic" box and set it to only process that feed if the value of the "Donation Type" form element you chose is set to the radio button label that corresponds with this donation feed.

The payment amount should be "Form Total" so that you capture the processing fee if that option is enabled.

Want to send more information about the customer?

You may want to send over other information to Stripe so that you have other metadata associated with the "customer" record that will be created when a payment is processed. The "metadata" section here allows you to provide the name(s) of the fields as you want them to appear in Stripe and then map those to the form fields submitted on your site.

Test Transactions

Once you have your form and payment processor set up, run some test transactions:

  1. Make sure that the Gravity Forms Stripe Add-On is in "Test" mode by going to Forms > Settings > Stripe and checking the "Test" option for the API.
  2. Make sure your API keys are entered.
  3. Press the "Update Settings" button to make sure.
  4. Then grab some testing credit card numbers from the Stripe website and test every option on the form, confirming within the Stripe dashboard that the test transactions completed successfully.

Still need help? Contact Us Contact Us