Form optimization

Your Engaging Networks dashboard enables you to build highly customized web-based forms to make them as effective as possible. How will you know if your form is effective? The most common way is to check the completion rate, often called the conversion rate. The conversion rate is calculated as the number of people who complete your form, divided by the number of people who visited your form. So if 100 people visit your form, and five (5) of these people complete it, then the form's conversion rate is equal to 5 / 100 = 5 percent.

If lots of the people who reach your form end up completing it, that's good, and you will observe a high conversion rate. But if most people reaching your form end up abandoning it, without completing it, then your conversion rate will be lower. That's not good, and it means that you ought to improve the form to make it convert better. Mainly, you want to make your form as clear and easy to complete as possible. You also will want to "state your case" clearly and compellingly, at the top of the form, about why a person should bother donating to your organization at all.

Fortunately, there are lots of ways to improve a donation form, or other kinds of forms. And then its incredibly useful to test different versions of your forms to see how they perform, using a statistically valid sample of your actual supporters, to see which version results in the highest conversion rate. [When you're ready to conduct these tests, you can read about setting up email split tests.]

So what are some of the main levers for boosting conversion rates on your forms? Let's analyze a typical donation form, bearing in mind that the same principles for optimizing a donation form are pretty similar for advocacy campaigning forms and other kinds of call-to-action forms, too.

First it helps to order and arrange your individual form fields into logical and intuitive groupings. Take a look at the very straightforward design of the "Donate" page of the U.S. based organization Forest Ethics:

The first thing you notice at the top of this donation page is the large logo of Forest Ethics, and the visually striking image of the bear. To the left of the bear is a header and copy block that make the case for why a person should donate to the organization. Immediately below that, you see a choice of donation amounts, presented as radio buttons.

In this case, the Forest Ethics team has followed the well-established approach of assuming that the first step, logically, in this process is for the donor to choose his or her preferred donation amount, and then provide the necessary contact information and payment details later, lower down on the form. Forest Ethics also chose a radio button format for the donation amount, and this allows the donor to easily pick from several common donation levels, or to pick "Other" and then write in their own specific donation amount.

As the user scrolls down further on the donation form, they see the following 2-column presentation of a lot of fields to fill out, under a header that says "Your Information."

Consider some of the choices that the Forest Ethics team made when they built this section of their donation form. First, they chose a 2-column format, which nicely relieves the user from having to continue scrolling down a very long form to complete it. [Bear in mind that there are times when a 1-column format might be better than a 2-column format, such as when your form fields have unavoidably long titles that would display poorly if you tried to squeeze them into a 2-column format.]

Forest Ethics also chose to make most, but not all, of the donor contact information fields mandatory, as indicated by the red asterisks. (The "Phone" field does not have a red asterisk, which signals that the donor is not required to provide their phone number, if they don't want to do so.) Forest Ethics also wisely chose to present both the "State" and "Country" fields as dropdown menus, from which the donor can select their state and country. Using the dropdown menus enabled Forest Ethics to avoid visually cluttering up the form with a long, ugly list of states and countries. Forest Ethics similarly used handy dropdown menus for "Payment Type" and "Expiration Date."

Note also that Forest Ethics has lumped together in the same category, under the sub-header "Your Information," the standard set of donor contact information fields (e.g. last name, first name, email address, postal address and phone number) together with the donor's key payment information (e.g. payment type, credit card number, expiration date). That's a very valid approach taken by many organizations. However, some organizations will use a separate grouping, under a separate sub-header (such as "Payment Information"), for the donor's payment information. Setting the payment information apart as a separate grouping in this way is another valid approach that might be worth testing against the approach the "all-your-information-lumped-together" approach.

So let's recap some of the key levers that Forest Ethics used in creating its donation page:

Order and arrangement of content and elements

Form element types (such as radio buttons and dropdown menus)

1-column vs. 2-column format

Mandatory vs. optional fields

Form groupings (using sub-headers to separate different clusters of fields)

Forest Ethics also made the fundamental choice to present its donation form as a single, 1-page experience -- rather than breaking up the experience into two sequential pages, as some organizations do. So that's another key lever:

1-page vs. 2-page user experience

Mobile Form Optimization

One of the most powerful levers to boost conversion rates on your forms is mobile optimization.

Recognize that a large and fast growing portion of your supporters and potential supporters these days are accessing your website pages via smartphones, tablets and other mobile devices. So it's vital that your forms display properly and perform effectively across all mobile devices. Don't forget this step! There are lots of ways to build these mobile-optimized forms, and skilled designers are creating highly effective ones all the time.

But there's great news on this front. Even if you don't have access to any skilled designers on your team, or via outside consultants, never fear! You can still easily build highly effective mobile-optimized forms using your Engaging Networks dashboard -- and these forms will automatically be shown to your supporters who access your forms via mobile devices. For you, Engaging Networks has provided a feature enabling you to just click a button and automatically generate a pre-built, mobile-optimized template for each of your web forms.

Advanced Optimization Tactics

In addition to the basic levers for optimizing pages listed above -- and that oh-so-vital step of mobile optimization -- you can also learn some more advanced tactics that can be extremely effective, too. One example of an advanced tactic is creating an invisible field that is hidden from view until a user makes the hidden field appear, by clicking on a different, visible field on the page. The key benefit of using an invisible field is to avoid visually cluttering up your form with fields that might be relevant only to a minority of people filling out the form. The method underlying this tactic is the setting of "dependencies" between fields, so that the behavior of one field (the invisible field, let's say) is dependent on how a user interacts with a second field (e.g. one of the visible fields).

It's easy to understand how a field dependency works by looking at a concrete example, such as the below donation page used by Humane Society international.

Notice the "Country" field, which is a "dropdown menu" type of field. Watch what happens if a user picks "United Kingdom" from that dropdown menu...

Two things happened. First, the payment option icons changed (i.e. the Discover Card option vanished, and a Direct Debit icon appeared). Second, a question box with the cursive "Giftaid it" header and a long sentence appeared at the bottom of the form. In this way, Humane Society International's form provides a customized experience for its donors in the UK, where different payment options exist and the UK government supports a unique "Gift Aid" system that is only relevant to UK donors and charities.

This same principle of creating field dependenciescan be used by any organization to customize and streamline its donation forms -- or any other kinds of forms, for that matter. The tools for doing this easily are right in your Engaging Networks dashboard.

It's a Journey, Not a Destination

In your quest to create the World's Most Effective Form, realize that it's not like a Holy Grail that you can someday finally find and possess. Rather, creating an effective form is an ideal to strive for -- and a neverending process. You should keep testing and re-optimizing your forms continuously, especially as circumstances change, and as your supporters' behavior keeps evolving. Remember how we said more people are accessing forms through mobile devices these days? Methods of payment are gradually evolving, too. And organizations are inventing new tactics and best practices to boost form conversion rates all the time. By adopting a philosophy of continuous improvement through the testing of new ideas, and by taking full advantage of the flexibility and customizability that is built into the Engaging Networks software platform, you should be able to keep boosting conversion rates on your forms continuously, too. [And when you discover a novel tactic that works for your organization, consider sharing the lessons you're learning with other charities using the Engaging Networks software platform!]