How to Embed a Donation Form on Your Website

MonkeyPod offers your organization the flexibility of accepting online donations through two channels: 

  1. Fundraising Pages: Standalone pages that you can publish in five minutes or less.
  2. Embedding a Donation Form on Your Website: Explained in this article!

What are "donation forms" (embeds) in my MonkeyPod?

MonkeyPod's donation forms (embeds) provide an easy way to accept credit card donations directly on your own website, and have all those donations recorded automatically in your MonkeyPod!

How do I create donation forms to use in my website?

First, define at least one donation option to set up the basic giving parameters and accounting settings for gifts you receive.

Next, choose Fundraising > Donation Forms (Embeds) from the main menu.

Screenshot showing where to find donation form embeds

After opening the page, you see a list of currently available "Embed Donation Forms". Click the "Create a New Embedded Form" button to add a new form.

Screenshot showing embedded forms.

Each donation form includes a few settings to configure:

Basics

  • Name of the Embedded Form (internal only): An internal (not publicly visible) name for the embed for your reference.
  • Donation Option: Choose from existing donation options. Unlike MonkeyPod's fundraising pages (which support multiple donation options on the same page), donation embeds require that you select exactly one donation option.

Visual Design

  • Header Image (Optional): Recommended size 600px wide & 150px high.
  • Intro Text (Optional): By default, the donation option description is used. You can replace that with custom text by entering it here.
  • Font/Font Size: Choose from a selection of fonts and sizes to match your website.
  • Layout: Choose a condensed, medium, or spacious layout to match your website.

  • Border/Corners: Choose from rounded, square or borderless edges for your form.

  • Button Colors: Select the background and text color for form buttons. Fun tip: if you want to match a color on your website, just click the color box, select the eye dropper icon, and then click the desired color on your website to have it entered here.
  • Button Position: Position the button either left, right, or center at the bottom of the form.

Other Settings

  • Class for donation accounting (optional): Assign a class to all donations received through the embedded form.
  • Tag donations (optional): Assign a tag that can be used for tracking purposes.
  • Intro paragraph in donation receipts: Add a sentence or two to include at the top of donation receipts sent when someone donates through this form.

A preview of the form is displayed on the right side of the page so you can see how your changes to the settings impact your form. You can even click through the pages of the form (like "Contact Info" and "Payment Info"). Once you're happy with how the form is configured, you are ready to embed it into your website as described below!

Sample customized donation form.

How do I embed my donation form in my organization's website?

To embed your form, return to the "Embed Donation Forms" page by choosing Fundraising > Donation Forms (Embeds) from the main menu. (Or if you're editing one of your donation forms, click the "Back to Donation Forms" link at the top of the page.)

Once you're on the Donation Forms page, you'll see all the donation forms available.

To embed a form, simply click on the copy icon for that form to copy the embed code. Then you can paste the code into your website (similar to how you would embed a YouTube video).

Screenshot showing embed code for form

Can the donation form be used in a modal window instead of embedded on a webpage?

Yes! As an alternative to embedding the donation form on a web page, you might want to have it load in a modal window instead. There are a number of advantages to this approach, including reduced visual distractions while someone is donating and less risk of a style contrast between the donation form and the rest of your site. MonkeyPod makes it easy, provided you have some basic knowledge of HTML and the ability to load an external javascript file on your site.

First add a Javascript reference

Add the following script tag to the <head> section of your HTML document:

<script src="https://monkeypod.io/embed/modal.js" id="monkeypod-modal-js" defer></script>

Then add a link to your webpage to trigger the modal window to open.

You could make this a simple text link, or a button, or an image, etc. Here's an example of a simple text link. The important part is the data-target="donation-modal" and the data-toggle="monkeypod-modal". That's what tells the javascript what to do when the link is clicked.

<a href="#" data-target="donation-modal" data-toggle="monkeypod-modal">Give now!</a>

Next, add the HTML for the modal window itself to your webpage.

That should look something like this:

<div id="donation-modal" class="monkeypod-modal" style="display: none"> 
    <div class="monkeypod-modal-window"> 
        <span class="close" data-dismiss="monkeypod-modal">x</span> 
        [PASTE THE EMBED CODE HERE] 
    </div> 
</div>

Replace the "[PASTE THE EMBED CODE HERE]" with the embed code for the donation form you want to load in the modal. Notice the style="display: none", which is important because it ensures the modal window won't be visible until it is triggered. 

Frequently Asked Questions

Is there a limit to the number of embeds I can use on my website?

There's no limit! You may embed as many as you need.



Want more amazing video content? Check out our YouTube channel!

Related Articles