How many web forms have you filled out this week? Your initial answer might be one or two. What about when you scheduled that meeting this morning? Or when you bought that t-shirt last night? Booked your flight? And the Airbnb?

Often, we think of forms exclusively in terms of lead generation, but forms are all around us. So many forms just waiting to be optimized.

Web forms are living, breathing friction, though.

Often a form is the only thing standing between your visitor and what she wants.

Yet we resign to the idea that web forms are a necessary evil. They are necessary (for now), but they don’t have to be (totally) evil. You can reduce the fire and brimstone vibe with some web form optimization.

As marketers, we have to shake this “set it and forget it”, “if you don’t like my form, kick rocks” mentality. Because your visitors will kick rocks and you’ll be wishing you had worried even a tiny bit about that so-called “necessary evil”. [x_line]

Web Form Optimization: The Best-Kept Optimization Secret

Forms are how your customers communicate with you initially. Are you making a good first impression? Forms can be used to maximize sales (ecommerce), secure customers (SaaS), grow communities (forums and training programs). They’re not just about accumulating data and content (lead gen).

Despite this, web forms are usually an afterthought. We all know forms can be optimized, but frankly, they’re not sexy. Who cares? Next. Maybe I’m being dramatic, but when’s the last time a form was the top priority in one of your design or conversion discussions?

According to a Formstack study of 650,000 forms across 10 industries, form performance is improving overall, but progress is slow and we have a long way to go.

Here’s how average form conversion rates looked in 2015 (vs. 2014):

web form stats

Contact forms and surveys actually declined in terms of average conversion rate. Yikes!

But let’s get to the heart of what this data means for you. The value is not that you now know you should aim for 9% or higher on your order / payment forms, it’s that you have a 91% gap to fill.

There’s something stopping 91% of people, on average, from filling out an order / payment form they first expressed interest in. It’s your job to figure out what that something is.

Think about it in terms of abandoned carts. How often do you see someone suddenly stop shopping in the middle of Walmart, abandon their cart and drive home with nothing? Almost never, right? Unless something went terribly, terribly wrong.

Abandoned forms are just as weird, but the process of abandoning a form has been normalized by marketers (just like the process of abandoning a cart).

If you figure out what your something is (and it could be many things at once), imagine the impact. More leads, more purchases, more data, more whatever. Plus, lower acquisition costs.

Alright, I don’t need to explain the importance of conversion rate optimization to you. The point is simply that the opportunity is the 91%, not the 9%. And if you can unlock that opportunity, you’ll be laughing all the way to the bank. 

[easy-tweet tweet=”Do you know what’s stopping 91% of people, on average, from filling out your forms?” user=”@shanelle_mullin” template=”qlite”]


Processes > Best Practices

As in most areas of conversion rate optimization, there are a ton of oversimplified, generalized “best practices” floating around about web forms.

Always reduce form fields, never use “submit” as your button copy, never ask for a phone number, always keep the form above the fold… you get the idea.

I won’t debunk all of these one by one, but it’s important to keep in mind that forms are contextual, just like anything else.

For example, in reducing form fields, you sacrifice data you could use to segment or qualify leads down the line. So, whether you should reduce form fields is actually a highly contextual decision.

Don’t do something for the sake of doing it or because you once read that it works best in a blog post. Do it because you’re data- and context-informed, and you believe it will increase your bottom line. [x_line]

The 4 Must-Know Web Form Principles

If you want best practices, you’re in the wrong place. But there are some principles you can use to guide you:

  1. Minimize the pain of completing a form. It’s not a fun process and it never will be, but you can remove a lot of the suck.
  2. Make the path to completion clear. Be upfront about the time commitment and progress.
  3. Always be aware of the form’s context. Is it frequently used? What’s its goal? Who uses it? What’s their intent level?
  4. Be consistent. Your forms should look, read and behave the same.


The 6 Key Components of Web Forms

There are also six key components of every web form, all of which must be considered carefully:

  • Labels: Explain what the input field in question means.
  • Input Fields: Enable the visitor to provide feedback and submit data.
  • Actions: Links or buttons to submit.
  • Help: Links or messages to provide assistance to those struggling with the form.
  • Validation: Messages and measures to ensure inputs conform to required parameters.
  • Keyboards: The keyboard style displayed for each input field on mobile.


Now that we have the fundamentals out of the way, it’s a good time to start talking about the form optimization process.


The Web Form Optimization Process

Form analytics analysis is part of any good conversion research plan. Here’s the process, step-by-step:

  1. Use a tool with form analytics, like Formisimo or HotJar.
  2. Collect data for two full business cycles, which could be anywhere from two weeks to two months.
  3. Dig into your data. Where are people struggling? What are people avoiding?
  4. List out all of your problem areas (per form).
  5. Look to other sources (Google Analytics, heatmaps, interviews, etc.) to confirm and illuminate the problem areas.
  6. Prioritize the problem areas you’ve identified. Consider something as simple as ICE (impact, confidence, ease) for this.

Know that you’ll need to continuously optimize. You have a list of problems and some possible solutions. Finding the best fixes will likely be trial and error or a series of A/B tests, depending on your traffic level

91% is a lot of ground to make up, so expect that this will take time and constant refinement.

[easy-tweet tweet=”6 key components for creating high-converting web forms –> ” user=”shanelle_mullin” template=”qlite”]


An Introduction to Web Form Metrics

So far, we’ve talked a lot about average conversion rate. Rarely is that the most insightful metric you can look into. Here are some others to consider:

  • Form views.
  • Form starters and starter rate.
  • Conversions and conversion rate.
  • Abandonment rate.
  • Average correction rate.
  • Failure rate by device.
  • Average form interaction time.
  • Top converting / abandoning paths.
  • Field health score.
  • Field drop off rate.
  • Field interaction time.
  • Field refocuses.

Most of these metrics come standard in form analytics tools.

By the way, you’ll need to consider desktop form optimization and mobile form optimization separately.

No, mobile’s takeover isn’t new, but according to Formstack, radio buttons are a leading cause of form abandonment on mobile. Why are we using radio buttons on mobile, folks?

Because it’s easy to know that mobile changes everything, but putting that knowledge into practice consistently is a different story.

For best results, design (and optimize) desktop forms and mobile forms separately.


 5 Web Forms Examples and Critiques to Learn From 

While following the web form optimization process above is your best option, it can help to observe heuristic analysis (i.e. structured critiques).

To stay as objective as possible, I’ll be focusing on five factors during these critiques:

  1. Friction.
  2. Motivation.
  3. Relevancy.
  4. Clarity.
  5. Distraction.


1. HubSpot Webinar

Here’s how HubSpot approaches webinar registration forms:

best web form

What they get right:

  1. Clarity: Required input fields and optional input fields are clearly marked.

What they get wrong:

  1. Friction: Why ask a yes / no question using a dropdown input field? This just adds an extra step and creates more work for the visitor.
  2. Distraction: When I entered my email into the input field, I received an error message saying I had previously unsubscribed. Red flag! I don’t remember doing that, but presumably it’s because I was hit with some content that’s not relevant to me, so now I’m thinking twice: 
  3. Relevancy: A lot of assumptions are made. Who says I’m interested in learning more about any of these products? Or that I use a CRM at all? All you can assume from my presence, in this case, is that I probably run an agency and probably want to know about video marketing.
  4. Friction: Form length isn’t an inherent issue, but asking for more information than you need is generally a no-no. Why put the visitor through more pain than necessary? For example, if you have my company name (and much more), why do you need my website URL as well?
  5. Friction: Also be aware of perceived pain. This is what people are really referring to when they say, “That form’s too long.” The fact that it’s crammed into a small, narrow column on the right elongates the form and makes it seem more daunting than it really is.
  6. Motivation: Don’t listen to anyone who tells you to never ask for X on a form. Ask for whatever data makes sense for your business, but make sure the level of motivation matches or exceeds the pain of the request. For example, I just want to learn about video marketing for my agency clients. I definitely don’t want someone calling me at an unknown time to talk to me about who knows what. My motivation level doesn’t match the pain of the request.
  7. Clarity: The fact that all of the input fields don’t line up is confusing and just doesn’t look very good.
  8. Distraction: The value of the gated content is presented really well, but given the layout, it competes heavily with the form.


2. Buffer Free Trial

Here’s how Buffer approaches free trial registration forms:

form optimization

What they get right:

  1. Friction: This form is simple and intuitive. There’s nothing daunting about two-click social authentication or an email / password submission.
  2. Friction: You want to get leads to experience the value of your product as quickly as possible. This form allows for that, especially if the person opts for social authentication because their social media platform of choice is already connected.
  3. Friction: “Keep me signed in” is checked by default, eliminating future form friction.
  4. Clarity: Logging in via social media platforms isn’t new or exciting anymore. It’s a trusted, routine behavior. Relying on that familiarity and prototypicality works in Buffer’s favor.

What they get wrong:

  • Not a whole lot. Way to go, Buffer!


3. Canva Upgrade

Here’s how Canva approaches paid upgrade forms:

After clicking a muted gray “Upgrade” button in the left-hand menu, you’re presented with the value popup above. Once clicking the green “Start your free 30 day trial”, you’ll see this:

What they get right:

  1. Clarity: Canva makes it super clear when the first bill will come and that they will remind you before your trial ends, directly addressing the fear of being unknowingly charged.
  2. Motivation: The social proof along the right-hand side of the form emphasizes the value of the product. Research shows that social proof is a powerful selling tool that impacts both attention and memory.
  3. Motivation: “Save 23%!” is clearly marked and easy to spot. The orange color contrasts with the more common white and green.

What they get wrong:

  1. Clarity: Backing it up, the muted “Upgrade” button is unclear and unenticing.
  2. Friction: Why default to monthly billing when yearly is clearly Canva’s preference? Perhaps Canva has tested it, but you want to make it as easy as possible for customers to make your most wanted decision.
  3. Clarity: The social proof is easy to miss and difficult to read. Research shows that words are more difficult to read when they’re italicized and the color contrast is low. Plus, Socially Sorted isn’t quite in the same league as Upworthy and TechCrunch, which makes it seem as though Canva ran out of big name testimonials. Finally, the social proof doesn’t address the benefits of Canva for Work over the free version at all.
  4. Relevancy: There’s nothing worse than a poorly placed form. Even after you’ve signed up for a free trial, the same form is presented after clicking “Upgrade”. The exact same form, the exact same flow. This time, the helpful “first bill” and “trial reminder” info is inaccurate because you skip the advertised free trial period and are billed immediately.

Friction: There is no help offered for input fields. The icons are somewhat useful, but CVC fields are still throwing people off.


4. BustedTees Checkout

Here’s how BustedTees approaches checkout forms:

What they get right:

  1. Friction: In-line validation is present and super bold. You definitely won’t be wondering if you’re completing the form properly. 
  2. Clarity: Personalization done right. Your shipping options automatically change based on the country and address you input.
  3. Friction: Help is available in the form of live chat in the bottom, right-hand corner of the screen.
  4. Friction: Research shows that even frequent ecommerce buyers have trust issues and well-known trust icons / seals (i.e. VeriSign) help ease fears.

What they get wrong:

  1. Friction: Like Canva, this form offers no help. You’ll have to stop what you’re doing and engage in live chat if you get stuck or run into a problem.
  2. Friction: Perceived length is an issue. The thicker fields make the form approachable, but extend the length of the form overall. A two-step (shipping and billing) form with a progress bar would go a long way.
  3. Friction: “Log In” and “Create An Account” are muted. There’s no obvious option to save your info to make checkout easier next time.
  4. Clarity: The info to the right of the form is easy to miss given the vertical nature of the form. Entering a gift card or discount code, and reviewing your order is definitively deprioritized visually.
  5. Clarity: Despite changing my country to “Canada”, prices remain in USD.


5. Neil Patel Blog Opt-In

Here’s how Neil Patel approaches blog subscription forms:

As you scroll along, a vague “Do you want more traffic?” call to action follows you. The answer is obvious… who doesn’t want more traffic? But there’s no expectation setting around what will happen when you enter your site URL and click “Continue”.

Fear of the unknown is very real.

The Hello Bar at the top, which seems to be advertising what you’ve already clicked to, cuts off the form’s progress bar (and no, there’s no close option). It’s also unclear why “Select your budget” is orange. The “I need help with:” input field creates unnecessary work for the visitor. Why not have a multi-check option to reduce cognitive load?

Finally, you’re still completely unsure what completing this form is going to do for you. What are you signing up for? Why do they need your budget? Who said you wanted to pay for anything? What are you continuing with?

More questions and uncertainty. Get in touch with you about what? Why do they need your phone number? When are they going to call you? About what? This form has a major clarity issue.

Finally, the button copy makes the value clear: a consultation with Neil himself. Though, the all caps button copy scores low for readability (a few cool tips on writing good CTA buttons)

Wait, wait, wait. Who is “we”? You thought you were talking to Neil directly.

After selecting your preferred day and time, you’re all set for your 45 minute consultation with Neil (maybe?) about getting more traffic to your site (maybe?).

But then you check your email:


Who the #*$% is Andrew?

Yikes! Clarity and proper expectation setting are both so important.



There’s always going to be a faint smell of fire and brimstone surrounding your web forms, it’s true. Unless you find a way to eliminate them completely, you won’t be able to eliminate all of their friction.

But you can try, damn it.

And in trying, you’re already miles ahead of everyone who still has that set it and forget it mentality.

Remember the web form optimization process:

  1. Use a tool with form analytics.
  2. Collect data for two full business cycles.
  3. Dig into your data.
  4. List out all of your problem areas (per form).
  5. Use other sources to validate and illuminate the problem areas.
  6. Prioritize the problem areas you’ve identified.

Embrace the suck! Embrace the friction! Don’t ignore it and hope your visitors won’t mind.


About the author:

Shanelle does content and growth at Shopify. She’s a jill-of-all-trades marketer with a background in content marketing and optimization.

Facebook Comments


Powered by Facebook Comments

Pin It on Pinterest

Share This