When someone visits your nonprofit’s website and is wowed, inspired, brought the brink of tears by all the awesome work your team does in service to your community (this happens all the time, right?), you want to make it as easy as possible for them to find your donate button, click it, and make a gift.
Because the reality is this: Even the most gung-ho donor can be frustrated by a clunky user experience. So, when it comes to your website visitors who are only moderately jazzed to give (which actually does happen all the time), they’ll need a good deal more help following through on their impulse to give.
There’s plenty you can do to optimize your online donation experience, and your donate button stands as a critical first step in that journey. In this article, we’ll cover eight donate button best practices your nonprofit can put into action to boost your online giving.
Build Your Donate Button Using These 8 Best Practices
A donate button is more than a simple link to your nonprofit’s donation form: It’s actually an important part of your organization’s fundraising strategy. A button that follows the eight best practices laid out below will perform better (i.e. it will bring in more donations) than one that’s just slapped up with zero thought.
When designing and placing your donate button, keep in mind the important role it plays in online giving—and make sure you implement these donate button best practices!
1. Prioritize Simplicity and Clarity
Resist the temptation to over complicate your donate button design. Opt for a clean, minimalist approach with clear and concise text that instantly conveys the desired action. If your button design is anything more complex than words on a solid-colored background, you’ve gone astray.
Use easy-to-understand language and avoid jargon or complex phrases. Try A/B testing different calls to action (CTAs) on your button to see which one works best. To read more about crafting strong CTAs, skip to #4.
2. Enhance Visual Appeal
While simplicity is paramount, don’t underestimate the visual impact of your donate button. Utilize contrasting colors that stand out against your website’s background and align with your organization’s branding.
Be sure to also follow accessible color contrast guidelines within the button itself; otherwise, your text won’t be readable. Follow the Web Content Accessibility Guidelines’ recommendation of a 4.5:1 color contrast—although for big text like you might find a donate button, a ratio of 3:1 might suffice.
Not sure if your chosen colors match that ratio? Use this free color contrast checker from the ADA. You can read more about nonprofit website accessibility in the article below:
3. Leverage Color Psychology
You thought we were done talking about colors? Ha! We were just getting started.
Remember: Colors can evoke specific emotions and even influence behavior. When picking colors for your donate button, choose colors that resonate with your organization’s mission and connect with your target audience.
For instance, green is often associated with growth and sustainability, while blue conveys trust and dependability. Meanwhile, a bright red button will signal “stop” and may lead to a decrease in clicks if you’re not careful (and if red isn’t one of your nonprofit’s colors).
Of course, the colors you choose for your donate button should also be aligned with your nonprofit’s brand. If your organization’s brand guide doesn’t have any colors that fit the bill, it might be time for a brand refresh.
When deciding on new brand colors, ask yourself: What emotions do you want people to associate with giving to your nonprofit? Then pick colors that evoke those feelings.
4. Craft Compelling Call-to-Action (CTA) Text
Your CTA text should be clear, concise, and persuasive. Employ strong action verbs like “Donate,” “Support,” or “Make a Difference.” The more specifically your language of your CTA speaks to your mission—”Support a Pet Today” versus the more generic “Give a Gift”—the more likely a donor is to answer your call.
For more information on crafting compelling nonprofit CTAs, check out this blog post:
5. Ensure Prominent Placement
Strategically position your donate button on your website, making it easy for visitors to locate and engage with. Your button should be available on every single page, and sometimes multiple times on the same page, where appropriate.
Placing your donate button on your primary navigation bar will ensure it appears on a prominent spot on every page of your site. When in doubt, place it in the upper right-hand corner, as that is standard practice and your visitors will be familiar with it.
You should also place donate buttons on key website pages, like the pages that explain your mission and programs, with the language tailored to each specific instance. “Give to Our Food Pantry” on your food pantry page is more inspiring than a repeat of “Give Now.”
6. Optimize for Mobile Devices
Everybody’s on their phones these days! It’s true! But, hackneyed observational comedy bits aside, it really is true: Mobile devices accounted for between 55% and 60% of all web traffic in 2023. If your donate button isn’t optimized for mobile, you’re missing out!
So how do you do that? Employ responsive design principles to guarantee your button remains visible and functional on all screen sizes. When you’re adding a button to your website, test, test, and test again across all the different types of devices you can assemble.
Here’s an additional tip: Buttons are actually easier to navigate on mobile devices than hyperlinks. When you’re including CTAs on a page, opting for buttons instead of hyperlinks will help users better navigate your site.
7. Streamline the Donation Process
Once donors click your donate button, provide them with a seamless and secure donation experience. Here are a few ways to do that:
Use a Multi-Step Form: If you have a donation form that asks for everything on a single page, that form will feel longer than a form that asks for the same amount of information on multiple separate pages. Once a donor has completed the first section—which might only be a few fields long—they’ll feel more committed to completing the form and making their gift.
Only Ask For What You Need: Donor data is an amazing, wonderful thing, but a donation form is not the place to collect it. Ask for only the information that you need to complete the transaction. But don’t worry, you can use a follow-up donor survey for all the information your heart desires, like their astrological sign, favorite dessert, and most frightening recurring nightmare (clowns on ice skates yodeling ABBA, obviously).
Include Security Indicators: Your donation form is secure. Your donors’ information is safe with you. And it helps to remind them of that! Including something as simple as a small padlock icon on your form can have a profound effect on your conversion rates. As a side note: If your donation form isn’t secure, then that’s priority number one. Stop reading this blog and go fix that now.
You can learn more about donation form best practices—and how those practices are built into Neon CRM—in this awesome article:
8. Continuously Test and Improve
Adopt a data-driven approach to optimize your donate button performance. Regularly A/B test different button designs, CTA text, and placement strategies. Analyze donation data and donation form conversion rates to identify areas for improvement.
While all of these best practices are smart to adopt, what works best for your organization and your supporters might be different than what works for another nonprofit. The only way to optimize your donate button and online giving forms is to test.
A Guide to Optimize Your Nonprofit’s Website
Most visitors who make a donation on your website will interact with your donate button. That’s why creating a button that’s simple, dynamic, and well-optimized, with a compelling CTA, will set you up for long-term fundraising success online.
But a great donate button is only one small part of what makes an awesome nonprofit website. Re-doing your organization’s site can feel daunting—especially if it’s been a while since your last overhaul. That’s why we’ve created a full website optimization action plan that will walk you through the process step by step. Download the full guide today!
Join the discussion in our Slack channel on connected fundraising
