Giving or donation pages for churches, ministries, and non-profits can get lengthy. I hope this demo and download will help alleviate the frustration that comes when brainstorming how to shrink it.
Organizing all of the information in an easy-to-scan format is important for your web visitors — Especially in light of the financial crunch churches are in right now, and with many experiencing staff layoffs.
“Mockery is the greatest form of flattery!”
Recently, I had a ministry freelance client ask me to organize their website’s giving page. I immediately recalled what Eric Murrell did on Long Hollow’s giving page. It’s a great example of a simple way to present different avenues folks can give, using jQuery, without giving them a long page that gets ignored.
I spoofed it first, and then asked Eric’s permission to share it on MediaSalt. We’re cool .
Live Demo and Source Files
Here’s everything you’ll need to drag and drop this on your giving page. A little html/css knowledge is probably a good thing as you customize.
1. Live Demo
Check out this live demo of the stripped-down and basic html page example you’ll get in the zipped download (below). It’s made to drag into your existing site — Inheriting existing styles or you can add additional styles.
2. Source Files
Download complete zip file – Includes html with jQuery code, css additions, images, and image source files you can edit in Fireworks or Photoshop.
3. Additional Notes
- Link to the most recent version of the jQuery library in the head of the html of your page. See line 10 in the html file (in the download).
- In addition, make sure you grab the jQuery code found between lines 13 and 69, and paste them in the head of the html on your page, or create a js file your page can link to.
- Do whatever you want with this download, make it better, and share it with others!