webdevpuneet.com

Donation Form

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Donation Form — Free Website Section Template

Forms · v1.0.0 · Updated 2026-11-12 · Responsive · GSAP animation · HTML, React & Vue

CategoryForms
Tagsdonationnonprofitcharityamountmonthlyformfundraisinglight
Updated October 20, 2026

Extend with AI

Take This Section Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

One-time or monthly switch (a segmented radio control)
Amount buttons with a short impact note each, from an editable list
Custom amount field that clears and is cleared by the buttons
Donor name, email and an optional dedication or message
Optional “cover the processing fees” checkbox
Photo beside the form (optional)
Success and error messages; hidden spam-trap field
Theme colours and fonts; export HTML, ZIP, React or Vue

About this section

Donation Form — Free HTML Donate Section With Amount Buttons

Donation Form: A fundraising form for charities and causes: a one-time / monthly switch, a row of amount buttons that each say what the gift does, a custom amount field (choosing one clears the other), donor name and email, an optional note and a “cover the fees” checkbox. It collects the donor’s choices and posts them to Formspree, Basin, Getform or your own server. It does not process payments itself: connect your payment link or follow up with an invoice.

Donation Form is a fundraising section for charities, churches, community groups and creators. A switch chooses one-time or monthly, a row of amount buttons each says what that gift does, a custom amount field covers everything else, and a few details (name, email, an optional dedication) finish the job. A “cover the fees” checkbox is optional.

Impact notes beat bare numbers

Each amount button carries a short note: “$25 · school supplies for a child”. People give more, and more confidently, when they can see what a gift does. Edit the amounts and notes in a list. Choosing a button clears the custom amount and typing a custom amount clears the buttons, so there is never a conflicting answer.

Important: it does not take payments

This section collects the donor's choices and posts them to Formspree, Basin, Getform or your own server. It does not charge a card. Connect it to your payment provider by sending the visitor to a hosted checkout or payment link after submitting, or by following up with an invoice or direct-debit mandate. Every form posts to the address you paste into "Form URL" (Formspree, Basin, Getform or your own server), shows a success message, shows an error message when something fails and contains a hidden spam-trap field. Without JavaScript it is an ordinary form post.

Design

A photo on the left (optional) gives the appeal a human face; the green theme and rounded cards are editable. Pair it with the Stats Counters to show impact and the Testimonials section for stories from people you have helped.

Why use it

Why Use the Donation Form

💚
Show the impact
Notes on each amount connect a gift to a result.
🔁
Monthly giving
A one-click switch makes recurring support easy to choose.
🧭
No confusing choices
Picking a button and typing a custom amount never conflict.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, photo, labels, amounts and form in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏘
Charities and community projects
Show what $10, $25 and $50 achieve, add a photo of the people you help and collect gift details with a clear thank-you.
⛪
Churches and faith groups
Offer weekly or monthly giving with a note on how funds are used, and a dedication box for memorial gifts.
🎬
Creators and open-source projects
Ask supporters for a one-time tip or monthly sponsorship, then link to your payment page after they submit.
🏫
School and club fundraisers
Run a campaign page with suggested amounts, a clear goal and a personal message from the organisers, so parents and supporters can give in a few taps from a phone.

Got questions?

Frequently Asked Questions

No. It collects the donor’s choices and posts them to your form endpoint. To take payment, redirect to a hosted checkout or payment link, or follow up with an invoice or direct-debit request.

Choosing a button clears the custom field, and typing a custom amount unchecks every button, so exactly one amount is sent.

It posts frequency=once or frequency=monthly. Your system can use it to set up a recurring donation.

Yes. The amounts are plain text in the list (for example €25 or £25), and the custom field placeholder is editable.

Add a Stats Counters section above the form, or fork this one into My Code and add your own progress element.

It saves an editable copy of your Donation Form in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.