Have you wanted to implement a popup donation form on your site but didn’t know how? Today’s your lucky day.

There’s nothing better than a big “DONATE HERE” button for making your donation form as easy to access as possible. Here’s a quick tutorial on doing that with Give.

Give has several ways that you can embed your donation form throughout your website. The Give Shortcode Builder makes it easy to do that. For example you can set your form to show the payment fields via the popup and embed that with our Give widget into your sidebar. The only downside with that currently is that the donation amount field appears in the sidebar as well.

A sample Give form in the sidebar
A sample Give form in the sidebar

What if you wanted to JUST show the “Donate Now” button and have the whole form show up in the popup? Here’s how you can do that now.

NOTE: We plan to add this as a feature to Give in the future. This post will help you implement this until that time.

STEP 1: Configure your Form

The first thing you need to do is make sure your form is configured to work well within the popup. Perhaps your form is using the “reveal” display method, or the “Modal Window Upon Click” method. Neither of those are ideal for this purpose.

If you want to use those methods on your single Give forms then you’ll want to create a new form for this purpose and set it to the “Show on Page” display method.

STEP 2: Add Your Form to a Sidebar

In order for the form to appear on the page at all, it needs to exist on the page. For now, simply go to your “Wdigets” area and add the form via the Give Widget into your sidebar of choice.

STEP 3: Hide the Form in Your Sidebar

Of course, that’s not where we want the form to appear. We want it to appear instead in the popup. So what we’ll do is use CSS to hide the form in the sidebar only.

The best way to do that is with the Give widget wrapper element. This will vary based on the markup of your theme and how it wraps your widgets. If you are using the Twenty Fifteen theme each widget is wrapped inside an <aside> element. That element will have our widgets name as it’s ID, then it appends the widget ID at the end.

Putting that all together, and looking at the source of the page via Chrome Dev Tools I can see that the widget id is “give_forms_widget-3”. So to hide that widget all I need to do with CSS is this:

aside#give_forms_widget-3 {
 display: none;
}

If you are not familiar with adding custom CSS to your website, read our guide on that here.

STEP 4: Add your Donate Now Button

Next, we’re going to add the actual Donate Now Button into the sidebar. For this all we need is the default WordPress Text Widget.

Our popup needs to be pointed to the content that it’s going to load. So we want to point it to the form ID. In my case my form ID is “89.” You can find your form ID by inspecting the page with Chrome Dev Tools.

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

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

Swap out my ID of “89” for your ID. This does several things at once. It gives us a class that we can style however we like with CSS. Secondly, it points our popup to the form.

Now you can style your button however you like with CSS. Just as an example, here’s the styles I used:

.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;
}

 

STEP 6: Implement Magnific Popup Script

Give uses the popular lightbox script called Magnific for our popups. Rather than use another popup plugin, leverage the script that is already being loaded on your site because of Give. That makes for a leaner website.

Magnific has full documentation that you can read here.

In order to leverage Magnific, we need to add some inline scripts to the frontend of your site. You can implement this code either from your theme’s functions.php file or a custom functionality plugin. To learn more about adding custom PHP functions to your website read on guide on that here.

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
}

This 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 via it’s inline method.

Once that’s saved and implemented you’re all set. Here’s what it looks like in my example:

Animated example of this tutorial.

Advanced Implementations

Keep in mind, of course, that there are more advanced ways that you can implement this tutorial using WordPress functions. For example:

  • Embed the Give form via do_shortcode()
  • If you want to have multiple forms for use on different pages you might consider writing your own widget and in its settings just have a way to set the Give form ID for that widget and dynamically output the HTML above. Then use a plugin like Display Widgets to set where that button is output per page or post or category, etc.

There are a lot of possibilities with this simple tutorial. We hope you find it useful and we’d love to hear your own unique implementations in the comments below.

Matt Cromwell

Matt is a co-author of Give and is Head of Support and Community Outreach for Impress.org. He loves writing docs and being "Generally helpful since birth".

15 responses to “How to Load a Donation Form in a Popup with Give

  1. Great Tutorial, Matt!
    Hope it’s o.k. to ask a related question here.

    Followed all you steps and I’m almost there. Replaced the Button CSS with HTML put directly in the text-widget. The problem is the triggered form field. Unfortunately, it’s not the nice formatted give-popup I’m used to. The donation form in my sidebar triggers the right one. Developer-tools shows there. That’s the formatting I want.
    What do you suggest?

    Thanks in advance.
    Tang

    Check out the button here: http://www.tangsworld.de/geistesblitze/

  2. Addition: The class for the responsive pop-up developer-tools showed was:
    – div class=”mfp-content give-responsive-mfp-content” –

    1. I see. Yes, I did add additional styling to the new popup. Here’s what I used for my demo:

      .mfp-content {
      width: 500px !important;
      max-width: 90%;
      background: white;
      padding: 2%;
      margin: 5%;
      }

      Thanks!

  3. Almost perfect, Matt!

    All that’s missing in my form is the text above or below feature and more important the input field for the donation amount. I can see it in your demo, but in my popup I can only see the Total amount field right now. Of course, the text has been put into the form.

    Aloha

    1. I have same issue. Not sure why but “Magnific Popup” doesn’t load the “give-donation-amount” field above the donation levels

      1. I figured it out. for some reason that field had display property set to none, I change it to block and it works now.

        div.mfp-content .give-donation-amount, div.mfp-content .give-form-content-wrap, div.mfp-content .give-select-level {
        display: block;
        }

  4. Hi,

    I tried this tutorial but I have a problem. The pop up is showing correctly but the Custom Donation field is not showing up like in your demo.

  5. I followed your directions for the most part (within my extremely limited knowledge), and the link works fine, but for some reason, you can’t edit the amount of the donation, even though it’s set to allow Custom.

    Site is still under construction, so there’s a lot of confusing stuff if you go look – the link in particular is the one in the footer.

    Thanks!
    -Billy

  6. Seems like a pretty obvious use-case. Why not just build it into the plugin? Give us a shortcode that doesn’t display anything, but loads the Reaveal on Click or Modal Window on Click scripts and such, then just have a simple ID or rel we need to include in the href so the plugin knows to activate the reveal/modal on click?

  7. Hey Matt,

    Is there any way to do the same thing except within a slider? I am using Slider Revolution and would like to have the form I built pop up when a button on the slider is clicked.

    What do you reckon can it be done?

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *