Embed a donation form on your Webflow site
Add a donation form to Webflow with a two-line embed, no plugin. Exact Designer click-path, the published-site staging gotcha, plan limits, cards plus Apple Pay and Google Pay.
Your campaign
Community fund
67% funded
Choose an amount
Web, kiosk, and QR gifts land in one dashboard.
Last updated July 2026 by Akif
Quick answer
To add a donation form to Webflow, drag an Embed element (Add panel, Components, Embed) onto the page, paste Givebear's two-line snippet, save, and publish. The form looks empty in the Designer because Webflow does not run custom scripts there, so check the published site.
Key takeaways
- You can place the embed on one page or add the script site-wide.
- A paid Webflow plan is not required just to add the embed code.
- If you would rather not embed, link to a hosted Givebear donation page.
Who this is for
- Nonprofit web people building or maintaining a site in the Webflow Designer
- Webflow agencies adding donations for a charity client without a payments plugin
- Faith organizations and ministries running a Webflow site that need card, Apple Pay, and Google Pay giving
- Teams who want one giving setup for the website embed and an in-person lobby kiosk
How do you add the donation form in the Webflow Designer?
In the Designer, open the Add panel (the plus icon, top left, or press A). Under Components, find the Embed element (the custom-code element) and drag it to the spot in your layout where the form should appear: a section block on a Donate page works well. The code editor opens automatically. Paste both Givebear lines, the div with data-givebear-embed and data-organization-id set to your org ID, followed by the async script tag. Click Save & Close.
Nothing renders in the canvas yet, which is normal. Publish the project (Publish, top right) to the .webflow.io staging domain or your connected custom domain, then open that live URL. The script mounts after the page loads and the donation form appears inline, matching your site fonts. For a button instead of an inline form, swap data-givebear-embed for data-givebear-button and add data-button-text.
Webflow has no donation tool of its own, so the giving form is something you bring in. With Givebear it is two lines in one Embed element: no app and no marketplace install. Publish, and donors can give by card, Apple Pay, or Google Pay through Stripe.
The form sits wherever you drop the Embed element (a section on the homepage, a campaign page sidebar, a site-wide footer) and inherits your site fonts. The script (https://givebear.io/sdk/givebear.js) loads async and mounts after the page renders, so it does not interfere with Webflow interactions. The two things that catch people out on Webflow are covered below: the form never appears inside the Designer, and custom code needs a paid Site plan.
Designer canvas vs published site: the gotcha that trips people up
Webflow never runs embedded JavaScript inside the Designer canvas or its built-in Preview. The Givebear script is JavaScript, so the Embed shows only a grey placeholder while you are editing. People assume the embed is broken and re-paste the code or fiddle with attributes. Do not. The form only exists on the published output.
Always validate on the .webflow.io staging URL after hitting Publish. Treat staging as your test environment: confirm the amounts, the accent color, and the checkout open there before pointing donors at your custom domain. The 10,000-character limit on a single Embed element is worth noting for context, but the Givebear snippet is two short lines, so you will never come close.
Site-wide vs per-page, and when to use the hosted fallback
For a button in the nav or footer that should appear on every page, you can also place a Givebear button via the Embed element inside a global symbol, or add markup through Project Settings > Custom Code (the Head and Footer fields). For one campaign or a single Donate page, the inline Embed element is simpler and keeps the form exactly where you want it in the layout.
Remember that all of this needs a paid Site plan: the free Starter plan disables custom code and shows Upgrade required on the Embed element. If you are still on Starter, or a specific page strips custom scripts, link a Webflow button straight to your hosted Givebear giving page so you can still collect donations while you decide on hosting.
Practical use cases
- A nonprofit Donate page on a published Webflow site with an inline card form
- A campaign-specific embed routed to one fund using data-fund-id or data-campaign-id
- A site-wide Donate button in a Webflow global symbol or footer custom code
- A hosted Givebear giving page linked from a Webflow button while on the free Starter plan
Key features
- Two-line embed (one Embed element, one async script): no Webflow app, plugin, or marketplace install
- Card, Apple Pay, and Google Pay checkout through Stripe, processed on Givebear, not your Webflow project
- Inline form inherits your Webflow host fonts and sits anywhere in the layout hierarchy
- Modal button, inline form, or suggested-amount card via data-givebear-button, data-givebear-embed, or data-givebear-card
- Brand and routing attributes: data-accent-color, data-button-text, data-fund-id, data-campaign-id
- Hosted Givebear giving page as a fallback for the free Starter plan or any page that blocks custom scripts
Common questions
How do I add a donation form to Webflow?
Why does my Webflow donation form show nothing in the Designer?
Do I need a paid Webflow plan to embed a donation form?
Can I change the suggested amounts or button text on the Webflow embed?
Related reading
See it with your own funds.
Book a 30-minute walkthrough. No slides and no hard sell: we set Givebear up around how your organization already gives.
- Your funds, set up the way your treasurer reports them
- Where a kiosk would go, and what it costs
- The reports your board will actually see
Rather set it up yourself? Start free
Loading available times
Or open the booking page