How to Add a Donation Form to a Webflow Site

Why Webflow does not do donations on its own

Webflow is a website builder and a CMS. It is not a payments platform. Even Webflow Ecommerce, which can charge cards, is built around products, carts, and shipping, not around "give whatever you want, optionally every month." You can wrestle it into a fixed-price "product" called a donation, but the moment you want suggested amounts, a custom amount field, or recurring gifts, that approach falls apart.

So in practice, every donation form on a Webflow site comes from somewhere else and gets dropped in with the Embed element. The only real decision is what you embed, and how much of the donor's attention you lose in the process.

What a working donation setup actually needs

Before you paste anything, it helps to know the three moving parts. A lot of half-finished donation pages are missing one of them.

• A form that collects the amount, the donor's details, and a card. This is the part people see.
• A payment processor that actually moves the money. For most nonprofits that means Stripe, sometimes PayPal. Stripe's standard rate is 2.9% + 30¢, and registered nonprofits can apply for a discounted 2.2% + 30¢.
• A receipt and a record. Donors expect an email confirmation, and your finance person expects to find the gift later. If your setup skips this, you will rebuild it in a month.

The tools below bundle these together in different ways. Where they differ most is whether the donor finishes the gift on your Webflow page or gets sent to someone else's.

Adding the form, step by step

The mechanics are the same no matter which donation tool you pick. You generate an embed snippet in that tool, then drop it into Webflow.

1. Build the form in your donation tool

Set your suggested amounts, turn on a custom amount field, decide whether to offer monthly giving, and add your logo and colors. Do this part first so the embed you copy is already branded.

2. Copy the embed snippet

Most tools give you a single line of HTML or a short script tag. Copy the whole thing.

3. Drop in an Embed element in Webflow

In the Webflow Designer, open the Add panel (the plus icon), search for Embed, and drag it onto the page where you want the form. Paste your snippet into the code box and save. You will see a placeholder in the Designer, which is normal. The real form only renders on the published site or in Preview.

4. Publish and test on a real phone

Publish, open the live page on your phone, and make a real $1 donation to yourself. Confirm the money lands in your processor, the receipt arrives, and the page does not jump around as the form loads. Refund yourself afterward.

That is the entire process. If a guide makes this sound harder, it is usually trying to sell you a plugin you do not need on Webflow anyway.

The redirect trap (and why it matters)

Here is where most Webflow donation setups go wrong. The fastest option is to grab a hosted "donation page" link from a platform and wire it to a button. One click, done. Except now your donor leaves the site they were just reading, lands on a page that looks nothing like your brand, and has to rebuild their trust from scratch on someone else's domain.

Every extra page load and every visual gear-change is a place to lose the gift. An inline embed that renders the form right there on your Webflow page skips all of that. The donor reads your story, sees the form below it, and gives without ever feeling handed off. If you only change one thing about your donation setup, make it this.

Three ways to do it, compared

Roughly speaking, you have three options for what to embed on Webflow. Here is the honest version.

There is no single right answer. A tiny all-volunteer group running one campaign a year might be fine with a Payment Link. A team that depends on year-round online giving usually wants the inline route, because the design control and the on-page experience pay for themselves. If you want to see what a Webflow-friendly inline form looks like, the features page walks through the embed and the recurring options.

Don’t forget monthly giving

One-time gifts are nice. Monthly gifts are what keep the lights on. If your donation tool supports it, turn on a monthly option and make it visible without forcing it, a simple toggle or a "make this monthly" prompt is plenty. Recurring donors are far more valuable over time, and the easiest moment to ask is the moment someone is already giving.

Set sensible suggested amounts too. People anchor to whatever you show them, so a row of buttons like $25 / $50 / $100 with one highlighted will outperform an empty box every time. For more on picking those numbers, see the psychology of suggested donation amounts.

Common mistakes to skip

• Shipping the donate button to a generic "ways to give" page instead of straight to the form. Every extra click loses people.
• Never testing on mobile. Most donors are on phones, and a form that overflows the screen on an iPhone is a dead form.
• Forgetting the thank-you and receipt. The donation is the start of the relationship, not the end of it.
• Embedding a form that loads slowly and shoves your layout down as it appears. Reserve space for it.