How to Embed a Donation Form on Your Website

This article contains affiliate links. If you sign up through one of them, I may earn a small commission at no extra cost to you. Details

Adding a donation form to your website is one of the first things every nonprofit should do. The easier you make it to give, the more donations you'll get. Here's how to do it with the most popular platforms.

The three embed options

Most donation platforms offer three ways to put a form on your site:

1. Inline embed. The form appears directly on your page, like any other content. Best for dedicated "Donate" pages.
2. Popup/modal. A button on your site opens the form in an overlay. Good for adding a donate button to your homepage or header without taking up space.
3. Hosted page. You link to a donation page hosted by the platform. Simplest option but takes donors away from your site.

For most nonprofits, I recommend the inline embed on a dedicated donate page, plus a popup button in your site header.

Step by step: Donorbox

1. Log in to Donorbox and go to your campaign
2. Click "Embed Form" in the campaign settings
3. Choose "Embed" for inline or "Popup" for a button
4. Copy the code snippet (it's a small chunk of HTML)
5. Paste it into your website's page editor

In WordPress, use a "Custom HTML" block. In Squarespace, use a "Code" block. For any other site, paste it wherever your HTML goes.

The form will load inside an iframe and match your campaign's settings (amounts, recurring options, branding).

Step by step: GiveButter

1. Go to your GiveButter campaign dashboard
2. Click "Share" and then "Embed"
3. Pick your style (inline widget, popup button, or full page)
4. Copy the embed code
5. Paste it into your site

GiveButter's embed is responsive by default, so it looks fine on mobile without any extra work.

Step by step: Bloomerang

Bloomerang's forms are more basic, but the process is similar:

1. Create a giving form in the Bloomerang dashboard
2. Go to the form's settings and find the embed code
3. Copy and paste into your site

Bloomerang's forms are less customizable visually than Donorbox or GiveButter, but they feed directly into the CRM, which is the main advantage.

Tips for a good donation page

• Keep the page simple. Don't surround the form with walls of text. A short sentence about impact and the form itself is enough.
• Pre-select a giving amount. Platforms like Donorbox and GiveButter let you set a default amount. $25 or $50 works well for most orgs.
• Make recurring the default. Both Donorbox and GiveButter let you default the form to monthly giving. This alone can significantly increase recurring revenue.
• Test it on mobile. More than half of online donations happen on phones. Make sure the form works and loads fast.
• Add a donate link to your navigation. Don't bury it. Put "Donate" in your main menu and link it to your donation page.

Which platform makes embedding easiest?

GiveButter is the simplest to embed. The setup takes about five minutes and the form looks polished out of the box. Donorbox offers more customization if you want to fine-tune the appearance. Bloomerang is best if you're already using their CRM and want the data to flow directly in.