How To Make a Donation Page: Tips and Fundraising Software

Table of Contents

Why is a well-designed donation page important?
Donation page management: 8 best practices

<p>With nonprofit operations relying heavily on the digital fundraising sphere, it’s important to have an online presence, and this all starts with an eye-catching donation page.</p>  <p>Your online donation form is the core of your digital fundraising strategy. You’ll link to and drive traffic back to this page across all of your campaigns and marketing, which means having one that’s well-designed is crucial to your success. Making a donation page that’s conversion-optimized is often easier said than done.</p> <p>Today, there are several <a href="https://www.g2.com/categories/fundraising" rel="noopener" target="_blank">fundraising software</a> to attract and manage funding and donation processes. However, it is also essential to understand why it is important and what best practices are associated with building donation pages.</p> <div class="lh-featured-snippet"> <h2>What is a donation page?</h2> <p style="font-weight: normal;">A donation page is an online form on a nonprofit's website that supporters may use to make a financial contribution to the organization's cause.</p> </div> <p>Donation pages make it easy to donate funds without the need for travel, envelopes, or stamps. Because of the minimal barrier to entry, any supporter with a computer, mobile device, or internet connection may donate from the comfort of their own home.</p> <a id="donation-page-importance" data-hs-anchor="true"></a> <h2>Why is a well-designed donation page important?</h2> <p>An eye-catching, navigable donation page is a must for any nonprofit. It’s the core of your digital fundraising strategy, and it’s where prospects go to show their support for your cause when online. Further, it empowers donors to connect with your organization the moment they feel inspired.</p> <p><span>If you’re thinking, <em>do I really need a donation page?</em> The answer is always yes. <span style="font-weight: bold;">Here’s why</span>: </span></p> <ul> <li><span>You are opening up the door for anyone anywhere to donate to your cause at any time.</span></li> <li><span><span>Donation pages pair exceptionally well with your fundraisers.</span></span></li> <li><span><span>They improve the donor experience.</span></span></li> <li><span><span>They increase donations.</span></span></li> </ul> <p><span style="font-style: normal;">Overall, this page is the underlying foundation of your online giving strategy and plays a significant role in developing a smooth donation process. If it’s disorganized, overwhelming, or otherwise challenging to complete, it defeats its own purpose: increasing donations.</span><span style="font-style: normal;"> In other words, you’ll miss out on much-needed financial support.</span></p> <a id="donation-page-best-practices" data-hs-anchor="true"></a> <h2>Donation page management: 8 best practices</h2> <p>There are several steps you can take without help from a professional developer – so long as you’re backed by the right <a href="https://www.g2.com/categories/donor-management" rel="noopener" target="_blank">donation software</a>. We’ll walk through eight easy tips that will set your donation form up for maximum success.</p> <p>Remember, your donation page can be the determining factor as to whether or not someone donates, so putting in the effort upfront will pay off in the long run.</p> <p>Ready to make your nonprofit donation page stand out and improve your <a href="https://blog.donately.com/online-fundraising/" target="_blank" rel="noopener nofollow">online giving strategy</a>? Let’s dive in.</p> <h3>1. Make sure it's mobile-friendly </h3> <p>In the Smartphone era, targeting mobile devices is super essential.</p> <div class="lh-callout"> <h2 class="stat-large">57%</h2> <p>of <span>nonprofit website traffic comes from mobile devices</span>.</p> <p><em>Source: <a href="https://doublethedonation.com/nonprofit-fundraising-statistics/" rel="nofollow noopener" target="_blank">DoubletheDonation</a></em></p> </div> <p>Mobile responsiveness means that your donation page will adjust to fit the user’s screen size, no matter if they’re visiting on a smartphone, tablet, laptop, or desktop. Optimizing your content for mobile users means that you can:</p> <ul> <li><strong>Avoid poor formatting.</strong> From your images to the form’s fields, every element will reformat and look clean with a responsive design.</li> <li><strong>Make it easy to interact with content.</strong> Users won’t have to pinch, zoom, or rotate their devices to view the content and submit their donations.</li> </ul> <p>Your best bet is to go with a donation form that offers automatic mobile responsiveness. This way, you won’t have to develop multiple versions of your webpage for mobile users, tablet users, and desktop users. Take a look at this donation page example that offers a fully responsive experience:</p> <div><img src="https://learn.g2.com/hubfs/Google%20Drive%20Integration/Donately%20x%20G2%20Guest%20Post%20Brief%20Donation%20Page.jpeg" alt="mobile friendly donation page"></div> <div> </div> <p>Beyond featuring a responsive design, your donation page can incorporate other mobile-friendly best practices to fully optimize the mobile experience. For instance, you should aim to quicken the page load time. After all, as page load time goes from one to ten seconds, the probability of a mobile user bouncing<a href="https://business.google.com/us/think/" target="_blank" rel="nofollow noopener"> increases by 123%</a>. Account for this by reducing the number of fields, compressing images, and removing excessive coding.</p> <p>Further, you’ll want to keep content to a minimum and simplify forms. Otherwise, your mobile users will be endlessly scrolling and will be more likely to wind up leaving your donation page. Overall, design your donation page with a mobile-first perspective, and it’ll pay off in the long run.</p> <h3>2. Adhere to accessibility guidelines</h3> <p>When making a donation page, you’ll want as many people as possible to be able to see and interact with it. This means ensuring your design is accessible to those who have disabilities or impairments. Otherwise, you risk excluding them and missing out on their support.</p> <p>Developed in 2018, the <a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="nofollow noopener">Web Content Accessibility Guidelines (WCAG) 2.1</a> outline several requirements that websites should adhere to. This way, people with diverse abilities are able to participate equally on the web. While there are numerous requirements, most are easy to implement without help from a professional web developer.</p> <p>With your nonprofit donation page, you’ll want to accomplish the following:</p> <ul> <li><strong>Incorporate high-contrast colors. </strong>WCAG 2.1 guidelines require a minimum contrast ratio of 4.5:1 for text and images of text. For reference, black text on a white background has the highest contrast ratio, which is 21:1.</li> <li><strong>Clearly label fields outside of the field itself.</strong> This is particularly useful for those who are using screen reader technology. Screen readers only read visible text on the form, so only using placeholder text<em> within</em> the field won’t give any indication as to what information is required.</li> <li><strong>Note which fields are required. </strong>Typically, this is done by adding a red asterisk or another signifier. Simply changing the color of the label on required fields is not sufficient because those with low vision may not be able to see this.</li> </ul> <p>Of course, these are only a few steps you can take toward better accessibility when making your donation page. You’ll find that many<a href="https://www.dnlomnimedia.com/blog/nonprofit-website-accessibility/" target="_blank" rel="nofollow noopener"> nonprofit compliance tips </a>are easy to implement and can provide immense value to your prospects.</p> <h3>3. Brand your form to match your website</h3> <p>It is vital to create a seamless transition from any other page on your site to your donation page to ensure a good user experience.</p> <p>To start, ensure your tools allow you to embed your donation form directly into your website. Your prospects should <em>never</em> have to leave your site to contribute to your cause, because redirecting them to a third-party site may appear untrustworthy. Then, they won’t feel comfortable inputting their payment information, and you may lose their support altogether.</p> <p>From here, you’ll need to customize your donation page to match the rest of your site. According to <a href="https://morweb.org/post/donation-page-design-tips-examples" target="_blank" rel="nofollow noopener">Morweb’s donation page guide</a>, “visual consistency maintains the element of trust for your donors as they navigate on your website. Creating a seamless transition using effective brand-oriented visuals is key to keeping this trust.”</p> <p>To maintain visual consistency on your donation page, try out these suggestions:</p> <ul> <li><strong>Use your nonprofit’s color scheme.</strong> As part of your branding strategy, you likely utilize two or three colors consistently across your marketing materials. This should go for your donation page as well.</li> <li><strong>Prominently feature your logo.</strong> Your logo is the most recognizable element of your brand. Typically, organizations feature their logo in the upper left-hand corner of the website. However, anywhere will work fine as long as it’s large and located in a prominent place.</li> <li><strong>Add an eye-catching banner image.</strong> Choose a single compelling picture that represents your cause and the community it serves. Any more than that will distract your visitors from the task at hand. This may also help to remind individuals why they’re giving to your cause. For instance, an animal shelter may feature a picture of one of their furry residents.</li> </ul> <p>Take a look at this donation page, which exemplifies the power of strong branding through imagery, a legible color scheme, and text describing the cause:</p> <div><img src="https://learn.g2.com/hubfs/Google%20Drive%20Integration/Donately%20x%20G2%20Guest%20Post%20Brief%20Donation%20Page-Oct-22-2020-10-14-11-32-PM.png" alt="donation landing page" width="600" style="width: 600px; display: block; margin: 0px auto;"></div> <div> </div> <p>When donors click through to your donation page, they shouldn’t feel like they’ve been handed off to a stranger to collect their money. A branded page will reassure them and make them feel more at ease when giving, helping you to drive more donations to success.</p> <h3>4. Feature suggested giving amounts</h3> <p>With the transition to digital giving, nonprofits have recognized the power of suggested donations. When implemented strategically, suggested giving amounts can directly impact your total donation revenue. This works because of two primary reasons:</p> <ul type="1"> <li>Donors use suggested giving amounts as a reference as to how much others are donating. Then, they use this as a guide to determine how much they should give.</li> <li>Giving is simply easier when all donors have to do is click a button.</li> </ul> <p>Even though you can use suggested giving amounts to influence donors to give more, you can only nudge them so far. In other words, if your current average online donation amount is $20, it wouldn’t be reasonable to ask them for a $500 donation.</p> <p>Instead, set options that are marginally higher than what your average donor contributes. For instance, if last year’s average donation was $20, you might consider suggesting donations of $10, $25, $50, and $100. That way, prospects who may intend to contribute $20 may opt for the slight increase to $25. Similarly, your donors on the lower end may also bump up their contributions to reach that $10 threshold.</p> <p>Over time, you may consider adjusting these amounts as your average donation increases. This is where donation software that automatically gathers insightful KPIs comes in handy. This way, you won’t have to worry about gathering these statistics manually.</p> <p>Take a look at this donation page example, where there are set donation amounts of $25, $500, and $2,500 to encourage their prospects to give more:</p> <div><img src="https://learn.g2.com/hubfs/Google%20Drive%20Integration/Donately%20x%20G2%20Guest%20Post%20Brief%20Donation%20Page-1.png" alt="donation page example" width="600" style="width: 600px; display: block; margin: 0px auto;"></div> <div> </div> <p>Notice how they feature the buttons prominently. As an added bonus, their donation page is also mobile-responsive, meaning mobile donors can also make use of the giving buttons! Overall, implementing this approach simplifies the process of asking for higher donations from your supporters. This minor change can make a significant difference in your fundraising.</p> <h3>5. Conduct A/B testing </h3> <p>A/B testing (also called split testing or bucket testing) is a user experience methodology in which a web developer compares two versions of a web page to figure out which variation performs better. The end goal is to determine what elements drive conversions, which are donations in this case.</p> <p>To conduct an A/B test, you’ll want first to set up a control donation page. Then, decide which element you want to test. Then, set up a second donation page with that variable changed and drive traffic to both forms. For instance, you may split your email list in half and direct them toward each page. Finally, track completion rates across both pages, calculated by dividing the number of donations by the number of visitors. This process becomes extremely easy with <a href="https://www.g2.com/categories/a-b-testing" rel="noopener" target="_blank">A/B testing tools</a>.</p> <p>If you notice there’s a considerable difference between the two, the winner should then become your control donation page. Then, you can repeat the process and refine your donation page even further.</p> <p>Take a look at how slight tweaks in the following donation page example led to a considerable difference in conversions:</p> <div><img src="https://learn.g2.com/hubfs/Google%20Drive%20Integration/Donately%20x%20G2%20Guest%20Post%20Brief%20Donation%20Page-Oct-22-2020-10-14-12-21-PM.png" alt="A/b testing" width="600" style="width: 600px; display: block; margin: 0px auto;"></div> <div> </div> <div class="lh-callout"> <h4>A/B testing elements</h4> <p>If you’ve never conducted an A/B test, it can be tricky to determine what to test. For a better idea, there are several elements to consider in an A/B test on your nonprofit donation page, some of which include:</p> <ul> <li><strong>The banner image:</strong> What type of photo inspires people to complete the form?</li> <li><strong>Suggested giving amounts:</strong> Do higher suggested gifts lead to higher donations?</li> <li><strong>Copy:</strong> Does the tone or the length of the copy have an impact on donations?</li> <li><strong>Layout</strong>: Does a one-column form drive more completions than a two-column form?</li> <li><strong>Testimonials:</strong> Does a testimonial from another supporter impact donations in any way?</li> </ul> </div> <p>While there are several elements you do want to test, there are also several elements you <em>don’t</em> want to spend time and effort on. For instance, avoid testing the following:</p> <ul type="1"> <li><strong>Several variables at a time.</strong> When you see different completion rates, you won’t know which element prompted this.</li> <li><strong>Images that are too similar:</strong> This likely won’t impact results.</li> <li><strong>Copy that’s similar in tone and length:</strong> Your donors likely won’t notice the slight difference.</li> </ul> <h4>When to conduct an A/B test</h4> <p>After a period of time, you can determine which elements impact completion rates. Note that the best time to conduct an A/B test is when you know you’ll have an increase in traffic. For instance, set it up during the following times:</p> <ul> <li>When you’re conducting an email campaign</li> <li>Toward year-end giving</li> <li>During a fundraising event</li> <li>When your organization is receiving media attention</li> </ul> <p>Higher traffic means you’re more likely to witness statistically significant results. Otherwise, you’ll have to wait for longer to see results.</p> <h3>6. Offer multiple secure giving options </h3> <p>As a nonprofit organization, you’re likely gathering a massive amount of data from your donors. Because of this, it’s essential that you take sufficient security precautions, <em>especially</em> when it comes to collecting payment data.</p> <p><a href="https://www.g2.com/articles/cybersecurity-statistics" target="_blank" rel="noopener">Cyberattacks are the fastest-growing crime</a> in the U.S. and are growing by more than 350 percent every year. If it’s not apparent that your donation page is secure, donors won’t trust the page and will likely abandon the process.</p> <p>Secure giving starts with a p<span style="font-weight: normal;">ayment card industry (</span>PCI) compliant payment processor, which simply means that it follows industry protocol for protecting data with <a href="https://www.g2.com/categories/expense-management/f/pci-regulation-compliant" rel="noopener" target="_blank">PCI regulation</a>. Further, this platform should also authenticate and encrypt payment information using secure socket layer (SSL) technology, which establishes a secure connection between the server and the user’s web browser. This way, both your staff and your donors can rest assured that all data is protected.</p> <p>With the help of your secure donation processor, you should be able to accept a number of different payment options, so donors can select the option that best suits their needs. For instance, ensure you can accept the following payment methods:</p> <ul> <li>Debit/credit card</li> <li>ACH direct deposit</li> <li>PayPal and other popular payment methods</li> </ul> <div>From here, you’ll want to ensure these options are abundantly clear by displaying the relevant icons on your donation page. By offering these choices and reassuring donors that their payment information is protected, you’ll give them peace of mind when donating.</div> <h3>7. Encourage recurring gifts </h3> <p>One of the best (and easiest) ways to maximize donation revenue is by encouraging recurring donations on your <a href="https://blog.donately.com/donation-page/" rel="noopener nofollow" target="_blank">donation page</a>. This is because donors can simply fill out your donation form, opt-in, and continue giving without ever filling out the page again.</p> <p>According to <a href="https://nonprofitssource.com/online-giving-statistics/" target="_blank" rel="nofollow noopener">Nonprofits Source</a>, donors that set up recurring donations give an astonishing 42% more each year compared to one-time donations. In other words, recurring gifts are <em>not</em> something you want to overlook, and during the giving process is the optimal time to promote them.</p> <p>By encouraging recurring gifts on your donation page, you’ll easily increase visibility and compel donors to sign up for the program. Make the most of this opportunity by incorporating the following best practices:</p> <ul> <li><strong>Allow donors to manage their own giving. </strong>Provide them with a platform where they can adjust their giving amount and frequency without your staff overseeing the process.</li> <li><strong>Follow up whenever a donor’s payment is declined.</strong> Quickly reach out to rectify missed payments that were caused by declined or expired cards.</li> <li><strong>Make the option clear.</strong> Adding recurring options directly onto your donation form will maximize visibility. Check out the following donation page example that accomplishes exactly that:</li> </ul> <div><img src="https://learn.g2.com/hubfs/Google%20Drive%20Integration/Donately%20x%20G2%20Guest%20Post%20Brief%20Donation%20Page-2.jpeg" alt="donation page example" width="600" style="width: 600px; display: block; margin: 0px auto;"></div> <h3>8. Fundraising software</h3> <p>Donation pages are often created by nonprofits with the assistance of an online fundraising platform provider. These platforms not only make the process easier but also provide resources for creating personalized pages, such as templates and best practices. Organizations may then embed these pages into their websites and disseminate the link to the page through other channels such as email and social media.</p> <div class="lh-callout"> <h4>Top 5 fundraising software:</h4> <ul> <li><a href="https://www.g2.com/products/network-for-good/reviews" rel="noopener" target="_blank">Network For Good</a></li> <li aria-level="1"><a href="https://www.g2.com/products/givebutter/reviews" rel="noopener" target="_blank">Givebutter</a></li> <li aria-level="1"><a href="https://www.g2.com/products/bloomerang/reviews" rel="noopener" target="_blank">Bloomerang</a></li> <li aria-level="1"><a href="https://www.g2.com/products/snap-raise/reviews" rel="noopener" target="_blank">Snap! Raise</a></li> <li aria-level="1"><a href="https://www.g2.com/products/onecause/reviews" rel="noopener" target="_blank">OneCause</a></li> </ul> <p><em>*Above are the top 5 fundraising as per G2’s Fall 2023 Grid® Report.</em></p> </div> <h4><a href="https://ai.g2.com/bots/default" rel="noopener" target="_blank"><img src="https://learn.g2.com/hubfs/Click%20to%20chat%20with%20G2s%20Monty-AI-1.png" width="600" height="375" loading="lazy" alt="Click to chat with G2s Monty-AI" style="height: auto; max-width: 100%; width: 600px; margin-left: auto; margin-right: auto; display: block;"></a></h4> <h4>Bring life to your ideas </h4> <p>As you now know, building a donation page takes a good bit of time in order to fully optimize it. However, doing so is imperative to your success within <a href="https://blog.donately.com/virtual-fundraising/" target="_blank" rel="noopener">the online fundraising space</a>.</p> <p>From mobile friendliness to recurring gifts, there are countless ways you can make the online giving process as smooth as possible. With the help of powerful donation software, you’ll be well on your way to connecting with donors and boosting conversions. </p> <p><span style="font-weight: bold;">Intrigued to get started? Learn a little more about </span><a href="https://www.g2.com/articles/crowdfunding" rel="noopener" target="_blank" style="font-weight: bold;">crowdfunding</a><span style="font-weight: bold;"> today. </span></p>

Andrew Berry

Andrew Berry is the Head of Marketing and Customer Success at Donately. After getting involved with nonprofits at a young age, he discovered a passion for helping the organizations that are making the world a better place. In his spare time, you'll find him cooking up dinner, playing with his dog, or cheering on Boston sports teams.

How To Make a Donation Page: Tips and Fundraising Software

Recommended Articles

How to Ask for Donations (+Tips for Donor Retention)

by Dominick Duda

How to Write A Donation Thank-You Letter (With 4 Examples)

by John Killoran

Donor Retention: 5 Strategies to Earn and Retain More Donors

by Gerard Tonti

How to Ask for Donations (+Tips for Donor Retention)

by Dominick Duda

How to Write A Donation Thank-You Letter (With 4 Examples)

by John Killoran