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. Embedded donation forms on your own website: MonkeyPod's embedded donation forms (embeds) provide an easy way to accept online donations directly on your own website, and still have all those donations recorded automatically in your MonkeyPod.

How do I create a donation form 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.

Your MonkeyPod displays a list of any existing embed donation forms. Click Create a New Embedded Form to add a new one.

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!

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, select Embed Code for your form to copy the embed code to your clipboard. Then you can paste the code into your website (similar to how you would embed a YouTube video).

How do I edit or delete an existing donation form

Edit and delete buttons are available at the top of the form if you need to modify or delete your embedded donation forms.

Frequently Asked Questions

What payment options are available in the embedded donation forms.

Donors may pay online using credit or debit cards or ACH payments. (Other digital wallet options, like Apple Pay or Google Pay, are not available within donation embeds due to security and compatibility issues.)

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.

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. If that's not something you're comfortable with, ask your web developer for help.

Get started by selecting the Donate Button option for your form and then follow the onscreen instructions.

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