Wellspring — Free Charity Website Template
Wellspring gives an international charity or NGO a calm, trustworthy website in deep water teal and jerrycan yellow, with Young Serif headings and Public Sans text. Supporters see the impact first: numbers, regions, programmes and a story told with consent. The donation form switches between one-off and monthly amounts, shows what each gift pays for and keeps a live summary beside it. Transparency is built in, with a spending donut chart on the homepage and a five-year income and expenditure chart and table on the about page.
Key features
- Homepage hero with a quick-give card that sends the chosen frequency and amount to the donation page, and works as a plain form without JavaScript
- Impact numbers band with count-up animation and a ‘how we work’ section
- Where-we-work region tabs with full keyboard support, country lists and people and water-point figures
- Programme cards and a programmes page with costs, checklists and progress bars toward goals, plus an animated strategy ring
- ‘Where your money goes’ donut chart drawn in SVG from a JavaScript array, linked to a legend that highlights on hover and focus
- Donation form with one-off and monthly toggle, preset amounts with impact descriptions, custom amount, tax relief tick box, dedication fields and a live gift summary; clearly marked as taking no payment
- Stories page with a region filter and live count, plus a full long-form story with a pull quote, a project facts box, a copy-link button and an SVG line chart
- About page with values, a history timeline, team and trustee initials avatars, policies, an annual report download card and a financials chart and table
- Volunteer page with role cards, fundraising events and a validated application form
- Inline SVG icons, no icon fonts, no chart libraries, and content visible without JavaScript
Best for
- International development charities and NGOs
- Water, sanitation, health or education non-profits that report on programmes and goals
- Charities that want monthly giving and spending transparency on their website
- Developers who want a jQuery-free Bootstrap 5 starter for a fundraising site
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 6 pages: index.html, donate.html, programmes.html, stories.html, about.html, volunteer.html
- Donation amounts, spending split, story chart and financial figures in small arrays at the top of js/main.js
- Inline SVG icons and charts; no icon fonts or chart libraries
- Colours and fonts set as CSS custom properties in css/style.css
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Replace the charity name, copy and photos in the HTML files and the img/ folder. Colours and fonts are custom properties at the top of css/style.css. Donation amounts, impact lines, the spending split and chart figures are arrays at the top of js/main.js. The donation form takes no payment and the other forms send nothing, so connect them to a payment provider or form service. Upload the folder to any static host.
Frequently asked questions
Is Wellspring free for commercial use?
Yes. You can use it for personal and commercial projects, including client sites for charities. Attribution is optional but always welcome. Full terms are at uicookies.com/license.
What is Wellspring built with?
Bootstrap 5.3.8, one stylesheet and one vanilla JavaScript file, with no jQuery or other libraries. Icons and the donut, line and bar charts are inline SVG drawn from small data arrays.
Which pages are included?
Six: a homepage, a donation page, a programmes page with progress toward goals, a stories page with a full story, an about page with team, governance and financials, and a volunteer page with roles, events and an application form.
Does the donation form take payments?
No. It validates the gift and the donor’s details, updates a live summary and shows a thank-you state, and the page says clearly that no payment is taken. Connect it to your payment provider or embed their checkout before using it for real donations.
Can I change the donation amounts and what they pay for?
Yes. The one-off and monthly amounts and their impact lines are in the DONATE_AMOUNTS array at the top of js/main.js, and the quick-give card uses QUICK_IMPACT. Edit the numbers and text and the form and summary update. A static set of amounts in donate.html shows when JavaScript is off.
