How to Add a Donation Form to a Framer Site

Framer does not do payments, on purpose

Framer is design-first. It is built to make marketing sites and landing pages that look like someone cared, and it does that beautifully. What it does not have is any concept of charging a card. No cart, no checkout, no donation block. So every donation form on a Framer site comes from somewhere else and gets placed with the Embed component.

If you came from Squarespace or Wix expecting a native widget to exist, adjust your expectations now. On Framer, embedding is not the workaround, it is the only road.

The marketplace forms trap

Search the Framer marketplace and you will find plenty of form plugins. They are great, for the thing they actually do, which is collect information. A contact form, a newsletter signup, a survey. They capture names and emails and drop them in your inbox or a spreadsheet.

What they do not do is charge a card. A marketplace form plugin has no payment processor behind it, no Stripe connection, no way to actually take a $50 gift. If you wire one up as a "donation form," you will collect a list of people who said they wanted to give and zero dollars. That is a painful lesson to learn after launch.

So the rule is simple: for donations, you need a form that has a real processor attached. That is not a generic form plugin. That is a dedicated donation tool you embed.

Embedding a real donation form

The Embed component is how you bring a Stripe-powered form onto your Framer page. The steps are short.

1. Build and brand the form

In your donation tool, set suggested amounts, enable a custom amount field, turn on monthly giving, and apply the client's logo and colors. Copy the embed snippet, usually a line of HTML or a short script.

2. Add the Embed component

In the Framer canvas, open the Insert menu, find Embed, and drag it onto the frame where the form should sit. In its properties, choose the HTML option and paste your snippet. (Some tools also give you a URL you can drop into the Embed's "URL" mode instead.)

3. Size the frame

Like most embeds, the form renders inside the component's box. Give it enough height to fit the whole thing, including the bit that expands when a donor opens the monthly toggle. Check it at your desktop, tablet, and phone breakpoints, since Framer is responsive and the form needs room at each.

4. Publish and test for real

Publish the Framer site, open it on your phone, and make an actual $1 donation. Confirm the money lands in the processor, the receipt arrives, and nothing is clipped. Refund yourself afterward.

Notes for designers and agencies

Since Framer skews toward people who care a lot about how things look, a few things are worth flagging when you are building for a client:

• Pick a form you can brand. A generic, off-brand widget will undo the design work you just did. Choose a tool that lets you match fonts, colors, and copy so the form reads as part of the page.
• Mind the breakpoints. Framer's responsive layouts mean the embed needs to behave at every size. Test the form, not just the surrounding section, on each.
• Keep donors on the page. A form that redirects to a third-party hosted page yanks people out of the experience you designed. An inline embed keeps them where you put them.
• Hand off cleanly. If the client manages the site after launch, pick a tool where they can change suggested amounts or copy without reopening Framer.

Keeping it on-brand and on-page

The whole reason a client chose Framer was the look. The donation form should not be the one ugly box on an otherwise gorgeous site, and it should not bounce donors to a page that looks nothing like what you built. An inline, brandable embed solves both.

KindLumen is a Stripe-powered form designed to drop into a Framer Embed and carry your client's branding straight through the giving moment, with recurring giving and branded receipts built in, and donations flowing to the client's own Stripe account. The features page shows what that looks like. If the client also wants monthly donors, how to add recurring donations to your website is a good follow-up.

Mistakes to avoid on Framer

• Using a marketplace form plugin for donations. It collects info, not money.
• Sizing the Embed component too short, so the form clips when it expands.
• Testing only at desktop width. Framer is responsive; the form has to work at every breakpoint and most donors are on phones.
• Picking a form you cannot brand, then watching it stick out on a carefully designed page.