How to Create a Custom Donation Form Popup on WordPress

Create a custom donation form popup using extensible code snippets for GiveWP.
GiveWP Donation Popup Forn - Featured Image

If the included modal popup settings don’t quite work for your desired use, you can always create a custom donation form popup with a few basic GiveWP code snippets.

There’s not much that’s more effective for online fundraising than a big “DONATE HERE” button that launches a donation form popup. Most fundraising websites put this “call to action” in their main menu to so online donations are easy to find. Others get more creative with exit-intent popups and more sophisticated functions.

GiveWP has several ways to embed a donation form popup. Our free donation plugin has codeless tools for all WordPress users along with extensible options for developers.

Easy Setup for all WordPress Users

You can embed a GiveWP donation form modal popup button throughout your WordPress site with a shortcode, widget, or Gutenberg Block. We also started creating free add-ons to support popular page builders, like Elementor.

More About Codeless Donation Form Popups: Skip to our tutorial on how to add a donation form popup button to your main menu, custom menus, and sidebars, with little or no code.

How to Create and Customize Your Donation Popup Form

You might also need to create a more custom donation form popup that has functions like exit-intent or automatic loading. Following these steps gives you a basic donation form popup configuration as a starting point. You can also explore our code snippet library to see if it brings you more inspiration for ways you might want to alter or extend your donation forms.

STEP 1: Create a Donation Form

The first thing you need to do is make sure you have a form that’s configured to work well within a popup. It might seem intuitive to set your form display style as “reveal” or “modal.” However, neither of those are ideal when you’re creating a custom donation form popup.

Set the display style on the donation form you’re using for popup to “All Fields” or use the “Reveal” method.

STEP 2: Add the Form to Your Page(s)

In order for the form to appear on a page, it needs to exist on the page. You can easily do this within the content editor on single pages and posts. But that isn’t ideal if you want to add it to multiple pages at once.

The simplest way to make sure the donation form popup appears on multiple pages is to go to the “Widgets” area in your WordPress Dashboard. From there you can add the form with the GiveWP Widget to any widget area you have available on your site. It’s best to use a sidebar or footer widget section for this.

bell icon

Like What You're Reading? Subscribe Here!

Newsletter Opt-in

STEP 3: Hide the Donation Form

Of course, you don’t want your form to appear in your choice of widget area or in the middle of your content. We’re trying to make it appear in the popup instead. Hide your initial donation form placement with a little CSS.

The best way to target this form is with the GiveWP widget wrapper element. You’ll need to find the proper selector to continue because the CSS selector for GiveWP forms varies based on the markup of your theme. Each theme wraps widgets and other elements differently.

For example, the Twenty Fifteen theme wraps widgets inside an <aside> element. That element is where we found our donation form popup widget’s ID tag.

We used Chrome Dev Tools to see that our widget id is “give_forms_widget-3”. So to hide that widget all I need to do with CSS is this:

Hide the GiveWP Widget with CSS

aside#give_forms_widget-3 {
    display: none;
}

If you’re not familiar with adding custom CSS to your website, we have a guide you can use.

STEP 4: Set a Popup Trigger

Next, you need a “trigger” that makes your donation form popup appear on the page. In our example, we use the clicking of a “Donate Now” button that’s placed in the same menu area we used to hide the donation form widget. However, you can use other “events” as triggers, like your visitors’ mouse movements.

In our example, we use the default WordPress Text Widget to add a styled link as a button. The goal is to make our popup appear when the popup link is clicked.

The form ID is used to point the popup action to the content you want to appear, the donation form. You can find your form ID by inspecting the page with Chrome Dev Tools. In our example, the form ID is “89.”

Once you have that ID, add your Text Widget to your sidebar and then paste this HTML code into it:

Create the Modal Trigger Link/Button

<a href="#give-form-89-wrap" class="open-popup-link">Donate Now!</a>

Swap out our ID of “89” for your ID. This does several things at once. Most importantly, it creates a popup trigger with your donation button link. Secondly, It gives you a class that you can style however you want with CSS.

We styled our donation form popup button with this CSS styling:

Style the Button

.textwidget a.open-popup-link {
    background: green;
    color: white;
    text-decoration: none;
    border-bottom: 0;
    padding: 1rem;
    border-radius: 4px;
    font-size: 140%;
}
.textwidget a.open-popup-link:hover {
    opacity: 0.7;
}

Amplify your fundraising with a GiveWP Plan

STEP 6: Implement Magnific Popup Script

GiveWP uses the popular lightbox script called Magnific for the donation form modal popups that our plugin generates. Rather than use another popup plugin, leverage the script that is already loaded on your site through GiveWP to customize this popup. That makes for a leaner, faster website.

Magnific has full documentation that you can read here.

To use Magnific, you need to add some inline scripts to the front-end of your site. You can do this two different ways. The first option is to directly edit your theme’s functions.php file. The second is to use a code snippet plugin, like Code Snippets. To learn more about adding custom PHP functions to your website read on guide on that here.

Output the Javascript Trigger with PHP

add_action('wp_footer', 'give_inline_script' );

function give_inline_script()
{
   ?>
   <script>
      jQuery(document).ready(function( $ ) {
         $('.open-popup-link').magnificPopup({
            type: 'inline',
            midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
         });
      });
   </script>
   <?php
}

Our example script script triggers Magnific Popup and tells it to look for the class of that HTML button we created. It tells it to load the HTML content of the form.

Once that’s saved and and you’ve test it out, you’re all set. Here’s what our new donation form popup looks like in the example:

Animated example of this tutorial.

Advanced Implementations

Keep in mind, of course, that there are countless ways to develop a custom donation form popup on WordPress. This tutorial is meant to give you a basic starting point. Other options for donation form popup development include:

  • Embed the GiveWP form via do_shortcode()
  • If you want multiple different donation form popups on different pages, consider writing your own widget. This way you can create settings to toggle between GiveWP form IDs to dynamically output the HTML of your popup form.
  • You can also use a plugin like Popup Maker.

There are a lot of possibilities we hope to inspire with this simple tutorial. We’d love to see your custom GiveWP creations. Share your donation form popup implementation with us in the comments or subscribe to our newsletter to submit it as a Give Story when we call for submissions.

About the Author

Share this post

Join Our Newsletter

Get fundraising insights directly in your inbox. Plus a 15% discount off all plans.

  • This field is for validation purposes and should be left unchanged.

Copyright © 2024 Liquid Web, L.L.C.

GiveWP™ is a trademark of Liquid Web, L.L.C.

A Liquid Web Brand

© 2024 All Rights Reserved.