We are excited to have Jeff Blettner, a web designer and conversion optimization specialist from Formstack as our guest blogger for today. Formstack is a leading online form builder. As forms are an easy target for CRO efforts, we are pleased to feature his insights.
Working at Formstack, I’ve seen first-hand how important online forms are to businesses, large and small. It’s where visitors sign up, leads are generated, and sales are transacted. And as a result, there’s been a proliferation of best practices for online forms that have been developed and discussed across the web. But from what I’ve found in my own testing is that there are three key elements that create huge impacts for online forms.
1. Call to Action
As a designer I get so wrapped up in how a page looks, and I think less about what it is actually “saying.” Is it balanced? Are the graphics sharp? Do the colors mesh? While all of these things are important, they’re not going to “speak” to the user as well as your call to action.
The topic of call to actions (CTA) is such a large subject, so for the purpose of this post, we’ll focus on call-to-action tips specifically in forms. Check out this post for 10 simple tips on writing CTAs.
Form Call To Action Tips
Expectations — What expectation are you setting up with your call to action? If you imply a future scenario, but then don’t deliver that promise after form submission, you will likely cause user abandonment. For instance, if your CTA is something like “Sign up now and get a FREE 30-day trial” and you send the user to a second form for more information, annoyance ensues and the user drops off. Follow through with your CTAs!
Location — Is there a direct correlation between your CTA and form? It may seem obvious to you, but first-time users might skip over your form. Try using graphics that move the users eye to the form or try adding a title to your form that echoes the CTA.
2. Number of Fields
The general rule of thumb for forms is to keep them as short as possible. This means removing fields, which in turn reduces “friction” – or the natural annoyance barrier for completing a form. Many company executives, however, aren’t crazy about giving up collected customer information. If your boss is in this category, this presentation on reducing form fields may persuade him/her otherwise.
Once you get the greenlight for testing, it’s easy to do with Optimizely and an online form builder, like Formstack. First, create a form with the maximum number of fields you would like. Don’t make any of the fields required (unless they will be present in ALL testing variations). Then use Optimizely’s editor to hide the fields that are unneeded for other variations. By doing it this way, you have one neat form that has varying amounts of fields per visitors, but doesn’t error out for hidden required fields.
Field Removal Tips
Follow-up Sales – Removing fields like “Phone” or “Address” will likely improve your form’s conversion rate, but what about potential lost sales from reduced customer contact information? If some sales are generated from follow-up phone calls or mailings, be sure to account for that in test revenue analysis.
Page Distribution — Another way to reduce fields is to spread them over two or more pages. For example, if there are 10 required fields in your signup process, one page with 10 fields may cause more friction than two pages with 5 fields. This is a great strategy if eliminating fields is not a possibility.
3. Submit Button
Buttons at the end of your forms can have a big impact on conversions. Their effectiveness is generally determined by four elements: color, shape, size, and text. While it’s important not to ignore the other elements, “text,” from what I’ve found, has the biggest effect on conversions. Like the CTA, it sets expectations for the user and gives them motivation to click.
Switching out text in a form button should be straightforward since inputs are in HTML and the Optimizely editor makes it easy to change. Sometimes though, text is handled with a background image (maybe with the misconception that Photoshopped buttons just look better). If so, I would recommend removing the image and sticking only with CSS colors. Here’s a good tutorial on CSS-styling for links.
Button Text Tips
Actions — Do your buttons entice users to click with action verbs? Basic verbs like “Submit” or “Continue” or “Checkout” are okay, but using more illustrative ones like “Finished” or “Try It Now” or “Complete My Order” can yield surprising results.
Expectations — Like CTA’s, buttons need to set the right expectations. For example, a button with “Try It Now” implies a trial directly after clicking. But if a user were to find a pricing page afterwards instead, they will likely split.
Overall, these three elements are a great place to get your form testing started. If you are creative with your variations and take some big chances with these simple changes, I think you will be surprised with how far you can move the needle.