How to Embed a Donation Form on Your Webflow Nonprofit Website

Before You Start

This guide covers the front-end integration — how each platform connects to your Webflow site and how to verify it works correctly. It doesn't cover configuring the donation platform itself: campaigns, payment methods, recurring giving, or donor receipting. Those are configured in each platform's own dashboard.

What you need before starting:

• A Webflow site on a paid hosting plan
• A configured donation campaign in your chosen platform
• The integration code or campaign identifier from your platform dashboard
• Admin access to the Webflow site

If you haven't chosen a platform yet, the Donation Software Comparison for Nonprofits covers the main options.

Fundraise Up: Modal via Campaign Hash Code

Fundraise Up uses a modal overlay approach. The donation form loads as a fullscreen overlay when a donor clicks a button. The integration has two parts: the embed script that loads Fundraise Up on the page, and the campaign hash code that opens the correct form.

Step 1: Add the Fundraise Up Embed Script

Fundraise Up provides an organisation-level embed script that must be present on any page where a donation button will appear. In Webflow, navigate to Site Settings → Custom Code → Footer Code and paste the Fundraise Up embed script. Save and publish.

Step 2: Get the Campaign Hash Code

In your Fundraise Up dashboard, navigate to the campaign. Each campaign has a unique hash code formatted like #ABCDE123. Your fundraising team will provide this — you don't need access to the Fundraise Up backend.

Step 3: Link the Hash Code to a Webflow Button

In Webflow, select the button element. Set the link type to URL and enter the hash code as the value. When a donor clicks the button, the Fundraise Up script detects the hash and opens the campaign form as a modal.

Step 4: Test

1. Publish the site and navigate to the page
2. Click the button — the Fundraise Up modal should open immediately
3. Confirm the correct campaign is displayed
4. Test on mobile — the modal should be fully functional and scrollable

Donorbox: Inline Embed on the Page

Donorbox uses an inline embed. The donation form sits directly on your Webflow page within the layout.

Step 1: Get the Embed Code from Donorbox

In your Donorbox dashboard, navigate to the campaign and find the Embed option. Copy the embed code — don't type it manually, as the identifiers must be exact.

Step 2: Add an HTML Embed Element in Webflow

Add an Embed element from the Add panel, paste the Donorbox embed code, and save. The form will appear as a placeholder in the Designer but load correctly on the published site.

Step 3: Style the Container

For most layouts, the form works well in a container that's 500–600px wide, centred on the page. Wrap the embed in a Div Block and constrain its width. Don't set a fixed height — the iframe resizes dynamically as donors move through the steps.

Step 4: Test

1. Publish the site and confirm the form loads correctly
2. Test on mobile — confirm the form is usable at small screen widths
3. Use Donorbox's test mode to process a test transaction before promoting the page

Enthuse: Inline Embed or Hosted Page Link

Enthuse offers two integration options. The inline embed works the same as Donorbox — get the embed code from your Enthuse dashboard, add a Webflow Embed element, paste, and test.

The hosted page option links donors to an Enthuse-branded page on the Enthuse domain. In Webflow, set the button link to the full Enthuse campaign URL. Donors leave your site during the donation and are optionally redirected back to your thank-you page after completing the transaction.

For most organisations, the inline embed produces a better donor experience. Use the hosted page option only if the inline embed causes layout problems that can't be resolved.

Accessibility Considerations

Donation form embeds introduce third-party iframes into your page. Accessibility testing tools will flag iframes lacking a title attribute. Add a title attribute to the iframe element within the embed code — for example title="Donation form". This doesn't affect functionality, only accessibility.

For Fundraise Up modals, confirm the modal is keyboard accessible — a donor should be able to open it with Enter, tab through all fields, and close it with Escape.

Donation CTA Placement

A few placement principles I apply consistently on client sites:

Homepage. Place the CTA after an impact section or programme description — donors need context before they're ready to give.

Dedicated giving page. All three platforms convert best on a dedicated /donate page where the form is the primary purpose.

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

Checklist Before Promoting the Donation Page

• Embed script or iframe added and site published
• Form or modal tested in browser — opens and displays correct campaign
• Test transaction completed in platform's test mode
• Form tested on mobile
• Iframe title attribute added for accessibility
• Thank-you page configured in platform settings

Platform-Specific Styling

Fundraise Up. Configure brand colours, button styles, and fonts in the Fundraise Up dashboard under Campaign settings. Match the primary button colour to your site’s CTA button colour. Match the font family if Fundraise Up supports it (they offer limited font options). The trigger button on your Webflow page should be styled as your standard CTA button — same colour, same size, same hover state.

Donorbox. Donorbox offers some theming options within their dashboard. Set the accent colour to match your brand’s primary colour. For the iframe container in Webflow, remove the default border Donorbox applies by wrapping the embed in a styled div with overflow: hidden and your desired border radius.

every.org. every.org’s embed widget is relatively minimal and adapts reasonably to container styling. Focus on container width and background to create visual integration.

Givebutter. Givebutter offers customisation options for button colours and form layout within their platform. Match these to your brand guidelines before embedding.

Testing the Styled Form

After styling, test the complete donation flow on three devices: desktop, tablet, and mobile phone. Test with at least two browsers (Chrome and Safari cover most users). Check that: the form loads without layout shifts, all fields are accessible by keyboard, the payment step completes successfully, and the confirmation message or redirect works correctly.

Do not assume styling changes are purely cosmetic. CSS changes to container elements can occasionally affect how the embedded form renders, particularly on mobile. Always test the full flow after making styling changes.

For the accessibility requirements that apply to donation forms, see WCAG AA Accessibility on Webflow. For the platform comparison to help choose the right donation tool, see Donation Software for Nonprofits.

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

Further Reading

• Donation Software for Nonprofits: Choosing the Right Platform
• How to Prepare Your Nonprofit Website to Go Live
• WCAG AA Accessibility on Webflow: What Nonprofits Need to Implement