Pop-Up Giving Form

So your donors can give without ever leaving your page.

Knowledge of HTML, JavaScript, and CSS is recommended.

One thing that has historically shown to decrease conversion rates is requiring the potential donor to leave the organization's domain to interact with the Giving Form.  It adds a figurative speed bump in the user experience.

As always, we are looking for ways to boost your conversion rates.  One such way to boost that conversion rate is removing that figurative speed bump by presenting the Giving Form on your organization's page using an overlay, or, in other words, a Pop-Up.



How to Add a Pop-Up Giving Form to Your Organization's Page

This will require working knowledge of HTML, JavaScript, and CSS.

Download the Files

  • HTML - In practice, this will be your organization's page.  The only two important elements here are the links to the Stylesheet and the Script.
  • CSS - Here's where you customize the appearance of the interface.  By default, it appears as it does in the demonstration image above.  Fully responsive.  How about that!
  • JavaScript - The only things you need to edit in this one is the Parameters object at the very top.

Configure the JavaScript Parameters

All you will need to configure the Parameters object are:

  • The UUID of the Giving Form you wish to use.  You can find this in the URL bar when you are editing the Giving Form in question.
  • Your brand color as a hex value, e.g. #ff0011.
  • The ID of the element on your page to which you wish to add the Give Now button.

Process Complete

At this point, a Give Now button will render in the target element of your HTML, allowing potential donors to access a Giving Form without ever leaving the page.