web forms

Discover how to create top converting registration forms for your website or landing pages. Don’t let the design of your form hurt your conversion rate.

Are your forms stopping your visitors from converting on your site? Follow these guide and create the highest converting registration forms ever. Of course, this will not preclude you from testing what works and what doesn’t work on your site and with your audience. Read on!

Steps for Creating Top Converting Registration Forms

I recently went to a website to buy a new keyboard for a laptop. I found the site with the right price and delivery and put the keyboard in my cart.

When I went to checkout, the first question on the billing form was Gender.

Gender?

Why does an electronics part manufacturer need to know if I’m a man or woman?

It introduced enough doubt in my process that I left — I abandoned my order.

The unfortunate statistic is that 86% of visitors abandon forms of all kinds.

It’s doubly heartbreaking when they do so in their cart, because that costs you ready buyers.

How to Create the Highest Converting Registration Forms: 13 Key Tips

The thirteen recommendations made here will set you on a path to reduce your abandonment rates. My favorites are:

  • What am I signing up for? Use a title that explains why the user needs to sign up. Keep this intro short, sweet and simple. Make sure your call to action matches the title. Be more creative than a “Submit” button.
  • Show them their password (who said invisible passwords was a good idea?) Let them pick if they want to see it or not.
  • Put errors in an obvious place and make them visible. Make sure to read the last section on how to use error messages as a conversion opportunity.
How to create top converting registration forms: informational messages make for a smoother conversion path when they are located close to the corresponding field. Easy to notice and to understand.

How to create top converting registration forms: informational messages make for a smoother conversion path when they are located close to the corresponding field. Easy to notice and to understand.

Here’s the rest of the recommendations for creating top converting registration forms.

  • A social signup option can speed up the form filling process and help you create the best conversion registrations forms.
  • Leverage Autofill whenever possible or offer preset options. This is especially true on mobile devices. Nothing more annoying than fumbling around with a form.
  • Make the most of mobile devices. Enable only relevant keypads as required on the field. Make it easy for your visitors. Don’t make them switch to a numeric keypad or keyboard to enter the zip code or phone. Use specific HTML input types. They’ll appreciate it and you’ll avoid friction in this crucial conversion moment.
  • Explain why you need the information and what you expect them to enter. Just because it’s evident to you, does not mean it’s clear to everybody. The same applies to mandatory fields.
  • Limit the number of fields in your form. Don’t drive your prospects away at the mere sight of the longest form ever.
  • Billing address same as shipping address? One checkmark will take care of filling up the fields – internally, of course.
  • Multi-step forms. Split. Split. Split. Research shows that multi-step forms outperform their single-step registration forms. Especially when asking for sensitive information (such as phone) or when the form is too long. Adding a progress bar will entice your prospects to keep going as they are almost done.
  • Google’s UX researchers found that aligning labels top-left of the fields increased form completion time. This is because it requires fewer ‘visual fixations’. Basically, your eyes scan downwards faster. You are forced to scan in a zig-zag motion when the labels are placed to the left of the fields. The exception is when you are using always visible inline form field labels.
  • Did I mention speed? You can make your website as fast as possible, but slowing down like molasses at the time of filling out a form is unacceptable. Make sure your forms load fast and don’t slow down your page speed to increase conversions.
  • Make sure you are GDPR compliant. You have to ask permission for each and every opt-in.

Ready to AB Test? Read on!

UX Design Guide for Form Validation to Lift your Conversion Rates

Forms are a key component of Landing Pages (in addition to Offer, Image, Trust and Proof). When a visitor considers completing a form — for lead gen, to subscribe or to purchase — it is the moment of truth.

So, it is sad that so many forms work to chase these ready customers and prospects away. Forms are meant to have a conversation with the user. One that guides them all the way to the conversion with the best UX possible.

Form validation used to be a “developer” thing and we need to make it a marketing thing. Forms are placed at your sales funnel’s most crucial moment, the conversion. Therefore, it is only logical that improving the UX would help lift conversion rates.

Here are four elements to consider as you guide development of your website forms in these areas to avoid confusion:

1. When to Show Validation Errors: The right time to inform  the user about problems or success

Consider the two main types of form validation: Inline validation and Post-Submit validation.

Inline validation checks field entries as the information is entered.

Post-submit validation validates entries after submitting the entire form. The visitor doesn’t know if the username they chose was already taken or if their email address was entered incorrectly until after they click the button.

If mistakes were made and the form re-loads, the visitor must manually search for the incomplete fields, and correct them. This adds friction to a shopping cart checkout process or a newsletter signup. This hurts completion rates.

Post-submit validation also suffers from scroll confusion. When the page reloads, the error messages often appear off-screen. The visitor may not know that there’s even a problem with their entry until they scroll around. This is a bigger problem on mobile devices where screens are smaller.

Our recommendation is to use inline validation so users can adjust, learn, and correct as they move from field to field. Inline validation is especially effective for the username and password fields, or any field with strict input requirements.

Instagram makes good use of "always visible inline field labels." Discover how to create top converting registration forms for your website or landing pages. Don’t let the design of your form hurt your conversion rate.

Instagram makes good use of “always visible inline field labels.”

Don’t limit messages to errors. Success validation messages are always helpful and encouraging. For example, a simple check mark by the field can let the user know their username was accepted and it’s unique.

2. Where to Display Validation Errors: Right place for validation messages

When messages are located close to the corresponding “failing” field, they lead to a smoother path for conversion. They become easier to notice and to understand.

You may be tempted to add the error messages by the Submit button. But there are only two occasions where you can display the error or validation message next to the Submit button.

The first is  when you perform an post-submit validation and there was no page reload.

The second is when the error affects the whole form, as may happen with a dropped mobile connection, and the page was not reloaded.

In any case, if there was a reload of the page, display the validation errors at the top of the page.

Wave accounting software registration form. Great location for the informational password field. Their social proof is very persuasive.

Wave accounting software registration form. Great location for the informational password field. Their social proof is very persuasive.

3. Right color or Right Graphic Representation

Did you know that 1 in 12 men have some degree of color blindness? Source: Color Blindness

Color blindness is more prevalent among males than females, because the most common form of color vision deficiency is encoded on the X sex chromosome. Source.

In spite of this, if you follow the rules (blue is informational, green is success, red is an error and yellow as a warning) even color-blind visitors will understand the meaning.

If red-green color blindness is the most prevalent - one in twelve men are color blind - should you rely solely on color to get your message across in your registration forms? Image source: Pinterest.

If red-green color blindness is the most prevalent – one in twelve men are color blind – should you rely solely on color to get your message across in your registration forms? Image source: Pinterest.

I recall asking a friend of mine – yes, he was color-blind – how could he tell the traffic signals apart. His answer was, “I know where they are placed.”

We don’t have specific placements on forms, but we can take advantage of icons. And these have rules as well: X for error, checkmark for success, exclamation point for warning and “i” for informational messages.

4. Clear and persuasive language for error messages

A red symbol notifying you that there is an error and no explanation of what it is or how to fix it can lead to form abandonment. It becomes extremely frustrating for users that may be trying to register for your demo or buy from your online store when they don’t know what they did wrong.

Instagram's sign up form error messages are not helpful to the user. There is no clear explanation on how to fix them.

Instagram’s sign up form error messages are not helpful to the user. There is no clear explanation on how to fix them.

If all problems are opportunities, then error messages and error pages are generally missed opportunities. Marketing should be policing the errors reported on their website, messages that have traditionally been written by a techie in IT.

Clear and persuasive language for error messages can actually work in your favor, improving the user experience and increasing conversions.

I’ll give you an example. A few months ago I had to make a doctor’s appointment. The receptionist scheduled me for the following day with the nurse practitioner. I asked if I could see the doctor – best dermatologist in this neck of the woods – and her answer was “No, you will have to wait until she comes back from vacation.” Which happened to be 3 days later.

What do you think would have happened if she would have said, “Of course. She will be back from vacation on this date. But we can get you in tomorrow if you’d like to see her nurse practitioner”. She could have probably have persuaded me to see the NP.

Wayfair's newsletter sign up form has a confusing call to action button text. What will happen after I press continue?

Wayfair’s newsletter sign up form has a confusing call to action button text. What will happen after I press continue?

Related Reading: Why is my Conversion Rate Dropping? 8 Common Reasons

How to Write Great Error Messages

Follow these guidelines to write error message that won’t have your visitor feel like an idiot.

  1. Get rid of IT jargon. Say goodbye to “Submit”, “Send” or “Error”, not only do they have different meanings in English language, they have a negative connotation putting the blame on the user.
  2. Clearly and simply identify the error and give the user a solution.
  3. Never blame the user. Rephrase your error messages or better yet, provide your website visitors with informational messages so they know what to enter in the first place.
  4. Provide a way to contact you, be it chat, email or a customer service number, in case the user needs your help to solve the issue.

imageThese are the stories that caught my eye last week. If you are a curious marketer looking to learn more about conversion, please subscribe my weekly recommended reading list, For Further Study.

The Product Page 2012: 7 Must-Test Elements

Feb 27, 2012 08:22 am

@TheGrok  says “Test your product headline to be benefit oriented as opposed to just product name.” I hadn’t considered that. Good lists always tell you something you hadn’t thought of and Bryan has such a list for Online Stores and Publication sites who feature their offerings on Product Pages. Product pages are the money pages on your site, and are one of the first places to look for optimization opportunities.

read more

The Shocking Truth About How Web Graphics Affect Conversions

Feb 27, 2012 01:14 am

@KISSMetrics – David Ogilvy is experiencing something of a renaissance these days as his experience and research in offline marketing are proving true in online marketing. And we need him. Images are an abused medium on the Web, and this article points out mistakes that you are probably making.

There are some real nuggets here, such as “Captions under images are read on average 300% more than the body copy itself” Ask your designer what research he has for his decisions.

This is an important article, and you should read it before you blindly follow the advice of lazy designers.

read more

Courtesy http://www.sxc.hu/profile/Ambrozjo


Today, let’s rejoice in a persuasive gift that brightens any landing page, and has started so many new relationships between a visitor and a business.

Ode to the Big Red Button

It is a gift both wise and sage
The big red button on my page
It calls, it beckons without retort
“Join,” “Add to cart,” “Get that free report”
Yes, I think a link is fine
So blue and bright and underlined…
Read the rest…

Treat your content as a product

“Have you seen my sunglasses?’’ I yelled out to my wife as I was heading out the door.

“In our room on the night stand,” she yelled back.

Little did she know that she was setting in motion a series of events destined to ruin a fine Saturday.

You see, she unwittingly set an expectation in my mind, an expectation that my sunglasses would be there on the night stand beside the lamp and the book I read before bed.

But when I got to the bedroom, they weren’t there.

The series of events that unfolded next are classic human reactions, reactions that you may be creating in the way you present your content.

I entered stage one: I got angry. Not “throwing things” angry, but “disappointed because I just want to get out and do some errands but I’m attached to wearing my sunglasses when I’m out” angry.

Stage two: I got self conscious, so I looked all around the nightstand. Nothing.

Stage three: I got self righteous. I climbed down the stairs down to my wife, building my self-righteousness with every step.

“They’re not there,” I said, my voice dripping with thinly-masked disdain.

She looked at me with a face and stance that would have made our teenager proud.

“Did you look on my nightstand, too?”

Stage four: I questioned my very ability to function in the world. I slinked back up the stairs, retrieved the sunglasses and snuck out the door.

It was no fault of hers that I assumed the sunglasses would be on my night stand, but visitors to Web sites across the Internet are coming with expectations.

When we don’t consider what visitors expect when we offer them our content, we set the exact same series of events in motion. This isn’t good for our business.

What is the Psychological Price for Your Content

When you invite someone to read your content, you are making a promise. Your promise is that you will help them solve a problem or entertain them.

Our invitations, be they found in an email, a status update or a blog post must promise something or there would be no clicks.

Visitors may be finding and consuming our content just fine, but we can extract a severe price by making things unintuitive. Just because someone finds your content, doesn’t mean they’re happy about it.

Here are some of the innocent things we do to make our visitors feel frustrated.

The Drill Down

If you’re content link is sending your visitors to your home page or to a “resources” page, you’re setting them up for stage one anger.

Most people expect a click to take them to the very place that content exists. Don’t let them down.

Sure, you my have a logical navigation strategy.

“All they have to do is click on the White Papers menu item then select Case Studies, then pick the one they want,” you might say.

Visitors are saying, “All you had to do was put a link to it on the page you sent me to.”

My wife assumed I would look on both night stands. I assumed she’d have specified the “other” one if that was where it was.

The Scroll

For many many visitors, if the content headline isn’t above the “fold” on your page, then it doesn’t exist. Period.

What would push the headline down? Usually, it’s a BAH (big-ass header). The BAH is usually some large stock photo plastered across the top of the page. This is a common feature of Web sites and is found on both home pages and interior pages.

Bosses love this kind of thing, but it foils visitors.

Your headline and first paragraph should start as close to the top of the page as is politically possible.

The Unending Preview

Too often, one BAH isn’t enough, so designers have invented the “flash scroller” also called a “rotator box.” If you are employing one of these to present content choices, you are WAY over-estimating the patience of even the most interested visitor.

Don’t make us sit through a series of cross-fading options.

An image fades in, then we wait.

Another image fades in, then we wait.

Another fade, then we wait.

We won’t last long. I probably lost dozens of readers just writing those three sentences.

The Wall of Questions

One of the best ways to generate leads is to promise great content in exchange for contact information. However, you must look at this as a purchase, not a gratuitous grab for their email address. Don’t present them with a wall of form fields and ask them to fill out the form.

This wall of questions asks much promises little

This page asks a lot, butr doesn’t promise much.

You have to sell them.

To this end, a proper lead generation page will have the following components:

  1. A headline that is as identical to the promise of the ad or link as possible.
  2. A picture of the product. Even an eBook can be formatted to look like a publication, and visitors get it.
  3. Tell them very specifically what they will get when they complete the form. Don’t be afraid to lay some text on the page.
  4. Your form should only ask for information you absolutely need. Your content may not be “worth” their phone number and address in their eyes.NOTE: If you must ask for qualifying information, explain how it will be used and why it is needed.
  5. The text on the button should tell the visitor what is next. “Get Your Report” or “Subscribe” is much more clickable than “Submit”, especially if we aren’t sure to what we’re submitting ourselves.

This is what is expected when someone clicks on an invitation to read or view content.

Deviate from this basic formula only if you must. Otherwise, visitors may leave your site questioning their very ability to function in a digital world.

Brian Massey frustrated drawing.

Brian Massey

 

If you are not completely satisfied with this post…

There are lots of reasons that someone wouldn’t fill out your lead form, even if your white paper or Webinar are free.

 

“I’m going to get a sales call”

 

“I’m going to get a bunch of spam”

 

“I may not be able to join the Webinar”

 

“They’re asking for too much information”

 

“I don’t really know this company”

Well, even in business-to-business lead generation, you can “reverse” the perceived risk of completing a form, and I cover several ways to do this in my Search Engine Land column "Six Risk Reversal Tactics For B2B Lead Generation.”

In general, you can reverse risk by

     

  • Telling prospect how you will treat their data
  •  

  • Telling prospects what to expect if they complete the form

Read the full article for some ways to communicate these messages.