Doing this lets Paypal and Gravity Forms talk to each other. Your screen in Paypal should look something like this:<\/p>\n
![\"paypal-ipn\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/paypal-ipn.png\")
<\/div>\n
When you’ve done all that, check the button to confirm that you’ve linked Paypal and Gravity Forms.<\/p>\n
Now\u00a0you can create your page and your form.<\/p>\n
Create the Donation Form<\/h3>\n
Now for the fun\u00a0bit. You’ll need to create your form first and then add it to your donation page.<\/p>\n
Creating the Form<\/h4>\n
In the admin screens, go to Forms\u00a0> New Form.<\/strong><\/p>\nIn the popup box that appears, ad the title and (optionally) the description for your form:<\/p>\n
![\"Adding](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/add-contact-form1.png\")
<\/div>\n
You’ll now be taken to the screen for adding form fields.<\/p>\n
Go ahead and add any fields\u00a0you need to capture data. Remember that the more you include, the less people will complete the form. So only add this fields you really need and make as few of them as possible mandatory.<\/p>\n
I’m adding the following fields:<\/p>\n
\n- Name<\/li>\n
- Email address<\/li>\n
- Message of support<\/li>\n<\/ul>\n
Only the email address is required, so the system can send confirmation of receipt. You’ll find the fields for the name and email address in the Advanced Fields<\/strong> box and the text field in the Standard Fields<\/strong> box.<\/p>\nTo edit a form field (include changing its label and making it required), click on its name on the left hand side of the screen and use the editing metabox\u00a0that appears.<\/p>\n
Finally click Update\u00a0Form<\/strong> to save it.<\/p>\nHere’s my form:<\/p>\n
![\"add-contact-form2\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/add-contact-form2.png\")
<\/div>\n
Add Payment to Your Form<\/h4>\n
Now let’s add some payment details to the form. I’m going to add a few options for the amount people might like to donate – it often encourages people to donate more than they might have otherwise. I’ll also add a field where people can add their own\u00a0amount if they want.<\/p>\n
From\u00a0the\u00a0Pricing Fields<\/strong> box on the right hand side, add the Product<\/strong>\u00a0field type to your form.<\/p>\nNow you need to edit the product itself. First give it a new name (mine is Donation<\/strong>). Then in the Field Type<\/strong> dropdown list, select Radio Buttons<\/strong>.<\/p>\nThis lets you define the values for your radio buttons, i.e. the suggested amounts. Add\u00a0some amounts – don’t add too many or you might put people off. Your final option should be a zero amount with a label of Other<\/strong> (or something similar). If a user selects this they’ll be promoted to enter their own amount.<\/p>\nCheck the Required<\/strong> box for this field. Here’s my settings:<\/p>\n ![\"Settings](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/amount-field.png\")
<\/div>\n
Now you need to add another field, which will be displayed if someone selects that ‘other’ option. Again from the Pricing Fields<\/strong> box, select Product<\/strong>.<\/p>\nEdit the new product, including a title and description that will help people understand what this form is for. In the Field Type<\/strong> dropdown, select User Defined Price<\/strong>.<\/p>\nHere’s my field so far:<\/p>\n
![\"User](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/user-defined-price.png\")
<\/div>\n
Now click on the Advanced<\/strong> tab for that field. Check the Enable Conditional\u00a0Logic<\/strong> checkbox. Edit the conditional logic statement\u00a0to show this field if the previous field (Donation<\/strong>) is Other amount<\/strong>. This means that this field will only appear if someone hasn’t selected one of the predefined amounts in the previous field.<\/p>\nHere’s my selection:<\/p>\n
![\"Adding](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/conditional-logic.png\")
<\/div>\n
Now click the Update Form<\/strong> button to update your form.<\/p>\nCreate a Donation Page<\/h3>\n
Next, create a new page and call it Donation<\/strong>. Do this by going to Pages > Add New<\/strong> in the admin menu. Leave this page blank for now, but add it\u00a0to your site’s main navigation menu by going to Appearance > Menus<\/strong> or using the Customizer.<\/p>\nAdd the Form to Your Donation Page<\/h4>\n
Now it’s time to add the form to the donation page you created.<\/p>\n
Go to the editing screen for that page by clicking Pages<\/strong> and then selecting it. In the page editing screen, click the Add Form<\/strong> button.<\/p>\nSelect the form you’ve created\u00a0and check the title and\/or description checkboxes if you want to display those:<\/p>\n
![\"Select](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/insert-form.png\")
<\/div>\n
Then click the Insert Form<\/strong> button. This will add a shortcode to your page. Don’t edit that.<\/p>\nFinally\u00a0click Update<\/strong> to update your page. Here’s my page:<\/p>\n ![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/donate-form-on-page.png\")
<\/div>\n
And if I select the Other amount<\/strong> option in the radio buttons, it gives me the option to add my own amount:<\/p>\n ![\"A](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/donation-amount.png\")
<\/div>\n
Improving the Page and Form<\/h3>\n
Let’s finish off by making some final tweaks to the form and the page.<\/p>\n
Improving the Page to Encourage Donations<\/h4>\n
Start by editing the page. Add anything you can that will encourage people to donate – text, images or video. Make sure it doesn’t push the donation form out of the way, though.<\/p>\n
Editing Confirmations<\/h4>\n
Now let’s edit the message\u00a0someone sees\u00a0after completing the form. Go back to the form editing screen and click the Settings<\/strong> option at the top. This will open the Form Settings\u00a0<\/strong>tab. Scroll down and edit the button text for the submit button – I’m changing mine to Donate<\/strong>.<\/p>\nClick Update Form Settings<\/strong> to save your changes, then click the the Conformations tab\u00a0on the left.\u00a0Select Default\u00a0<\/strong>Confirmation<\/b>.<\/p>\nEdit the message people will see after submitting the form. Instead of thanking them for contacting you, it’s better to thank them for their donation:<\/p>\n
![\"Editing](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/confirmation-message.png\")
<\/div>\n
Click Save Confirmation<\/strong> to save your changes.<\/p>\nAdding an Email Notification<\/h4>\n
Finally, let’s add an email to be\u00a0sent when someone makes a donation. Click the Notifications<\/strong> tab and click the Add New<\/strong> button.<\/p>\nYou might want to\u00a0add a message of thanks and some links to information about the charity’s work, plus links to your social media accounts.<\/p>\n
Fill out the options as follows:<\/p>\n
\n- Add a name to the Name<\/strong> field that makes sense.<\/li>\n
- In the Send To<\/strong> field, select the Select a Field<\/strong> radio button, then select the Email<\/strong> field. This will make sure the notification goes to the email address the donor has provided.<\/li>\n
- In the From Name<\/strong> field, type the name of your organization.<\/li>\n
- In the From Email<\/strong>\u00a0field, keep it as the default admin email or add a do not reply email address.<\/li>\n
- Add some text to the Subject<\/strong> field.<\/li>\n
- Add some thank you text, images and links to the Message<\/strong>\u00a0field. You can add anything here you’d add to a WordPress post.<\/li>\n<\/ol>\n
Finally click the Save Notification<\/strong> button to save your changes.<\/p>\nA Well Designed Donation Page will Get you More Donations<\/h3>\n
Adding a donation page to your website will give people an easy way to donate money when they’re visiting your site. Make sure you add plenty of links to it from elsewhere in your site, and maybe a nice big button on your home screen.<\/p>\n
By designing your donation page to encourage people to donate set amounts, you’ll find that you receive more. And by adding extra text and media and sending people a thank you email, you’ll encourage sharing and repeat\u00a0donations.<\/p>\n
I hope your donation page makes you lots of money!<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress is the ideal platform for charities and non-profit organizations. It’s free and open-source and you have access to a huge community of users and developers who can help you build and manage your site. But one of the most important functions of a website for many nonprofits is to encourage people to donate money. […]<\/p>\n","protected":false},"author":347011,"featured_media":159632,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10507,10670,10390],"tutorials_categories":[],"class_list":["post-159608","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-forms","tag-fundraising","tag-non-profit"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=159608"}],"version-history":[{"count":24,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159608\/revisions"}],"predecessor-version":[{"id":219076,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/159608\/revisions\/219076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/159632"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=159608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=159608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=159608"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=159608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Site](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/starting-site-1.png\")
<\/div>\n![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Forminator-dashboard.png\")
![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Forminator-templates.png\")
<\/div>\n<\/div>\n![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Forminator-insert-fields.png\")
![\"Forminator](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Forminator-fields.png\")
![\"Preview](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Preview-Forminator.png\")
![\"Preview](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Preview-of-form.png\")
![\"Editing](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/editing-form.png\")
![\"Edit](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/edit-paypal.png\")
<\/div>\n<\/div>\n![\"Add](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Add-paypal.png\")
![\"Connect](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/connect-to-paypal.png\")
<\/div>\n<\/div>\n<\/div>\n![\"Create](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/create-new-app-paypal.png\")
<\/div>\n<\/div>\n![\"Sandbox](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/Sandbox-Credentials-1.png\")
![\"A](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/contact-menu.png\")
<\/div>\n![\"Instructions](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/paypal-form.png\")
<\/div>\n