Four Best Practices for Forms for Nonprofits

You work so hard to get people to the form on your website to donate, volunteer, or apply. But your job is not over. You want to make sure they actually complete the form. 

Unfortunately, on nonprofit websites, it is very common to have abandoned forms.

The abandonment rate for nonprofit forms is estimated to be as high as 78%!

Why is this?

I reviewed forms on some large nonprofit websites. One reason for abandonment is that the forms aren’t easy to fill out. They have poor usability. Many nonprofits are following best practices for forms from more than 10 years ago.

Decreasing your abandonment rate and improving the rate of people filling out your forms - this could be a big deal! It could mean more money or more people. 

Improve the design of your donation, application, or volunteer forms! Here are four practical tips based on user experience research: 

Use a Single Column

One single column of form fields, left-aligned, makes your form easier and faster to fill out. See this simple contact form example:

Single column contact form with Full Name, Organization, Email, Add Your Message, and a Cancel and Send button.

Do this with all your forms! This will make it easy for the eyes of your visitors to find the next line. People are less likely to miss a field. The single-column format makes your forms mobile-friendly as well. This is important since we know more people are using mobile devices to get things done. 

Ditch Optional Questions

Research shows that the shorter the form is, the more likely that it will be completed. Throw away any questions that are “extras” that you could figure out another way. Keep it to the essentials for your important forms on your website. 

A form may be the beginning of a relationship with your nonprofit. Don’t ask too much information at once. Take it easy. Do this experience well, and you’ll have the chance to ask more in the future. After all, we often provide our email addresses on a form. Just ask the required questions (and then there’s no need to distinguish them with an asterisk.) 

Help Prevent Errors

 
Form example where I’ve entered my birth year as 1700.

Is anyone reading this born in 1700?! On a recent form I was filling out (see right), I discovered that I could take the year for my date of birth WAY back in time. 

That’s nutty. Forms should not let me declare that I was born more than 300 years ago. (I don’t think I completed the form as I got so distracted by this fact.)

We want to help people get through the form without trouble. Ways to help:

  • Ensure your developers code your forms so nobody can put in illogical items. I should not be able to say I was born in month 14 or the year 1776. 

  • Explain any requirements, such as password requirements, ahead of time. Do not wait until after I’ve created a seemingly great password. Oh NOW, you tell me you wanted a special character.

  • Provide a list of any items people will need at the top of the form. For example, do I need to find a special number that I may not know by heart? 

Be Helpful When Errors Occur

An example of a form with poor error messaging, saying “Invalid email” to the red to the right of the error.

The above example of a poor error message is common. If we were together in person and I asked for your email address, then you started to trail off in the middle of it, I wouldn't then say “Invalid email” and expect you to pay attention to me and give me your email. That would sound really robotic, right? There are better ways to do error messages that are more human-centered and kind.

This is the way I would handle it instead:

Example of a single column form with an error message with a bold and red outline on the field and an exclamation mark to the right of where the error is.

Make it clear what someone needs to do to fix the error. Outline the form field in red and bold it. Have a little indicator to the right to show there's an error going on. Don’t just rely on the red color. This is important for accessibility. Some people who are colorblind might not be able to see the red color. If there's an exclamation mark in a circle, that will help everyone know about a problem. We want clear, accessible, and friendly error messages.

Go check your forms on your nonprofit website right now! See if you need to make any adjustments. You’ll likely see more completions and reduce the frustration of your audiences. 

If you need help, contact me, Melissa, for help. You can also join Birdcall’s learning community, UX for Nonprofits, on Facebook. Keep learning how great UX can support your nonprofit’s mission! 

You can also get 3 FREE UX Lessons to Dramatically Improve Your Nonprofit Website. The lessons are completely free. They offer tips I don’t hear often in the nonprofit community.