How To Create A Pop-Up Donation Form: Step-by-Step Guide

Our donation forms just got even more exciting! Instead of redirecting your donors to a separate donation page, you can now make it so that your form pops up on the same screen when someone presses your donate button. Try it out here:

Donate

Step 1

This is very easy to implement. Once you have created your donation form, go to your dashboard and click the “Popup Form” button located under your campaign link.

Step 2

This will bring you to a page where you can customize the size of your form (small, medium large) as well as the donation button (color, Donorbox logo).

Step 3

There are two ways to embed a popup form into your website. Firstly, you can simply copy the embed code into your website’s html. Your customized Donorbox donate button will appear on your page and, when clicked, open up your popup form.

However, if you prefer to use your own donate button or have the popup form linked to a hyperlink of your choice, follow these two steps:

1. Add a link with a href=”https://donorbox.org/nonprofitcampagin” and one of the class names should be custom-dbox-popup. For example: <a href="https://donorbox.org/nonprofitcampaign" class="custom-dbox-popup">Donate Now</a>

2. Add the two lines of code above the closing </head> tag.

<script src="https://donorbox.org/install-popup-button.js" type="text/javascript" defer></script>
<script> window.DonorBox = { widgetLinkClassName: 'custom-dbox-popup' } </script>