Well-designed Nonprofit Donation Forms Help Raise More Funds

The following article was originally published on Creative Suitcase’s blog. It is republished here with permission.

A well-designed donation form is an easy-to-overlook, but critical component of an effective fundraising program. We all understand how important it is to get a user to our online donation form. What we sometimes fail to understand is that the design and experience of the form itself can be a major factor in whether or not our users actually complete the donation form, and whether or not they’d consider doing it again.

When they’re done right, online donation forms can elevate our users’ experience from a clunky, painful, overwhelming test of patience into a swift, effortless, and enjoyable act of sharing.

What follows are some broad tips and best practices that we try to implement in our projects. We continue to search for ways to make the form completion process easier and more engaging, and we recommend that any nonprofit that wishes to increase their online donor engagement do the same.

Clear a Path

This may seem obvious, but a donation form—no matter how well-designed—isn’t going to produce results if there isn’t a clear path to it for a user to follow. We want access to our donation page to be omnipresent without being annoying. We want our users to want to engage without being assaulted by calls-to-action (CTAs).

Making CTAs that draw attention without becoming pestering eyesores is a balancing act. We don’t want our donate messages to be a torrential downpour. We want them in healthy, measured bursts.

  • Design large “Donate” buttons that stand out on the page. Be consistent with the placement and style of your “Donate” buttons, and try to use a bold color that is unique from the rest of the design to grab a user’s attention.
  • Place “Donate” CTAs strategically, in places where people are more likely to click them. Avoid cluttering your pages with an overwhelming amount of “Donate” CTAs. Instead, focus on placing them strategically—near a particularly moving story, in the context of some powerful results-based metrics, or in a place where people expect to find calls-to-action, like in the header or footer.
  • Test the exact language of the button. While “Donate” is universally recognized and straightforward, a more emotional call-to-action like “Lend a hand” or “Bring hope to those in need” might be more appropriate in certain situations and prompt more action. Don’t be afraid to test button language (or color), and adjust on the fly based on the results.

Make It Quick, Painless—and for Pete’s Sake—Mobile-friendly

In today’s technological landscape, a responsive website isn’t just a nice-to-have, it’s a must-have. This goes doubly for a donation page, because we’re often trying to engage our audience at a moment when they aren’t at their computer but do have their phone handy. More and more, users are viewing our donation pages on their smartphones or tablets. If our websites aren’t optimized to work well on a small screen, we’re missing out on a large—and ever-growing—percentage of potential donor traffic.

The best thing we can do to keep our donation pages mobile-friendly is to simplify them. We should try to strip away as much non-required content from the form as we can, and focus on getting a user through the form fast and error-free.

  • Break lengthy forms down into smaller pieces. An easy way to make a large form less intimidating is to display it in segments (“Donor information” and “Payment information,” for example), whether it’s several segments arranged on one page or several individual segments displayed one-per-page. If you can get a user to fill out just one simple segment (perhaps by only displaying one segment to begin with), they will be more likely to complete the entire form. It gets them invested from the first step, and makes it harder to abandon the form later.

segments

  • Provide pre-determined giving amounts. You can better guide your users’ giving by suggesting specific donation amounts. A pre-defined set of giving amounts displayed as easy-to-click buttons is not only a way to help speed a user through the form (one less field to fill out), but it makes it tempting to give more. It’s as easy as clicking a button!
  • Only include required fields in your form. If you find yourself wanting to include several “optional” fields in your donation form, be diligent and ask yourself if they are truly necessary. Assume that every optional form field you include on your form will increase the time-to-completion, add to user frustration, and decrease the overall completion rate. Oftentimes, the information we attempt to collect from optional form fields is information we could have just as easily collected from the user later, after they’ve successfully completed the simpler donation form and established trust. A user is surprisingly more willing to provide additional “optional” details after they’ve completed their transaction, as opposed to while they are in the process of completing it. Consider asking your users for follow-up details on the validation page (or email) that is generated after they’ve submitted their donation. They’ve already accomplished their goal and are invested in helping, so providing a few follow-up details feels like no big deal.
  • Keep your users on the form. When you get a user to your donation form, you don’t want them going anywhere. Proactively address any barriers to form completion that a user might encounter on the form page itself instead of sending them to a different section of the site (an “FAQ” page for example). Common concerns like “Will you keep my personal data private?,” “Is this contribution tax-deductible?,” or “What will my donation be used for?” are easy to address within the context of the form itself.
  • Use stepper controls and radio buttons instead of drop-downs. Drop-down fields require multiple clicks or taps and are cumbersome to navigate, whereas stepper controls and radio buttons are one-click interactions that are speedier, easier, and more delightful. Styled as buttons, features like this become even more engaging.

 

button-inputs

  • Avoid user “Submission Error” messages. Submission errors are deadly to form completions. Help your users avoid painful red error messages by providing useful hint text for fields that may give a user pause (e.g. “What does a ‘recurring donation’ mean?”). Use inline validation to provide a user with real-time feedback; this will let them know if they have filled out a field correctly, or help them correct a mistake before they get to the end. And if a user does generate a form that has an error, do not, for all that is holy, make them fill out the entire form all over again.

 

Twitter's registration form uses inline validation to let users know when they've made a mistake.

  • Don’t settle for technology that doesn’t work for you. Many nonprofits have contracts or long-standing relationships with donor platforms or payment processing services that are not easily broken or overhauled. If your service is having trouble implementing the functionality you desire (“Why can’t we combine the ‘First name’ and ‘Last name’ fields?”), be diligent and try to work with them to implement the changes you seek. Streamlining your donation form and getting as many users through it as successfully as possible is not only a benefit to you, but to them as well. Your ability to collect online donations is critical, and should not be hindered by the technological limitations of a third party.

Make a Human Connection

The functionality of our donation forms is one critical component to their success. A less obvious component is the emotion baked into that functionality. Emotional, human interaction is just as critical (perhaps even more so) to the long-term success of our online fundraising as smooth functionality. As a nonprofit, it’s important that you make a human connection with the people who choose to donate to your organizations (through something as decidedly non-human as a computer interface), and engage them beyond the moment.

  • Show the impact of giving. Transparency is important to donors, and tying real-world impact to specific dollar amounts is an easy way to show donors where their money will go. When a donor selects a $100 donation, show them what that $100 will do in easy-to-understand, relatable terms.

 

This form from Saturday Place lets users see what kind of real-world impact their dollars will have.

  • Make the most out of confirmations. After a donation has been received, don’t miss the opportunity to confirm your donor’s gift and thank them for their contribution through a confirmation page or email. It will assure them that their transaction was successful, but more importantly it will recognize the importance of their contribution and show them the gratitude they deserve. Take every opportunity to engage with them further; ask them for some of that “optional” follow-up information that you removed from the donation form!
  • Make every donor feel like a big-dollar donor. By giving your organization money—no matter the amount—a donor has performed an incredibly generous act. It is critical (especially since we know that current donors are your best source of future contributions) to make sure they really feel and understand how important their contributions are. Find creative ways to celebrate every $10 donor like they were a $10,000 donor, and do it in a personal and emotional way that feels real. Consider sending them a personalized “Thank you” video via Instagram. Automatically enter them into a lottery drawing for an exciting prize. The possibilities are endless. If you can make each donor feel like a big-dollar donor, you’ll be well on your way to securing even more lifelong givers.

While neither comprehensive nor gospel, these are a few of the general best practices we attempt to implement in forms that we build. We are always searching for ways to evolve our best practices and keep them current. You can do the same.

Don’t be afraid to observe how people interact with your forms, even if it’s casual. Be proactive about fixing common issues or problem spots that you see. Follow form design experts like Luke Wroblewski to stay updated on current best practices in form design, experience, and technology (his work informs much of our thinking on form design, as evidenced by the numerous citations in this post).

Any improvement to your form that you can make will be worth it, no matter how trivial it may seem. Even incremental increases in form completion percentages can lead to noticeable differences in your organization’s bottom line—which translates to more real-world impact that your organization can generate.

Rachel Clemens
Rachel Clemens builds things.  First, she built a career as a designer - working for some of the most recognizable names in advertising, including stints in London and Australia. Then, she returned to Austin, Texas and built Creative Suitcase - her own strategic communications firm. Over the next 11 years, Creative Suitcase helped organizations like United Way, Habitat for Humanity, The University of Texas, and countless others, raise money and awareness to improve their communities. In late 2016, Creative Suitcase merged with TradeMark Media, and together they became Mighty Citizen. As the Chief Marketing Officer, Rachel splits her days between promoting Mighty Citizen's digital and marketing services and working directly with nonprofit clients on their branding, marketing, and campaigns. She is also a frequent speaker at local and national conferences and events.