Adding a modal popup button to your navigation menu is one of the most effective ways to improve your online donation conversion rate.

Adding a donation button to your menu makes your donation form really obvious and places it on every page of your whole site. What if you could add your Give form into your main menu and have it pop up in a modal without knowing any code? That’s what this tutorial is going to show you.

NOTE: Every theme handles menus differently. It’s possible this method might not work well with your theme. If so, the snippet provided below might be a better route for you. Reach out to your theme support for guidance.

How to Add a Donation Form Popup to Your Main Menu

Here’s a quick video tutorial to walk you through the process of adding a Give form popup to your main navigation menu, followed by written instructions.

Our Give forms have a great widget, shortcode, and block that allows you to determine the form display style per instance. One of those display modes is “Button.” Essentially, you can have a simple button output that says “DONATE.” When it’s clicked, your whole Give form opens in a modal window.

Unfortunately, getting your widget, shortcode, or block into your menu is nearly impossible unless you’re a developer.

So in order to make this happen, we’re going to do the following:

  1. Use the “Widget Menuizer” plugin to add a Sidebar into the main menu.
  2. Place the Give Form Widget into your Sidebar and choose “Button” display mode.
  3. Then head over to Menus and add the Sidebar into the main menu.

There’s a few other details of this implementation to consider as well, so make sure to read to the bottom.

Using Widget Menuizer

Before we install the Widget Menuizer plugin, let’s make sure we have a sidebar that has our Give form in it.

Head over to “Appearance > Widgets.” Then grab the “Give Form” widget from the left-hand available widgets, and drag it into any sidebar you want. While you’re there, open it up and make sure you set “Display Style” to “Button.” Add text to the “Button Text” option. This will be the text of your donate button in your menu item. Something like “Donate” is good for now.

In the Give Widget Settings, set the Title field to say 'Main Menu Donate Button' or something similar. Choose the Give form you want to appear. Select the button display style and set the button text to 'DONATE.' Make sure floating labels are disabled and the content display is set to none.

Now we’re ready to install the Widget Menuizer plugin. Install and activate, then head over to “Appearance > Menus.” Once there, you should see the option “Sidebars” in the vertical menu options. If you don’t see it, then click on “Screen Options” in the top right of the screen and make sure that the “Sidebars” option is enabled.

Sidebars should be checked off in the screen options section of the widget page to show the sidebar settings..

Now add your sidebar with the Give form in it and you’re all set!

When you click on the "donate" button a modal donation form pops up in the window.

The Widget Menuizer provides a couple of settings that you might need to tweak a little. Here you’ll want to set the “Label Display” to “None.” The “Container Element” and “Widget Layout” options are nice if you’re doing very complex things, but generally, you can tweak those as you need. Using “div” and “Horizontal” works just fine most of the time.

Adding Custom Sidebars

One caveat to this method is that often you are already using all your sidebars. If you add a Give form to one of your sidebars, then it will appear in that place, which you don’t want. So to do this without altering your existing sidebars, you’ll need to create custom sidebars that won’t appear anywhere and work seamlessly with the Widget Menuizer plugin.

There are quite a few free plugins that promote the ability to create custom sidebars, but many of them do far too many things in addition to custom sidebars. Ocean Custom Sidebars is the only one I tested that meets all of our qualifications that is focused on doing its job well and cleanly.

Once you have it installed and activated, head to “Appearance > Widgets” and you’ll see the ability to add new custom sidebars there. Using these custom sidebars ensures that the content of the sidebar isn’t output anywhere on your site that you don’t want it and you can use the Widget Menuizer perfectly.

Consider Responsiveness

Another big caveat is how many menu items you already have in your menu, how your menu breaks into lines when there are too many items, and generally how it handles responsiveness on smaller screens.

One simple way to test your menu responsiveness with the donation button is to use WordPress’ built-in Customizer. It has convenient screen-sizing options.

In the customizer settings, clicking on the different device symbols allows testing of the page in different sizes.

Add a Little Style

Since you’re in the Customizer, you might want to spice up that button a bit. With my example, I wanted it to blend well with the other items, and just added a subtle hover effect. Here’s what I used:

Sample Give Button Styling for the Main Menu

nav .give-btn-modal {
	background: transparent;
	color: white;
}

nav .give-btn-modal:hover {
	background: rgba(255,255,255,0.35);
	color: white;
}

If you’re not used to using CSS, the “nav” element is to ensure that I’m only targeting the Give modal button when it’s inside a navigation element. Not every theme uses the “nav” element for their menu outputs, but it’s a fairly safe bet. See our documentation for more help adding custom CSS to your site.

For Developers

If you are a developer or work with one, you might want to do this manually, without any plugins at all. Here’s a snippet that can get you on your way:

Add Give Button to Main Menu

/**
 * Add Give Button to Main Manu
 *
 * @param $form_id
 */

// Hook into the Name Menu Items
add_filter('wp_nav_menu_items', 'add_give_donate_to_main_menu', 10, 2);

function add_give_donate_to_main_menu($items, $args) {
    
    // Only target the Primary menu
    if( $args->theme_location == 'primary' )

        $items .= "<li class="menu-item">' 
                . do_shortcode('[give_form id='585' display_style='button']'). '<li>"; 

    return $items; 
}

Show Us Your Buttons

This would be a great option for your major fundraisers, like a Giving Tuesday campaign, to ensure every visitor sees it and can donate quickly.

Have you implemented a donation button with a modal popup on your website? Is it converting well for your donors? Let us know 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".

There are 6 comments Join the Discussion

Join the Discussion

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