This tutorial helps to create the free WordPress donation form with the JetFormBuilder plugin. This guide is part of my WordPress form how-tos, so don’t hesitate to have a look at previous posts: guest post submission form and:
Step 1. Register PayPal account
I don’t have a PayPal account, so I need to set this up first. I’ll need a personal account, so let’s choose the following option:
Then, select the country, pass the phone number and general details:
Then you need to add address details and link the debit/credit card.
Finally, my account is ready:
Step 2. Set Up PayPal Gateway Settings
First, I’ve searched for JetFormBuilder free plugin in my WordPress plugins dashboard.
After installation and activation, go to JetFormBuilder settings:
To get Secret Key navigate to developer.paypal.com > My Apps & Credentials > Create New App. The app is something like a connection between your form and PayPal account.
After creating, you’ll see Client ID and Secret code, copy these and pass them to your WordPress form PayPal gateway settings.
Step 3. Create Free WordPress Donation Form
The third step is building your WordPress form. Navigate to JetFormBuilder > Add New.
Name your form and add the needed fields. Here are what I need:
- First and Last name (set as Text field; not required)
- Donation amount (as number field; mark as required)
- Message (Text field; not required)
I’ve also changed the Submit button to Donate.
Additionally, you need to choose Post submit action > Save Form Record. This helps to save all submissions in one clean dashboard and is required for creating WordPress forms with a payment gateway.
Press the edit icon and toggle store information from the submitted form.
Then, go to form settings and find Gateways Settings to pick PayPal Checkout:
Then press the edit button to set up everything. Firstly, we need to toggle Use Global Settings (to pull up the Client ID and Secret Key automatically).
Then choose Gateway Action as Pay Now and press the Sync Access Token button.
After this, write the Currency Code (in my case, usd), and choose the form field responsible for Price/amount (Donation amount field). Finally, configure payment messages (success and error) and press the Update button.
Step 4. Add the Donation Form to the WordPress Page
I’ve created the new page and named it Donate; then type “jet,” and you’ll see the JetForm block.
After adding the JetForm block to the page, choose the form (Donation form) and style the form if needed (with default Gutenberg settings or via the free JetStyleManager plugin).
Here is how my free WordPress donation form looks like:
Step 5. Test the form
As a result, we can test our donation form. So, I’ve filled up the form:
And was automatically redirected to the checkout page:
After donation/submission, you’ll see all replies on the beautiful form records page, where you can delete or mark each submission as viewed.
Meanwhile, the JetFormBuilder plugin stores the payments too on the Payments page:
Bonuses: Additional WP Donation Form Cases
Besides the simple WordPress donation form, I want to share several additional cases you can try.
#1 Case: Radio Field with Different Amounts
If you are not a fan of the number field, you can set the radio field to let the user choose the donation amount. For this, add the radio form field:
And press Manage items to add amounts manually:
In a result, the form looks like this:
#2 Case: Add the Donation Form to Popup
I’ll use the free Elementor page builder and JetPopup plugin. Install and activate plugins first.
Then, navigate to JetPopup > All Popups > Create New Popup and choose the layout you prefer:
I like the bordering one. After choosing the layout, you’ll be redirected to the Elementor page builder:
Now, I want to add Donate heading and press plus icon to add the JetForm widget:
Drag-n-drop the widget where you want to add the form and choose the appropriate donate form from the drop-down list:
You can style the form with Elementor and set up when the popup should open (in my case, the open event is when the page loads):
Then press the Publish button, add the form to the page, and check how it looks. So, when the user opens my home page, the donate popup will appear.
Case #3: Click the Donate Button to Open Donation Form
To continue with popups, we can open the donation form after clicking the Donate button.
For this, I’ll create a new popup with a classic layout but the same logic:
Similarly, create the popup with the form:
Then, drag and drop the Popup Action Button widget to any Elementor page (or use Elementor’s button widget):
Edit button text:
Then, navigate to Advanced settings > JetPopup > Attached Popup and choose the previously created Donation popup. Also, select the trigger type by your preference (I want to open the form after hovering the Donate button).
Finally, press the Update/Publish page. I’ve added the button to my home page, and each user can see the clean donate button:
Hence, when the user hovers the button, my beautiful donation popup form appears:
Sum Up
I’m happy with my simple donation WordPress form, which can be added to the page or popup. Don’t hesitate to share your suggestion for the next form creation guide. 😉
