WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a Donation Form Popup in WordPress

by Shahzad Saeed on Nov 22, 2017

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

Next, let’s create a donation form with WPForms. Make sure to connect your form to one of the payment addons like PayPal or Stripe. For more details on this step, read how to create a donation form.

To keep an optimal height for your popup form, let’s remove the Comment or Message field from the form. Then, click Save.

donation popup form

Create a Popup Using OptinMonster

Now, log into your OptinMonster account and click Create Campaign.

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.

choose slidein type for donation popup

Next, you’ll be asked to choose a campaign template. As we want to integrate WPForms with OptinMonster, let’s choose Canvas. The canvas template allows you to add WordPress shortcodes, HTML, CSS or JavaScript to your optin so you can integrate any type of forms with your popup.

use canvas template

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.

rename donation form popup

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.

edit optin for donation popup

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.

embed donation form

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.

change time settings for donation popup form

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.

change display rules for donation popup form

Don’t forget to change the Publish status to Live and save your form.

change status of popup

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.

click go live

Congrats!

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.

That’s it!

We hope this guide helped you create a donation popup form on your site.

If you enjoyed this article, you might also want to read how to create a contact form popup and feedback form popup on your site.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.