A website’s forms sit at the foundation of many different digital marketing strategies.
With so much emphasis on increasing qualified traffic to the blog post, , it’s easy to overlook the importance of a form’s user experience. From button color to the number of steps and field validation, is a wide world of opportunity.
In fact, research shows that abandon their shopping cart.
So, for most businesses, there is plenty of room to improve. Here’s your three-step plan to optimize web forms and increase conversions.
Step one: The “best practices” check
Take a look at your most important form. Is it something you’d willingly complete to receive what’s on the other end? Or would you be annoyed that providing this personal information stands betweeln you and the goal?
Once you’ve done this web form gut check, take a look through this list of best practices.
In general, less is more
Even if all the information on your form is necessary, there still may be room to consolidate.
Combine first and last name, make phone number one field, or break your form into two steps if you must ask for a large amount of information. Fatigue can easily set in with visitors if you ask too much of them with no positive result, even if that result is seeing a second form step appear.
Even small changes to simplify things can make much more enjoyable and effective.
Make your form easy to complete
When possible, choose radio buttons over dropdowns, avoid birthday calendar selectors, and make required fields obvious.
You don’t want visitors who intend to to leave frustrated because they missed a field or didn’t know a selection was required.
Keep your forms to one column
While it might be tempting to pack 17 form fields into one step on two columns, this will likely leave your visitors confused and misguided.
If you do need to request 17 pieces of information, consider a two or three-step form. You can even take this exercise a step further and consider best practice #1 by removing any less necessary fields and asking for them in a later portion of your conversion funnel.
Take a look at your heatmapsLucky Orange will show you the behavior of visitors in the area around your form.
Have a particular traffic source performing differently than normal? Segment your heatmap view to see only pageviews from that source.
ConsiderEverything on this list must be done with mobile in mind.
No matter how your site is developed, you’ll receive traffic from desktop, tablet and mobile visitors.
Users expect great experiences on mobile devices, so there is no excuse to let mobile lag behind your website’s abilities with desktop browsers.
Step two: Study Form Analytics
Once you’ve nailed down the fundamental best practices, it’s time to dive into your form data.
Here are the top five things you can use to monitor your form’s performance. As is with any data, work to establish benchmarks prior to making adjustments. You need to understand how things are functioning now prior to pushing for improvement so you can see if the changes you made had a positive impact.
Time to startSimply put, how long is a visitor on your page before they start filling out your form?
You only have so long to grab the attention of your visitors, so it’s important to place your form in a location that’s easy to find and easy to engage. Consider adding a pop of color (within your brand guidelines) to attract attention to the form.
Time per fieldHow long does it take for a visitor to complete each individual form field?
Any field that takes a substantial amount longer than the others may be an issue. Depending on what you’re asking for in each field, this metric will help you determine any fields that may need to be reordered, combined, or removed altogether. Do the names of each field mirror the information being requested? Are you confusing visitors by leaving out a possible answer option?
Average orderJust because you place an “email address” field at the end of your form doesn’t mean your visitors want to complete your form in that order.
This metric highlights the actual order your form is completed. The takeaway here is to re-order your form based on how users are behaving (which usually indicates the easiest way to complete your form).
Form abandonmentThe only thing worse than seeing an increase in traffic without an increase in form submissions is seeing an increase in visitors starting, but not finishing, your web form.
We recommend analyzing your form abandonment rate to determine which field the user last engaged with before abandoning the form altogether.
Many of our customers will see fields asking for personal information like a phone number leading to the most abandonments.
Of course, you may not be able to remove this from your form, but there may be other adjustments you can make. These include adding language near your form explaining why you’re asking for their information, moving this field to a second step, or adjusting your funnel to obtain this information later.
Repeated fieldsSimilar to form abandonment and time per field, this metric allows you to see which fields are giving people the most issues.
Whether they are trying to complete your form with fake information that’s being rejected by form validation or leaving a field empty in hopes of not providing it, you can spot anything that’s causing an issue.
This may be an opportunity to include text inside the field showing the format of information being requested, again, to clarify why you’re asking for the information with text outside the form.
Use to easily track and optimize these five key form conversion metrics.
Once you’ve placed the Lucky Orange code on your site and identified your forms, the form analytics tool goes to work and soon you’ll be able to view your unique metrics.
Step three: Run optimization tests
After applying best practices and collecting key form metrics, it’s time to perform a few basic optimization tests. There are a wide variety of testing tools available, including (which offers free and paid versions). It’s important to always test until reaching so you can be confident with your optimization decisions.
Pro tip: Don't forget about using a survey to better understand what your customers are really feeling about your forms. This vital information not only helps your team optimize your website but can help establish .
Add form validationDepending on the technology powering your forms, this may be as simple as adjusting form settings.
Adding validation to fields such as “email address” or “zip code” can help you receive cleaner, more accurate submissions, resulting in an improved experience across the board further down your funnel. Typical validation will return an error message if the provided information doesn’t match requirements such as formatting or even accuracy (such as “real” zip code).
Run simple color and copy testsWhile submit button color and call-to-action tests may seem elementary, if you’ve never done them on your site, you may be surprised by the results.
Remember, your web user experience is driving an emotional response from the visitor, and colors are one of the more emotion-provoking tools you have. Be sure to use direct, simple language in your call-to-action and avoid words such as “click here” that make the visitor more self-conscious about their actions.
Adjust form order and remove less-necessary fieldsConsider using to remove or make optional fields that are not absolutely necessary at this point in your sales funnel. Just because you want a piece of information, doesn’t mean you need it.
Furthermore, this piece of information may be the difference between a visitor completing the form or not. Based on learnings from our five key form metrics, you may already spot an issue with form field order.
Playing with field order is a great test and one that can lead to a notable impact on .
Making your forms perform at a higher level should be a top priority for your business, no matter where you are in your growth plan. Even small wins in this area can lead to massive increases in revenue, community building, or any other conversion-centric KPI.
Now it’s your turn. Start using our tool to keep an eye on your web forms, cross-check your forms against our best practices list, and begin with a few basic tests to validate your current form setup.