Ten Web Form Tricks to Boost Conversions | CRO Best Practices (Part 2/6)
In this installment of our conversion rate optimization best practices training guide, we'll go over best practices for web form design and layout. Keep in mind that CRO best practices are examples of successful strategies that have been used by other businesses to improve conversions on their websites. Keep in mind that no two businesses are the same, and what worked for another company might not work for your business.
This multi-part course on CRO best practices is designed to help guide you through this process.
In Part 1 we asked the important question of whether you should simply improve your existing site or completely rebuild it, have a look at how to design a more persuasive site.
For Part 2 we look at how web forms can be optimized to gather data more effectively, explore the impact of ‘The Fold’, copywriting and what visitors see (and read) on your site, and how to use call-to-action buttons to guide potential customers along the route towards conversion.
Web Form Conversion Rates
As much as we dislike filling out forms (of any kind), they are unavoidable, especially online where they are one of the primary means of gathering information from customers or potential customers. From sign-up forms, to quote forms, checkout forms, payment forms, customer feedback forms, and many more, they’re a necessary evil in the conversion process.
The problem with forms is that they are not only time-consuming to complete but often also quite invasive; asking for information that we would not normally divulge to what is essentially a total stranger. Information like name, surname, contact details, date of birth, and so on, information which used to be reserved for places like banks or health care providers, institutions with credibility, not an online shop where you want to buy two t-shirts for the price of one.
However, the web form is a crucial part of your strategy, as any user likely needs to submit one to become a lead, whether they came from SEO, Facebook, email, or your Google Ads strategy.
Here’s a brief look at 10 best practices for web form design to make your web forms more effective and increase conversion rates.
1. Clear expectations
Manage expectations by telling customers what to expect when filling out the form — how long is it going to take, how many steps, what kind of information will be required, what is the purpose of the form, and so on.
2. Keep forms as short as possible
The fewer number of fields, the better, but to a point. Ask only for the information you really need, but be careful not to keep the form so short that it negatively affects the perceived credibility of your site/business.
3. Increase form length on purpose to increase lead quality
While shorter forms will usually get more people to fill them out, the limited number of fields tend to lead to lower quality leads. However, there are times when you may be looking for fewer, but higher quality leads. Intentionally increasing form length will achieve this goal.
4. Multi-step forms
The longer the form, the more intimidating it gets. If your form has more than eight fields, you should split it up into two or more steps. Just remember to indicate where in the form you are (eg., Page 2 of 3).
5. Start with easy fields
One of the biggest challenges of a form is to get people to start filling it out. Once they’ve started, it’s easier to continue with the rest, therefor start with the easy info first, like ‘name’ and ‘surname’, then move on to the more difficult information like credit card details. Field label position and alignment can also help or hinder this process.
6. Pre-select what you can
Provide whatever help you can to make completing a form quicker and easier. One of the ways is to pre-fill information like location by using the visitor’s IP address.
7. Error feedback and validation
Few things are as annoying as spending time to fill out a form only to be met by an error message about some field you didn’t complete or filled out ‘wrong’. This can be avoided by being more specific regarding the information required, as well as validating information in real-time as the form gets filled out (not only after hitting the ‘submit’ button).
8. No CAPTCHAS
CAPTCHAS are meant to keep spambots away, but they can keep some humans away too since they are often confusing and unnecessarily time-consuming. There are other methods to make sure everyone who fills out a form is human.
9. Calm fears
With scams like phishing rife on the internet these days, people are hesitant to provide sensitive information to someone (or a site) they don’t trust. Use words and logos (such as an anti-virus seal) relevant to your particular site, and within reason, to alleviate fears among visitors.
10. Analyze form fields
No matter how perfect your form might seem, there may be areas that may cause form drop-off. Use form analytics tools to determine which areas of your form are making people hesitant.
The Fold & Ideal Page Length
Everyone knows how to scroll through websites, but it turns out that people don’t really like doing it. Scrolling, or the lack thereof, can impact your site’s conversion rate quite a bit. It all boils down to attention. People focus most of their attention to the top part of a website, and many rarely scroll down, if at all. Unless something grabs their attention, they won’t scroll down.
This part of a website that gets most people’s attention is called “the fold”. It’s named after the way newspapers are folded in half, with the top stories usually appearing ‘above the fold’, as it’s the first thing people will see when papers are displayed. On websites, ‘above the fold’ is the part of your website that can be seen on screen without scrolling.
How much of the page a screen displays depends on a number of factors:
- The screen’s resolution.
- The physical size of the screen.
- The number of tabs and toolbars on a web browser.
The Fold & Long Pages:
So-called scroll maps and heat maps are used to determine where on a site the most attention is focussed. There are several tools available for you to do it yourself. What the overwhelming majority of these maps show is that people’s attention fades quite rapidly, the farther down they scroll. Digging deeper, you’ll often find that the absolute most attention is actually in the top-left corner of the page.
Use this information to make adjustments to the design of your site — most important information first, the primary action you want visitors to take, followed by the least important information at the bottom.
A fold on every page:
It’s important to remember that ‘the fold’ rule doesn’t just apply to a site’s home page — it applies every page on your site where you want visitors to take (primary) action:
- A cart page should have a “go to checkout” button
- A checkout page, a “checkout” button
- Form pages should have forms and calls to action on top
- On pricing pages, the price or pricing plan should sit above the fold
The best page length:
When it comes to the overall page length, the ideal length depends on the type of site. E-commerce sites should be as long as it needs to be to sell products, while on social media sites like Facebook, Instagram or Pinterest, page length doesn’t really matter.
Other things to consider are how long it takes for a page to load. Shorter pages load faster and it creates a better experience, especially on mobile devices, but never compromise content for speed. There should always be a balance.
Copywriting and content
Contrary to what many people may believe, the way content is written and what it looks like are also elements of design. It determines what gets read on your site, and how easy it is to read and understand, and should be carefully considered when optimizing your site.
Here’s a quick breakdown of the different elements that should be considered.
Choose a font:
The type of font you use on your site can greatly affect readability, especially on mobile devices that might not be able to display your chosen font correctly. When choosing a font you should consider things like serif or sans serif, size (including line-height at different sizes), how different fonts work (or don’t work) together, and how it will display on different types and sizes of screens — when a browser can’t display a certain font, it defaults to a standard set of fonts. This might affect how your site is displayed, and thereby its conversion ability.
Copy should be structured in such a way that it’s easy to read and easy to digest. The best way to achieve maximum readability is to include lists, short sentences (50 - 75 characters, including spaces), paragraphs no longer than 3 to 4 lines, sub-headings every 1 to 2 paragraphs, as well as images related to the copy.
What gets read most:
People’s online attention spans are short, which means they don’t really read that much, and when they do, they very often just scan. This means that if you want people to read your content, you have to make it concise and scannable.
People tend to check if the headline seems interesting, scan through (or maybe actually read) the first paragraph and the first couple of bullet points, and then sub-headings to determine whether the content is worth spending time properly reading (or at least scanning). How well copy is written can make a big difference to how much gets read, so make sure you get a good copywriter. When copy is badly written, it can not only cause visitors to leave your site, it can also negatively influence how people see your brand.
Call-to-action buttons guide visitors from the decision-making process to ultimately making a purchase, signing up, requesting a quote, etc. They make it clear what steps should be taken next. These buttons come in all shapes, sizes, and colors, with no set rule of what they must look like or where they must be located on the site.
To make call-to-action (CTA) buttons as effective as possible they need to be noticeable, provide a clear next step, and the value of taking the step should be obvious. Here’s a brief look at how to achieve this — click on the link for a more in-depth analysis.
One call-to-action per page:
Ideally, there should be only one call-to-action on a page, such as getting more information. There may be secondary CTAs like ‘sign up for a newsletter’, but it should be obvious that it’s not the main focus.
Big buttons, white space & color:
Big buttons work better than small ones because they’re more noticeable, however, the size should be relative to the design of the site and not dominate it. This goes hand-in-hand with white space, or negative space, an important design element on any site. The space around the button can make it stand out from the rest of the site. Color can also increase the visibility of buttons. Simply put, if the CTA button is a different color to the rest of the site, it will stand out.
The right copy:
Using the correct copy not only makes a CTA stand out, but it can also make the next step obvious and communicate the value of taking it. Copy should be clear and specific about what the visitor will get when they click on the button by using certain trigger words like “click here” or “price”.
In the next part of this Fundamentals course on conversion rate optimization best practices, we will look at how e-commerce category pages, shopping cart pages, and check-out pages can be set up to facilitate greater sales.
Take the short cut to digital marketing success. Contact JMarketing and discuss your options to increase your conversion rates, and immediately skyrocket your results. Click this link and complete the inquiry form, we will contact you back right away.
Please also remember to subscribe to our blog & share on social media.