Can I Add a Donation Page to My Website?

Yes. A charity or nonprofit whose website plan allows embedded code can add a donation form to its own pages, and one whose plan does not can still link a donate button to a donation page the platform hosts. So there are three routes: a form inline in your page, a checkout that opens over your page, or a link that takes the donor to the platform's page.

This guide covers how to set up a donation page at the front end: how each route connects to your site, what breaks, and who answers for the part you do not control. It does not cover configuring the platform itself (campaigns, payment methods, recurring giving, donor receipting). Those live in each platform's own dashboard.

What you need before starting:

  • A website plan that allows custom code and embeds. Some builders restrict them: Webflow, for one, needs a paid plan, as Donorbox's guide notes
  • A configured donation campaign in your chosen platform
  • The installation code or campaign identifier from your platform dashboard
  • Whoever holds full control of the site, or their access

If you have not chosen a platform yet, the donation software comparison for nonprofits covers the main options. Choose first, then integrate. Swapping platforms after launch means rebuilding the page, the thank-you flow and the reporting.

Who Answers for a Charity Donation Form?

An embedded donation form is the one place on a charity website where the most important transaction happens inside markup you did not write and cannot edit. That decides who answers when something goes wrong.

You are accountable for: the page the form sits on, the wrapper around the iframe, the button that opens it, the placement, the thank-you destination, and whether anyone has ever tested the flow end to end.

The platform is accountable for: the fields, the payment step, the error messages, the keyboard behaviour inside the form, and the accessibility of everything the iframe renders.

Donorbox says this in writing. Its terms state that the "Customer is responsible for accessibility of Customer-provided content, fundraising pages, and third-party embeds" (checked November 2026). The same terms say Donorbox "does not store, process, or transmit cardholder data on behalf of Customer" and that card data is handled directly by the payment processor. Read that as intended: the card handling is genuinely off your site, and the parts left on your site are genuinely yours.

Name that split before you pick a platform, not after a donor reports that the form will not submit. If nobody at your organisation owns the answer to "who fixes the donation form", that is the finding, not the form.

Which Platforms Allow an Embedded Form?

Donorbox, Fundraise Up and every.org each document a way onto your own site, and they work differently. Which one you have decides the steps.

Fundraise Up: An Overlay Opened From Your Page

Fundraise Up's checkout opens over your page rather than sitting in it. The integration has two parts.

The installation code. Fundraise Up's installation documentation (checked November 2026) says the code goes in the head of your site's HTML, "as the last script in the <head> section for optimal performance", and warns: "Do not install Fundraise Up using script managers like Google Tag Manager. Script managers can disrupt conversion reporting and affect platform performance." So it belongs in your site-wide head code setting, not the footer. Correct it if your site already has it in the footer: conversion reporting is the thing at risk. The code is unique to your organisation, not to a campaign.

The element. Elements are created in the Fundraise Up dashboard. The Elements documentation shows the snippet for a Donate Button, <a href="#XTGWFZFR" style="display: none"></a>, which you add where the button should appear. To keep a button you already styled, with its own hover state, focus ring and sizing, a Donate Link generates a URL for your campaign to put on that button. Your fundraising team can supply either. You do not need access to the Fundraise Up backend to do the integration.

What opens depends on the campaign's settings. The same documentation says that if both the campaign page and the checkout modal are enabled, a Donate Button opens the modal, while a Donate Link opens the modal from your website and the campaign page from anywhere else. Check which applies before you write the button label, because "Donate" that navigates away and "Donate" that opens an overlay are two different promises to the donor.

Then publish, open the page, and confirm the correct campaign appears. Open it with the keyboard, not only the mouse. On a phone, confirm the overlay scrolls and that closing it returns you to the page you were on rather than the top of the site.

Donorbox: An Inline Form Inside a Container

Donorbox puts the form in the page. Donorbox's own guide, which uses Webflow as its example (checked November 2026), sets out the route: find the campaign in your dashboard, open Share & Embed, and choose the format you want. Donorbox offers an embedded form, a pop-up button, a sticky button, or a button linking to its hosted page. Copy the code rather than typing it, because the identifiers must be exact, and paste it into an embed block on your page.

Then constrain it. The guide notes that an embed added on its own can span the width of the page, and recommends adding a container or column first. I keep the form to roughly 500–600px and centre it, and I never set a fixed height on the wrapper: the form is multi-step, and a fixed height clips the later steps on exactly the devices where you will not notice.

Two things to decide rather than default into. Pop-up and sticky buttons are the formats that most often collide with the rest of a page, because a sticky element competes with your own header and your cookie banner for the same corner. And the hosted page is worth considering on its own merits. What the inline embed buys you is that the donor never leaves your domain. What it costs you is that a chunk of your most important page is markup you cannot open. If you want to understand why that trade matters beyond donations, what your website builder actually produces is the longer argument.

every.org documents a Donate Button you add to a page as a code snippet, and a Donate Link in a set URL format (both checked November 2026). Check its eligibility before anything else: the comparison sets out what a non-US charity needs in order to use it.

Other Platforms

Enthuse is a UK candidate worth evaluating, and its vendor's documentation covers setup. The comparison explains why it is a candidate rather than a recommendation. If a platform sends the donor to a hosted page, find out where the donor returns afterwards, and test that return, including what happens when a donor abandons partway and hits Back.

How to Check a Donation Form Is Accessible

Accessibility on an embedded donation form splits the same way accountability does, and the split is testable.

The wrapper is yours. A third-party iframe with no title attribute fails WCAG 2.2 success criterion 4.1.2 Name, Role, Value. A screen reader announces an untitled frame as nothing useful, and every automated checker flags it. Add a title to the iframe element inside the embed code, for example title="Donation form". WCAG 2.2 AA is the standard the rest of the site is held to, so see WCAG 2.2 AA: What the Build Settles and What Your Team Must Keep Doing for what the surrounding page has to clear.

The form is theirs, and their claims differ. Fundraise Up's accessibility documentation states that it "conforms to WCAG 2.2 AA standards across the Checkout Modal, Campaign Pages, Elements, and Donor Portal", and says independent third-party auditors verify that regularly. Donorbox's terms say it "endeavors to make the Services reasonably accessible and to align, where feasible, with WCAG 2.1 AA". Both checked November 2026. Those are different commitments: one names a version and a level and points at an audit, the other is a best-efforts alignment with an earlier version. If your funders or your regulator ask about accessibility conformance, that difference is procurement evidence and belongs in your file.

How to test it, since a claim is not a result. Run the page through an automated checker to catch the iframe title and anything in your own markup. Then do the two things automation cannot: complete the whole donation using only the keyboard, from the button through every field to the confirmation, and run it again with a screen reader. If the form opens as an overlay, confirm it can be opened with Enter, that focus moves into it, that Tab does not escape it while it is open, and that Escape closes it and returns focus to the button that opened it. If the platform's form fails any of that, you cannot fix it. You raise it with the platform, and you record that you raised it.

Gift Aid and What Happens After the Donation

For a UK charity, the integration is only half the question. Gift Aid lets a charity claim back 25p every time an individual donates £1, and the declaration has to be collected in the form itself, which means it is a platform capability, not something you can add on your page.

Fundraise Up documents Gift Aid support for UK organisations: it is enabled per campaign in the dashboard, adds a donation-type step so supporters confirm the money is their own, and shows the uplift the donor is adding. The claim to HMRC is still yours to submit (Gift Aid documentation, checked November 2026). Confirm your own platform's Gift Aid behaviour against its current documentation before launch, and check it again at renewal.

The other half is where the donation lands. A donation that completes but never reaches your CRM is a donor you cannot thank, which is the most expensive kind of integration failure. CRM Integration for Nonprofit Websites: What Goes Where covers that side of the handover.

Nonprofit Donation Page Best Practices

Homepage. Place the call to action after an impact section or programme description. Donors need context before they are ready to give, and a donate button above the first sentence of explanation asks for money from a stranger.

Dedicated giving page. Give the form a dedicated /donate page where it is the only purpose of the page. Everything else on that page is a reason not to finish.

Campaign pages. Keep the form or button close to the campaign content so donors can act immediately after reading the ask.

The form's own design is the platform's, but the page around it is yours, and it does most of the persuading. Nonprofit website form design covers what that page has to do.

Testing Before You Promote the Page

Test the complete flow on desktop, tablet and phone, and in at least two browsers. Start with Chrome and Safari.

On the transaction itself: do not assume a sandbox exists. Test provision varies by platform and by payment processor, and on some platforms the only genuine end-to-end test is a small real donation you then refund. Confirm how your platform supports a test transaction in its current documentation before you commit to a launch date.

Do not treat styling changes as cosmetic. CSS on a container can change how the embedded form renders, particularly on a phone, so run the full flow again after any change to the wrapper.

  • Installation code or embed in place, in the field the platform's own documentation specifies, and the site published
  • Form or checkout opens in the browser and shows the correct campaign, without layout shift
  • One end-to-end transaction completed the way the platform supports it
  • Flow tested on a phone, not only a narrow desktop window
  • Iframe carries a title attribute
  • Whole flow completed once using only the keyboard
  • Thank-you page or return URL configured and tested, including the abandoned-donation path
  • Gift Aid setting confirmed, if you are a UK charity
  • Donation confirmed as arriving in the CRM
  • Named owner recorded for the donation form, so there is an answer when it breaks

A Blueprint Audit maps this across your own site, as part of a full governance diagnostic.

On Webflow? The platform-specific steps are in Platform Notes.

Next Step

Once donations are working, turn to every other form on the site: Website Forms for Charities: Where the Data Goes and Who Is Responsible.

Related resources: