Many landing pages, especially those designed to collect leads, will use a form as the primary call to action. In this guide, you will learn how to optimize your form to maximize your conversion rate without sacrificing your lead quality.
Forms do a lot of jobs on landing pages. Jobs like:
- Asking for contact information
- Qualifying a lead
- Segmenting leads to different sales funnels
- Initiating a purchase
- Subscribing to a newsletter
- Downloading a white paper or free trial
All of those specific jobs are implementations of every landing page’s one main goal: to advance the visitor down a path that leads to that visitor becoming a customer. How you define customer depends on your business model and goals. It may mean becoming a user of your product, a subscriber to your publications or a new player of your online game. It is important for you to understand what your customers look like if you want to design a conversion funnel that produces customers and not something less useful like .
Focus Your Funnel
Once you understand what your customers look like, figure out the quickest and simplest way to get them crammed into the mouth of that funnel. Your landing page is not a place for contemplation, distraction or anything other than directing your visitors to what they are looking for. A conversion funnel is nothing more than a series of steps that your visitors have to take to reach a goal. It could be adding a product to a shopping cart followed by the checkout process and culminating on the receipt page where you thank your new customer for their business. In other contexts it is a one step quickie like signing up for a newsletter or clicking an ad.
Many times a business owner will insist that his landing page offer an option for any possible whim of his prospects. That’s when you see rambling videos, welcome messages, comprehensive navigation and all the other traps that can catch your visitors before they reach the lip of that funnel.
When a visitor lands on your landing page they have a highly predictable goal in mind. Usually it’s getting whatever you promised them in the ad copy that led them here. Otherwise, if they came from search results, links from other sites or links in email, it would be wise for you to investigate those sources and decide if you’re providing what those visitors are looking for. Making the next step to obtaining that goal the most prominent thing on the page is the best way to get those visitors into the funnel.
The Back Button
When visitors don’t immediately see what they are looking for the almost always reach for the back button. Have you ever gone to a store and found finding and purchasing what you’re looking for a serious hassle? If you’ve ever been to a Wal-mart you probably know exactly what I’m talking about. Brick and mortar stores have an advantage over your website. The “back button” at a big box store involves abandoning a half full cart, getting back to your car, fighting traffic and parking sociopaths until you find another store that will treat you better.
Website customers just have to click a button. Poof! To make it worse, that action will indicate to search engines that you’re not all that great a search result for the term that led that visitor to you. If you are using Google Adwords™, you’ll see your quality score fall with an increase in bounces.
Keep It Short
It is almost universally true that the shorter the form, the higher its conversion rate will be. Removing elements from the landing page form almost always results in a better completion rate. Form completion results must be weighed against lead quality, goal conversion and the value of the information you request from the visitor. You also have to consider what other information you’re going to have to ask before a conversion is recorded. A series of short steps can convert worse than one or two bigger steps. It really depends on your target market and how they react to your user experience.
To find your balance, ask yourself honestly what information to you absolutely need to know to get the visitor to the next step. The least is “this visitor is interested in what you have to offer.” For that lead, a single button is enough. When a visitor clicks the call to action button, the information you have now includes:
- The referral source and, if they came from a search engine, hopefully the search keywords they used
- I say “hopefully” because google has recently defaulted all searches by logged in users to https, eliminating the search term that led your visitors to your site. Google promised it wouldn’t have much of an impact, but in my experience, a good third or more of the search terms that used to appear in my analytics have disappeared into the black box of “(not provided).”
- If the traffic source is a paid ad, whether through search or a content network, what keywords they searched or what contextual keywords triggered the ad display. Most ad networks will have substantially more information available as well.
- If the referral source is not a search engine or paid ad, you will have to make more of a judgement call about what the click means. Social bookmarking sites like Reddit can deliver a lot of visitors who are not looking to buy or sign up. A link from a good review on some random blog is a surprisingly rich source of leads. I once got a link on a yahoo answer to one of my sites that led to a startling increase in traffic and conversions. I traced those visitors back to a question that had nothing whatsoever to do with my products, but an answerer had mentioned my site in a tangent that led to some healthy but rarely repeatable sales.
- That they are apparently persuaded enough by your landing page to click your CTA button
- This information is especially useful to inform your A/B tests on specific landing page elements, including the form (which in this example consists solely of a button.)
- That first click deeper into your site is a lot more valuable than just any click. It gets them one step further away from the back button. As I mentioned earlier, that click can improve your quality score in a way that can make the difference between a positive and negative ROI.
- Passive metrics like:
- Their browser, browser version and operating system
- The device they are using
- How long they spent on the landing page
- The time of day, day of the week
- Their general location, language preferences
As you can see, with a form as minimal as a button, you’ve already learned a great deal about your lead. The information listed above, as incomplete as it is, is full of actionable information.
For example, the device they are using can hint at their income level as can the zip code connected to their IP address.
Combing through the search keyword logs is a valuable practice as you learn the myriad ways your customers will stumble upon your site.
Some of that information comes too late to do anything about on your landing page, but can set up a grand slam of a follow-up page.
Don’t Ask A Girl To Marry You On The First Date
If you are selling on the internet, your hope for the direction your relationship with a visitor will go is pretty clear. As long as the visitor interested and can work a credit card, you’re ready to go all the way. Your visitor, however, is probably a bit more ambivalent at this point.
In our security conscious society, we consider asking for certain information to soon to be more than rude, it’s downright dangerous. The information that is acceptable to ask for varies with the context. If you are an established brand with a good reputation, users may trust you with their phone number or email address. However, if they find themselves on a wonky WordPress site cluttered with ads they might have to break out the fake digits.
Visitors decide to share information with you based on issues like trust, the design and presentation of the offer, the political values or fears of the visitor, the sensitivity of the required information and a million other variables. The only variables you can control are how trustworthy you seem, what information you ask for and how professionally you ask for it.
Every step in your conversion funnel is an exit point. Have as few steps as possible, ask as few questions as you need, and always keep your visitors goals in mind.
Small Commitments Lead to Bigger Commitments
When you are designing your form, consider delaying the more sensitive questions like email, phone number or payment details, until after the user has gotten into the process. One study I read found that visitors were more likely to complete a long series of forms if the first page asked them to check a check box labeled “Yes! I’m ready to save money!” They found that experiments including that ultimately meaningless question seemed to unconsciously commit the user to seeing the task through to completion.
Rules for Humane Form Validation
Form validation has come a long way from the days when it was a matter of deciphering handwriting and training data entry clerks. The internet has provided an unprecedented opportunity to collect customer information and communicate at a scale that was only recently unimaginable. However, it also presents new challenges for ensuring that the data that makes it into your database is not incorrect, malformed or malicious.
Validating the data your visitors submit is obviously essential. It doesn’t have to be annoying, hard to understand or a puzzle that your visitors have to solve. The first rule of form validation is: Make it easy.
It is frustrating to deal with a form that has very specific requirements that it refuses to explain. I have filled out forms that require you to guess the format they prefer for phone numbers and punish wrong guesses by returning you to the form page with all of your answers wiped out.
Don’t Make Me Format Strings
Formatting strings is trivial for pretty much every programming language in use today. There are entire software libraries written to do exactly that. For a certain variety of web developer, however, putting the burden of correctly placing dashes, spaces and braces on the users is a better solution than taking the time to do their job correctly. Your visitors are not responsible for paying your technical debt. Let them enter their information however they like and figure out how to clean it up yourself.
Do give me hints
As liberal as you are with the format you will accept, you can also reduce friction by showing an unobtrusive example of an acceptable input. This is assuring to the visitors who worry about writing their phone number in the incorrect format.
Use the placeholder attribute and a polyfill for vintage browsers to make it doubly clear what you expect.
Only Require Fields That Are Required
If you’ve taken the advice earlier in this article, it’s not likely you have any non-required fields left. Optional fields are friction and should, if at all possible, take place after the conversion event. Having a couple nice-to-know questions stick around is only a little sin. It is a grave sin, however, to require the user fill out those fields in order to progress. Curiosity kills cats and it does a number on conversion rates too.
It’s Ok To Guess
Scrutinize the fields on your form. Is there any way to get that information without asking the visitor? A good example is the visitor’s country. Precise locations like visitors zip code or city are often accurate when you use a geo-ip lookup service, but not always. Larger entities like the country almost always are. Depending on how important it is to get right the first time, you can use geo-ip or device location information to at least pre-fill input fields so the visitor doesn’t have to.
There is a limit to what you should infer from passive information. For one reason, the information is often suspect as people travel and share devices. Equally important is to the need to avoid creeping people out by knowing things about them before they’ve told you.
Captchas Are The Last Resort
As ubiquitous as CAPTCHAs have become on the web, they are still a source of a lot of friction. They are particularly bad when foisted on visitors with a low commitment level and visitors with disabilities that make CAPTCHA solving difficult.
CAPTCHAs are sometimes necessary, but they are rarely the ideal solution for the problem you are trying to solve. My rule is: never verify humanity until it costs you something. If you are just adding an entry to a database the cost of the occasional bot is usually small. If you are mailing out a free sample, preventing automated submissions is more important.
Monitoring your logs and using tokens to fight CSRF attacks are more effective defenses against the bot arts.
Give The Visitor Feedback
Whatever validation strategy you use the error notices should be clear and easy to understand. Error messages and their cousins, tooltips and help text, are your front line customer service reps. They are the parts of your form that help bridge the gap between what seems obvious to your web designer and what your visitors understand.
A helpful validation error is:
- In the right place
- As near to the field in question as possible.
- Design your form with error messages in mind. If you can’t put the error right next to the field, redesign your form.
- It is tempting to display all the errors in one place near the top and let the user sort it out, but that is lazy and will cost you conversions.
- Easy to spot
- There is a reason most of the error messages you see on the web are red. Red is an obvious choice both for its symbolic meaning in western societies and biological reasons that make it catch your eye.
- If you have a form that extends below “the fold” you will need to make sure that errors aren’t invisibly frustrating your users.
- At the right time
- The error message should appear after the visitor makes a mistake. In some contexts that will mean immediately after the field in question loses focus. At other times, it makes sense to wait until the user has submitted the form. For example, imagine a visitor enters a zip code that doesn’t match the state he selected. Do you fire the error message after the zip code or the state? Doing it too soon can annoy your visitors.
- On the other hand, don’t wait until I’ve invested a great deal of time to tell me that an option I selected is unavailable. For example, if I was planning a trip to Colorado I would be frustrated if an application let me spend half an hour setting up an itinerary that it knew was unavailable the moment I selected the dates.
- Easy to understand
- Error messages that use cryptic jargon are confusing. An error message that says “Fatal Error: Input of the data type integer only. Data type NULL entered.” would not make a lick of sense to most people. Translating that to “Please enter a number of widgets you wish to buy.” is friendlier and more effective.
- Tell me what I should do not what I shouldn’t have done. Good error messages are instructional, not accusatory. Your error message should tell the user what to do next to fix the problem.
Client Side or Server-Side Validation?
In short, the answer is “both.” Client side and server side validation are doing similar jobs, but for different reasons and in different contexts.
Client side validation is almost universally done using the JavaScript language. The purpose of validating submitted data on the client is to make sure the data is valid and complete. The point is to make completing the form simple for the user. Server side validation is more concerned with sanitization. In other words, client side validation helps your users submit correct information, while the server side validation is concerned with avoiding malicious or dangerous input.
Before Ajax methods became popular, it was common to do a lot of server side validation work to determine the validity of input using rules based on databases.
For example, if you selected a username, the JavaScript could only decide if the username used appropriate characters and was of an acceptable length. In order to see if that particular username is available, you would have to wait until the visitor submitted the form and then run a database query and return an error message if it failed. This was both a pain to develop and maintain and a poor user experience for the visitors. It is much more elegant to fire ajax events that do those queries and return a parse-able response that you can use to communicate with the visitor in real-time. Server validation (and the implied sanitization) is still necessary, but should not bother the user as much as possible.
As more and more validation is moving to the client side, some of the logging that was occurring on the server has been left behind. I believe it’s important to attach unobtrusive logging methods onto your client side validation. People do weird things on forms and you don’t want to be blind to their struggles. As a web developer, if an instruction is ambiguous on a form, you may not notice as you’re the one who likely wrote it and based the instructions on your own perspective. Logging client side errors is a great way to get insight into the rough spots in your process as it is used in the wild. Client side logging is also a nice way to keep track of bots that might be messing with your form. Unusual activity, including not executing the JavaScript log itself, can be a warning site that you are feeding bots.
Server side validation should be invisible to your visitors. One of the most common frustrations I’ve encountered when filling out a form on the web is losing all the work I’ve done when a poorly written server side validation routine gets upset and drops me back on the form with all the fields empty. It’s lazy and a conversion killer. It’s not that hard to fix and there are several common patterns that a developer can follow to do it correctly.
Do Security Right
As the primary means for outside entities to interact with your server and data, forms are the vector point for all kinds of security issues. Improper security practices can leave your software, confidential data, customer information and more vulnerable to attack. The following are important issues you should consider when evaluating how secure your form is.
Don’t Save Data You Don’t Need
The is especially important for information like credit card numbers, medical information, passwords to other services and, in some contexts, user activity logs. You can’t expose what you don’t keep. This is basically the abstinence part of the strategy. It is often unpopular with clients for the same reason abstinence education programs are unpopular with teenagers.
Deal With Passwords Correctly
The fundamental rule for passwords is: Don’t save or send passwords in cleartext. Email is not a secure way to deliver a password. Saving cleartext passwords in your database is unacceptable. If it is required due to integrating with an old system, your first priority is to retire that system.
The second rule is: Don’t save or send passwords in encrypted text either. The first alternative that you will hear inexperienced people suggest is to instead save the password as an encrypted string. If someone forgets their password you can easily run the encrypted version through your decryption method and you’re set! That plan is only as secure as access to the key. If your web server is compromised the security of the passwords quickly drops to 0. Encryption is a stalling tactic; it will almost never protect you from a determined hacker.
The Correct Way: Save a salted hash. By saving a hash of the visitor’s password along with an appropriately long and unique salt, you are saving the smallest amount of information required to authenticate the user. You do not have their password stored anywhere or anything that could be converted to their password before the sun goes supernova.
This point has been made repeatedly by people more knowledgeable and articulate than me. Read these two guides to get more details:
What happens when a user forgets her password? When you use this method, you will have to also have a system where she can reset their password using a one-time URL that you can semi-authenticate by sending it to their registered email address. This does nothing to help a user with a compromised email inbox, but that’s not something you can do anything about.
A Promising Alternative: don’t store anything. In the past couple of years, web users have become more comfortable using third-party authentication services like Facebook, Twitter, OpenID and similar solutions. Offloading the security problems and customer service issues involved with user authentication is often a wise move if your web app can deal with it.
A final word of advice regarding passwords: Don’t make me create a password that is complicated in a particular way. Requiring users to create a password that matches a list of specific requirements is a Bad Idea™. By definition, it reduces the possible passwords to a finite set that grows smaller with each additional requirement. Typically, having strict rules for passwords results in your users writing their passwords down on sticky notes as they are not going to be able to remember yet another password. I think it’s ok to show an evaluation of the strength of the password. Google was one of the first companies I noticed doing this. This allows flexibility for the user while still pressuring them to choose a good password.
Lose The Gimmicks
A boring form is better than one that no one can use. It’s hard enough for most people to make it through a simple form. Introducing novel form elements, animations or other distractions, is a good way to drive those people to the back button.
You should follow the principle of least surprise. Every time your visitor has to stop to learn a new technique for clicking an option or they get lost looking for the submit button, your chance of converting them to a customer plummets.
Not only should the form be simple and free from distraction, the page it is sitting in should be as well. Triggering music or a video to begin playing without user interaction is a sure ticket to the back button for most users. Many of your visitors are in the office when they surf the web. An unexpected video blaring from their speakers will make you an enemy fast.
One last thing, it’s not so much a gimmick really, but lose the reset button. On its best day it’s worthless on others a very frustrating mistake waiting to happen.
Read The Back Of The Box
I am not a lawyer and the only legal advice I will ever give is to speak to a lawyer yourself.
Depending on where you live and where your customers live, you will have to be aware and comply with various laws regarding privacy, accessibility, data security and a multitude of regulations dealing with advertising rules, disclaimers, copyright claims, age restrictions, opt out policies and, of course, spam and commercial email laws. I won’t bring up the civil side with its affiliate contracts, disclosure rules, NDAs and endless patents and general trollery.
Speaking of lawyers, have you ever sifted through the detritus of a slightly used domain market? I’m fond of the Namecheap Marketplace myself. I enjoy seeing the same bad ideas pop up in different variations over time. The local restaurant guides that never got past a default WordPress install, the Multi-Level Marketing scams that retire in acai-berry-tinged waves, and, the perennial favorite, selling leads to lawyers.
You know what happens here. Some guy was trawling the domain auctions and was amazed to find such a great law related domains just idling by at $10 a pop. Some cursory research will show massive search traffic with through the roof CPCs. A gold mine! So he’ll snap up that domain, make a few calls and find out that it is against the law in most states for lawyers to give monetary compensation to non-lawyers in exchange for referrals.
Previous to these laws, you would have the sort of lawyer upon which we base the worst stereotypes of lawyers hire people to sit around hospitals, police stations and cemeteries to pass out their business cards. Given the sensitive nature of the legal matters in question, along with the moral hazard of rewarding people for other’s misfortune, laws were passed that restricted client referrals to other lawyers or “Lawyer Referral Services” that had to register with the bar.
If you’ve stayed up late or you’re a fan of daytime game shows, you’ve no doubt seen ads seeking people who have been in accidents or developed a particular loathsome disease to call in for a free consultation. If you look closely you’ll see fine print indicating that the ad is placed by a law firm (depending on your jurisdiction, etc.) That law firm is primarily in the business of selling leads to lawyers. I mean, they could probably help you get out of a speeding ticket, but for the most part they’re a leadgen operation that is eating up a huge market with artificially low competition due to the barrier of entry being a J.D. and entrance to the bar.
The moral of that story is that the easiest way to get ahead is to closely read the rules. The rules in your area and market are different than others, so I encourage you to figure out what the rules are and how you can operate within them. You can make a profit skirting the rules… for awhile. There are a lot of spammers with jet skis, but the guy with a Lamborghini is the one that figured out how to get into the inbox legitimately.
Common Sense: Surprisingly Effective
If you’re not a sociopath, you’ll stay within the letter and spirit of the law just by using common sense. Things like:
- Don’t ask for private information without a proper privacy policy. Most ad networks will not run your ads without one anyway.
- Be upfront and describe what kind of information you collect and what you will do with it.
- This is my template for a standard privacy policy
- I am not a lawyer, use at your own risk, yadda yadda.
Don’t store people’s credit cards, social security numbers, health information or anything else that you don’t want to be responsible for.- There are best practices and clear rules about what kind of data you can store, how to store it and for how long that you will find on the law books, your merchant account contract and that intimidating stack of agreements from Visa and MasterCard that you had to sign.
- No one can steal what you don’t have.
- You should learn to feel the same way about other people’s financial information that you feel about their toenail clippings.
- Use SSL on any site where you are asking for information beyond the visitor’s opinion.
- It doesn’t cost all that much anymore
- It’s not hard to install on most shared and managed hosting
- Computers are sufficiently fast that the overhead is not an issue.
- Add to that the fact that internet traffic is increasingly happening over public wi-fi. Even mobile devices will hitch a ride on available wi-fi when they can. SSL is a simple way to reduce you and your visitor’s exposure to that entire class of security issues.
- Don’t Spam. Seriously, it’s not cute.
- If your customers did not explicitly opt in to receive marketing messages from you, you’re not allowed to send any. Period. You can send transactional emails and “Forgot Your Password” types, but not your ads.
- Especially don’t say you’re not going to spam them and then spam
- Don’t auto-check opt-in checkboxes
- If you have to do that, it’s a sign that what you are offering is not of sufficient value to the visitor.
- It’s polite.
Test, Test, Test
Of all the elements you can include on your landing page, nothing will give you more bang for your buck than the form. Being the part of the page the user interacts with most, as well as being directly involved in the conversion process means the form has an outsized impact on how well your page converts.
Some of the things you can test on your form:
- Try asking for different information
- The number of form fields on the page
- Checkboxes vs. Selects (Dropdowns) and other variations on the UI elements
- The wording, placement and style of input labels
- The color, wording, size and placement of the submit button
- Using arrows, borders or other methods to highlight elements of the form
- Splitting the form into multiple fieldsets
- Using JavaScript to provide realtime help and feedback
- Where the form leads a visitor, depending on what options he or she selected
Many of those experiments will show little variation in goal completion, some will be unexpected hits. It’s hard to tell before you get useful data from real world visitors.
Form Follows Function
Build forms that don’t confuse your visitors, collect useful information and turn your visitors into customers. It seems rather straightforward yet forms are regularly the most difficult landing page elements to master. Maintaining your attention to detail and running valid experiments are the best ways to improve the forms on your landing page and improve your conversion rate as a result.
I hope this entry in my How To Build Great Landing Pages Series has been helpful. If you have any questions or insights, let me know on twitter @muddylemon.
