WordPress Tutorials, Tips, and Resources to Help Grow Your Business
Want to ask your visitors to donate through a popup? Using a popup is the best way to grab the attention of your visitors and persuade them to make a donation. In this article, we’ll show you how to create a donation form popup using WPForms and OptinMonster.
Install WPForms and OptinMonster
Before we get started, you’ll need to install and activate two plugins: WPForms and OptinMonster.
Why OptinMonster? There are lots of popup plugins and donation form plugins for WordPress, but we recommend OptinMonster to get the most donations. That’s because it includes professionally designed templates that are attention grabbing and get results, plus advanced targeting so you can show your donation popup to the visitor most likely to give.
In this tutorial, we’ll show you how to create a donation popup that display after the visitor has been on the site after 5 seconds or after they scroll 50% down the page.
With OptinMonster, you can also use the advanced targeting to display custom messages depending on each individual visitor’s interests, making them much more likely to donate.
After installing and activating WPForms plugin, you need to subscribe to OptinMonster’s Pro license. Upon subscription, install and activate the free WordPress plugin and then connect it with your OptinMonster account. For more details, you can learn how to install the OptinMonster WordPress plugin.
Create a Donation Form With WPForms
To keep an optimal height for your popup form, let’s remove the Comment or Message field from the form. Then, click Save.
Create a Popup Using OptinMonster
Now, log into your OptinMonster account and click Create Campaign.
You’ll now be asked to select your campaign type. In this example, let’s choose Slide-in as your campaign type.
Using Slide-in popup is a non-intrusive way to ask your visitors to donate to your non-profit. It appears at the bottom right corner of the web page as the visitors scroll down. With OptinMonster, you can also control when exactly visitors see them.
If you want to know more about using canvas popup, read 9 unique canvas popups you can create with OptinMonster.
Then, name your popup as Donation Form.
Now you’ll be directed to the optin form builder. Make sure to choose the right website for your optin campaign.
In the left taskbar, click on Optin where you can change the height and width of your canvas according to your liking. In this example, let’s use 700 as Canvas Max Height and change Canvas Max Width to 300.
In the Canvas Custom HTML box, you can enter your donation form shortcode along with any other custom HTML you may want to add.
Here is a sample HTML we used to create the modal popup for this tutorial. Make sure to replace the shortcode with your own form’s embed code.
<h3> Donate Now</h3> <p class="tagline"> Help build this foundation by donating now. </p> [wpforms id="497" title="false" description="false"]
To obtain the embed code for the donation form you just created, go back to your WPForms builder, click on the Embed button at the top right corner. You’ll now see your embed code. Just copy it and replace the embed code placed in the above HTML.
Control When the Popup Should Appear
OptinMonster is so flexible that you can control exactly when visitors see your donation popup so that it doesn’t annoy them.
The time-triggered popup campaigns allow you to focus your visitors’ attention at the perfect moment: after they have time to browse your site, but before they lose interest and leave.
In the left taskbar, click on Display Rules. Then, click After X-seconds. Then, change the configuration based on your preference. Then, turn the Status to Active.
You can also ensure that popup appears only when the visitor has scrolled a certain amount. To do this, click After scrolling down ‘X’ amount, change the configuration, and then turn the status to Active.
Don’t forget to change the Publish status to Live and save your form.
Publish the Popup on Your Site
Now return to your WordPress dashboard and click the OptinMonster menu. You’ll see a list of campaigns you created on your OptinMonster account. If you can’t see any, make sure to click Refresh Campaigns. Once the popup list appears, you can click Go Live under Donation form.
You can now see the donation popup live on your site.
More Types of Donation Popup
OptinMonster comes with lots of different optin features to display your popup the way you want, including exit intent. Below are some popups that are worth trying.
MonsterLinks: Trigger the donation popup only when your visitor clicks on a link or an image. This way, you can eliminate the natural dropoff that happens when visitors have to visit another page to donate.
Shareable MonsterLinks: A Shareable MonsterLink is a unique link you can use to share any OptinMonster campaign through your newsletter, social media profiles, etc. When a visitor clicks the link, they’ll be taken to the standalone page where they’ll see your OptinMonster campaign.
We hope this guide helped you create a donation popup form on your site.
What are you waiting for? Get started with the most powerful WordPress forms plugin today.