In a previous blog post I talked about what makes a good donation form for a small charity. Here’s a tutorial on how to build your own. This recipe combines technologies that are commonly used on charity websites – WordPress, Gravity Forms, Paypal and Mailchimp. Because of their popularity and ubiquity, it’s relatively easy to set up complex interactions between them.
First up – let’s see what we’ll be making:
This one is using pretty basic out-of-the-box CSS styling but it can be pretty easily set up to match the rest of your website.
We’re using the standard Paypal add-on to Gravity Forms. You’ll need a Developer License for Gravity Forms (i.e. not the free version) but it’s a very versatile plugin that can turn its hand to all sorts of uses beyond just donations and contact forms.
We’re redirecting people to the Paypal website and it will send them to a custom confirmation page when their transaction is successful. You may prefer the user experience of keeping your donors on your site throughout the entire donation, but then you’d need your own SSL certificate and you’d need to meet a lot more PCI compliance regulations. That’s a headache that most small charities can do without.
This form takes advantage of Gravity Forms’ conditional field functionality – so it will only show the Gift Aid box for example, if you’ve ticked the button that confirms that it’s your money (rather than proceeds from an event for example). This way the form appears much shorter and less onerous for people to fill in.
I won’t go into detail about each field on the form. You need to set up the donation amount as a ‘Product field’ rather than as a plain old Number one. The Gravity Forms Paypal add-on will only use the Products fields as the value of the transaction. Similarly, you can’t offer users the choice of donating in multiple currencies. That’s not an option with this setup.
Once you’ve built your form you’ll need to setup the Paypal integration. Click on ‘Form Settings>Paypal’ and click the link to create a new Paypal feed
From there you’ll probably see a link to authorising the Paypal IPN (the Instant Payment Notification that pings your site back to tell it about the status of the transactions). Follow the instructions there to add the website callback url to the Paypal account. I don’t usually ask clients for their Paypal login credentials, I just send them the link to adding the IPN. Most manage to set it up quite easily.
Next you need to map the Gravity Form fields to the fields that Paypal expects the data to be in. This is fairly intuitive. Here’s mine for example.
In your case you’d select Production rather than Test. Make sure you’ve got something in the cancellation url field – ideally a custom page that tells them their donation wasn’t processed and directing them to you for more help.
You only want to send the notifications if the transactions are successful, so tick that box. If you’re also using the Mailchimp integration then make sure that that is also set to only get a notification upon successful completion of the donation – you don’t want to send people your ‘Thank You’ emails if they didn’t actually donate.
Notifications
These are a really powerful feature in Gravity Forms. You can set up all sorts of customised emails to be sent to people, based upon the content of the forms. Have a play around with them, but I would recommend the following:
- An ‘admin’ notification email that emails a finance person at the charity that a donation has been made. You can easily set up the email so it shows some of the form field values in the email.
- A ‘Thank you’ email back to the donor. They will automatically get a transaction confirmation email from Paypal but this is a chance to say a nice, personalised Thank You.
- If you’re using Mailchimp then you can set up the form so that if the donation was successful, and if they ticked the ‘keep in touch’ tickbox – then they’ll be added into a Mailchimp list of your choice. See more below
Confirmations
I’m just using the Default confirmation here. I am redirecting people to a custom page on my site where they’ll get a nice Thank You message and confirmation that their donation was successful. (Ignore the ‘Redirect Query String’ bit for the time being, that will be explained later!)
In Part 2 of this tutorial we’ll be looking at how to track the donations on your website using Google Analytics – so you can start to glean some vital data about where your donors are coming from and which pages on your site are the most powerful. Plus it will enable you to measure the conversion rate for your donation form. Armed with that info you can try out some content experiments to make it more and more effective.
Mailchimp
You’ll need to make sure you’ve installed the Mailchimp Addon for Gravity Forms, and added your Mailchimp API key to the appropriate settings box. Like with Paypal, it’s a case of matching up your form fields to the ones that Mailchimp expects. Here’s mine for this form:
You can select which list to add people to. I’d recommend having a ‘website donors’ one if you haven’t got something similar already. Select any appropriate Groups, and make sure you set the opt-in condition so that it is only adding people who have ticked the ‘keep in touch’ box on the form. The ‘Send Welcome Email’ option will tell Mailchimp to trigger your automation sequence for that list, if there is one. In my case I have just one email in my automation program – that sends people a link to my Charity Digital Toolkit.
Again, if you don’t have a Mailchimp autoresponse system set up then I strongly recommend it. At the very least, for the website donors list it could send a nicely formatted email thanking them for their donation and letting them know that you’ll be keeping them in touch about the impact their donation is making.
Round up
You can set up some Paypal Sandbox accounts to test all this out, but it’s a bit of a pain. Besides, there’s nothing like testing these things out in your ‘Live’ environment. Get yourself set up and then make some real-life donations of a few quid from various computers just to check everything’s working properly.
Setting up a great, user-friendly donation form is just the start. In the next tutorial we’ll look at how to hook this form into your Google Analytics so you can track the donations in there.
