Pawprint — Free Animal Rescue Website Template
Pawprint gives an animal rescue a site built around getting animals adopted. Visitors can search from the hero, filter 26 adoptable dogs, cats and rabbits by species, age, size and who they get along with, save favourites to a shortlist and open a profile with photos, temperament and medical notes. A four-step application with a progress bar and a review screen takes it from there. A second page handles one-time or monthly donations with live impact text, plus fostering, volunteer shifts and a supplies wishlist.
Key features
- Three pages: home, adopt (26 sample animals) and get involved
- Hero quick search by species and age that opens the adopt page already filtered
- Adopt listing with search, species, age, size and good-with filters, sorting, removable filter chips and shareable URLs
- Animal detail <dialog> with photo gallery, temperament meters, medical checklist, fee and an apply button
- Four-step adoption application with a progress indicator, per-step validation, a review screen and a success state
- Heart shortlist saved in the browser, with a count in the header and a shortlist-only filter
- Donation form with one-time or monthly giving, amount chips, a custom amount, a cover-the-fees option and live impact text
- Volunteer roles filtered by weekday, a foster sign-up form and a supplies wishlist that builds a copyable drop-off list
- Count-up impact numbers, adoption-day events with add-to-calendar (.ics) buttons and a newsletter form
- Palette and fonts as CSS custom properties; content stays visible without JavaScript and motion respects prefers-reduced-motion
Best for
- Animal rescues and shelters
- Dog and cat adoption charities
- Foster-based rescue networks
- Humane societies and animal welfare nonprofits
- Developers who want a jQuery-free Bootstrap 5 nonprofit starting point
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 3 pages: index.html, adopt.html, get-involved.html
- 26 sample animal profiles with public-domain photos, several with multi-photo galleries
- Baloo 2 and Figtree from Google Fonts; colours as CSS custom properties
- Browser-validated forms: adoption application, donation, foster, volunteer and newsletter
- 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; there is no build step. Edit the copy in the three HTML files and replace the photos in img/ with your own animals, keeping the file names or updating each card’s src and data-photos attributes. Colours and fonts are custom properties at the top of css/style.css. The forms only validate in the browser, so connect them to a form service or payment provider before launch. Deploy to any static host.
Frequently asked questions
Is Pawprint free for a real rescue’s website?
Yes. Pawprint is free for personal and commercial projects, including a working rescue or shelter site. Attribution is optional but always welcome. The full terms are at uicookies.com/license.
What is Pawprint built with?
It uses Bootstrap 5.3.8 for the grid, the collapsing navigation and the filters panel on phones, and plain vanilla JavaScript for everything else. There is no jQuery and no other JavaScript library. Icons are inline SVG and the two fonts load from Google Fonts.
Which pages and sections are included?
There are three pages. The home page has a hero with quick search, featured animals, adoption steps, impact numbers, foster and volunteer panels, success stories, a donate strip, events and a newsletter. The adopt page lists 26 animals with filters, detail dialogs, a fee table and a four-step application, and the get-involved page covers donating, fostering, volunteering, a supplies wishlist and sponsorship.
Do the forms and the donation form work out of the box?
They validate in the browser and show a success message, but they do not send data or take payments. Connect the adoption, foster, volunteer and newsletter forms to a form service or your own backend, and point the donation form at your payment provider.
How do I add or remove an animal?
Each animal is one article element in adopt.html. Its data attributes drive filtering and sorting (species, age group, size, good with kids, cats and dogs, arrival date and fee), and data-photos lists the gallery images. Copy a card, change its text and attributes, and add the name to the animal list in the application form; the filters, result count and detail dialog pick it up automatically.
