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
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.
What's included
Features
About this section
Donation Form — Free HTML Donate Section With Amount Buttons

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
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, photo, labels, amounts and form in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
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.