WordPress is a great platform for donation pages. There are several ways to create a WordPress donation page with WS Form. In this article, we’ll look at how to create a donation page using two different methods:
- WS Form + Stripe Add-On
- WS Form + WooCommerce + WooCommerce WS Form Pro add-ons extension
They work independently, so no matter which you have you can create a WordPress donation page with WS Form.
Building a WordPress Donation Page using Stripe
To create a WordPress donation page with WS Form and Stripe, you’ll need WS Form Pro Stripe Elements installed and activated as well as a Stripe account.
Set Up Stripe Elements
To set up Stripe Elements, you’ll need to enter the API keys for both the WS Form add-on and Stripe.
You can create live or test versions of your API keys. To create a test version, enter your test publishable key. For a live site, enter your live publishable key. Select the environment you’re creating and enter the keys. Save your changes. For my examples, I’m creating a test environment.
WS Form Donation Form
You can create your donation form from scratch or use a template. I’m using the Donation template that comes with WS Form Pro. To use it, go to WS Form in the WordPress dashboard. Select Add New and choose the E-Commerce tab. Click on the Donation form to use the template.
The template includes a standard Submit button. We’ll integrate Stripe into this template, so we won’t need this button.
Hover over the Submit button and click the Field Settings icon.
Click the X icon to delete the field.
If the sidebar Toolbox isn’t open, click the Toolbox icon at the top of the screen. In the Fields tab, scroll down to the E-Commerce section. Drag the Stripe Card and Stripe Submit fields to the form. I’m placing them at the bottom of the form since that’s the last thing the person will need to do on the form. The two fields automatically work together, so you won’t need to adjust their settings.
Make any other changes you want to the other fields. I’m changing the label of the Comments field to show the word Tribute.
Save and publish your form. You can now add it to your pages, but there are a few customizations you can make.
Customizing Stripe Fields
Make sure the Transaction Type is set to One Time. This is the default setting. The Subscription option allows your visitors to make a monthly donation, but it’s not possible for them to set a donation amount. One Time gives them the donation amount option.
Stripe Field Mapping
Filed mapping is only required if you’re using the One Time transaction type. First, you’ll need to create the customer. In the Stripe Card field settings, scroll down to Transaction and select One Time for the transaction type. Check the box labeled Create Customer. This opens new settings.
For the Name field, select the hamburger icon and select the name field or fields you want to use. I recommend selecting the First Name and Last Name fields. Click the hamburger icon again to close it.
Click on the email dropdown box and select the email field. These are the fields we recommend mapping for donations. Continue through this process if you want to map the other fields.
Donation Page with Stripe Results
Here’s how the form looks on the website. Users can now enter an amount to donate, select to pay with a credit or debit card, and then submit the payment through Stripe. This example uses the Twenty Twenty-One WordPress theme.
Create a Donation Page in WooCommerce
To create a donation page with WooCommerce, you’ll need the WooCommerce WS Form PRO Product Add-On installed.
First, we’ll need to edit or add a WooCommerce product. Go to Products > Add New in the WordPress dashboard. Give the product a name and a regular price of 0 or greater. Select the WS Form tab from the options on the left.
Next, select the Donate template from the list of options.
You can edit the form if you want, add a featured image and description to the product, etc. Publish the product when you’re ready.
WooCommerce Product with Donation Form Results
Here’s a look at the WooCommerce product with the donation form on the front end of my test site using the Twenty Twenty-One WordPress theme. It’s a simple form and it works well. It still works like a WooCommerce product, but now visitors can enter any amount they want. Of course, you can add any other fields or labels you want, such as a View Cart button, and arrange them to suit your needs.
Ending Thoughts
That’s our look at how to build a WordPress donation page with WS Form. The Stripe and WooCommerce add-ons give you several options for creating your donation forms. Both are easy to use and the set-up is minimal. No matter which method you want to use, building a WordPress donation page is simple and easy with WS Form.
We want to hear from you. Have you built a WordPress donation page with WS Form? Let us know about your experience in the comments.
