decorative yellow lines on background

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.

chart

Salesforce’s landing page uses a CTA and graphic to point you toward its form. Then they follow up with a catchy, bold submit button.

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.

graphical user interface, text, application, chat or text message

Freshbooks requires a certain amount of information to finish an account set-up with them. However, they use the very minimal to get you started in the process.

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.

shape, rectangle

Instead of using a generic “Get Started” for their store signup, Shopify went with a positive phrase that “creates your” online store.

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.