Every template on this page was designed and is maintained in-house by uiCookies, so these are our own charity and nonprofit websites rather than a list of links to other studios. There is one for an international charity, one for a local community organisation, one built around a single fundraising appeal and a larger nine-page site for a charity that needs many pages from the start.
A good charity website has to earn trust quickly. Supporters want to see what the organisation does and where, what a gift pays for in plain terms, and how much of the money reaches the work. People who need help want to know, without effort, whether they qualify, where to go and what to expect. That means donation forms that explain amounts, honest financial figures, clear opening hours and copy that treats everyone with dignity.
All of them are static HTML, CSS and JavaScript with a live demo and a direct download, built on Bootstrap 5 with vanilla JavaScript and no jQuery except Openhands, which runs on the Bootstrap 6 alpha. They are free for personal and commercial use, attribution is optional but always welcome, and the full terms are at uicookies.com/license. None of the donation forms take payments until you connect them to a provider.
The templates
Wellspring
Wellspring is built for an international charity or NGO, shown as a fictional clean-water and sanitation charity. It leads with impact: count-up numbers, region tabs for where the charity works, programme cards with progress toward goals, and a long-form story. A 'where your money goes' donut chart on the home page and a five-year income and spending chart and table on the about page make the finances easy to check.
The donation page switches between one-off and monthly giving, says what each preset amount pays for, takes a custom amount, a tax-relief tick box and an in-honour or in-memory dedication, and keeps a live summary beside the form. Six pages in total, including stories, programmes and volunteering. Bootstrap 5 with vanilla JavaScript and no jQuery.
Kindred
Kindred is a warm, local design for a community nonprofit, shown as a neighbourhood food pantry. Its copy puts dignity first: what a visit is like, what the pantry will never ask, and what to bring if you have nothing. Opening hours drive a live open or closed status across the site, and a 'shelves running low' list tells donors what is needed this week.
Six pages cover getting help with a locations table and a referral form, a weekly volunteer shift calendar with role filters and spots left, donations of money or food with a shopping-list builder, events with add-to-calendar files, and an about page with annual numbers and finances. Bootstrap 5 with vanilla JavaScript and no jQuery.
Openhands
Openhands pairs a full charity home page with an appeal page that carries a target progress bar and a sticky donate rail. Its donate widget says what each amount buys as you choose it, and a fund-allocation section publishes real percentages, fundraising cost included.
Two pages, built on the Bootstrap 6 alpha, so choose it if you are comfortable with a pre-release framework that targets recent browsers.
Charity
Charity is a nine-page, photo-led non-profit site: home, about, causes, a single-cause page, donate, gallery, news, testimonials and contact, all sharing one design system.
It is jQuery-free with no plugins: carousels use CSS scroll-snap and the gallery lightbox is a few lines of vanilla JavaScript on Bootstrap 5. Pick it when you want many ready-made pages from day one.
Compare at a glance
| Template | Best for | Pages | Built on | Standout feature |
|---|---|---|---|---|
| Wellspring | International charities and NGOs | 6 | Bootstrap 5 | Spending chart and five-year financials |
| Kindred | Food banks and community groups | 6 | Bootstrap 5 | Volunteer shift calendar and live opening hours |
| Openhands | Single appeals and campaigns | 2 | Bootstrap 6 alpha | Appeal page with target progress |
| Charity | Small charities that need many pages | 9 | Bootstrap 5 | Causes list and single-cause page |
How to choose
Start with who the site serves. If most visitors are donors deciding whether to give to work in another country, Wellspring puts impact, programmes and financial transparency first. If most are neighbours who need help or want to volunteer this week, Kindred puts opening hours, eligibility and shift sign-ups first. For a single campaign with a target, Openhands is the focused option, and Charity gives you the most ready-made pages if you need causes, news and a gallery straight away.
Whichever you choose, connect the donation form to a payment or fundraising provider before launch, replace every sample figure with your own audited numbers, and keep photos of the people you help to those taken with consent.
Frequently asked questions
Are these charity templates free, including for a registered nonprofit?
Yes. All of them are free for personal and commercial use, which includes charities, nonprofits and the agencies that build their sites. Attribution is optional but always welcome. The full terms are at uicookies.com/license.
Do the donation forms take real payments?
No. The donation forms are front-end designs: they validate, show what a gift pays for and confirm the choice, but no money is taken until you connect them to a payment or fundraising provider. Each template says so on the page and in its documentation.
Which template suits a local community group rather than an international charity?
Kindred. It is written for a neighbourhood organisation, with opening hours, a volunteer shift calendar, a referral form and a list of items most needed this week. Wellspring and Openhands are better suited to charities raising money for programmes elsewhere.
Can I show where donations go?
Wellspring includes a spending donut chart on the home page and a five-year income and expenditure chart with a matching table on its about page, and Openhands publishes fund-allocation percentages. Replace the sample figures with the numbers from your own accounts.
Do I need to know how to code?
You need to be comfortable editing HTML: replace the sample text, swap the images and change colours in the CSS custom properties at the top of the stylesheet. The templates then upload to any static host such as Netlify, Cloudflare Pages or GitHub Pages.
