Website Form Analytics
What are Web Forms?
With the advent of modern technology and the changing face of the internet, websites no longer exist just to share information with the masses. But rather morphed into perfect tools for businesses to communicate with their potential customers, gather necessary data, and use it to their advantage. Among a lot of factors that contribute to the success of a website, including carefully crafted content, intuitive navigation and site structures, and convincing call-to-actions, web forms serve as one of the most crucial usability factors of all.
But, first things first, let’s understand what exactly a web form is?
A web form, or otherwise known as an HTML form or an online form, is a simple, structured page element that contains several fields or spaces for people to input data. Each of these fields holds a specific label that gives visitors an idea about its intent and the kind of information to be filled therein.
While traditionally, forms were only used for collecting data in the form of surveys, today, they’re extensively utilized across an array of domains to establish a proper channel of communication with online visitors, track data regarding purchases, get more subscribers, and generate new leads. In fact, in today’s digital world, it’s hard to think of an online business that doesn’t have at least one form embedded on their website.
As per statistics published by WpForms, nearly 74% of companies make use of web forms as one of their primary tools to generate leads, with about 49.7% of them stating that online forms serve as one of their highest converting lead generation tools when compared to their counterparts.
Here, in this document, we’ll focus much about the hows and whys of using web forms and the crucial role they play in conversion rate optimization.
The ABC of Web Forms
Contrary to what’s conventionally known about web forms and despite heavy advances in the field of human-computer interaction, web forms remain as one of the most effective and predominant ways for users to interact with a website. They’re not just any other tool to gather information from perspectives, but one of the most effective mediums for businesses to indirectly establish a cordial relation with them. From as simple as a subscription form to a complex survey, forms have been helping both users and organizations behind the websites to align their goals with each other and fulfill their respective objectives.
But, for forms to be successful – help businesses achieve their goals – web forms must be designed, keeping in mind some basic usability factors. For if they do not make sense to your visitors or are highly complicated in nature, the chances are that visitors will lose their interest and even abandon the site.
So, let’s get started and learn how to create effective, efficient, and satisfactory web forms for your website.
Define The Purpose Of Your Form
The first and foremost step to creating a web form is to define its purpose comprehensively. Your visitors must know exactly what the form is all about and why they should fill it. Here are a couple of ways to do so.
- Understand Different Types of Forms: Giving the right title to your web form is crucial, for it’s one of the primary ways to make your visitors understand why they’re filling a particular form. For example, a form titled ‘Contact Us’ clearly states that it’s meant for visitors to leave you an enquiry or feedback. Meanwhile, a form titled ‘Subscribe Now’ is meant to get more people to subscribe to your blogs, newsletters, etc.
- Include Easy-To-Understand Form Headline: Easy-to-understand, straightforward headlines effectively help visitors to fill in the right information in the right field. They also help avoid any confusion and ensure that visitors spend the least amount of time on the web form. “Name,” “Email Address,” and “Message” headers shown in the image below are perfect examples to quote here.
- Provide Clear Instructions: It’s a good practice to clearly communicate the kind of information you’re seeking from your visitors. For instance, add a sentence or two on top of the form which clearly states the purpose of the form, or specific instructions for a particular field, such as “the password should be at least 8 to 12 characters long.” You can also add a short statement about why you need this information to maintain transparency.
- Appearance Matters: Clean and organized forms are always welcoming. They not only provide a clear picture of what needs to be filled in the defined spaces but also promise a good end-to-end experience. At the same time, ensuring that these forms are mobile and website responsive is equally important. For they’re not, they’ll surely ruin a visitor’s experience.
- Focus on Usability: The way web forms are created, customized, maintained, and presented to visitors on a site defines their effectiveness, efficiency, and level of satisfaction they offer. Usability not only promises a good user experience but also helps increase conversions.
How To Choose the Right Web Form
No matter how beautifully designed or aesthetically strong your website is, if it doesn’t have the right forms embedded on the right pages, you’re bound to lose out on a lot of potential leads. At the same time, web forms widely vary in length, appearance, format, and content type. Carefully selecting the correct ones is utmost important.
Below mentioned are some common web forms along with a few words on where and how to best use them on your website.
These are the simplest yet the most important to all web forms and considered as an extension of your company’s email address. Typically, content forms are concise and contain no more than two to three fields.
A smartly designed contact form helps cultivate a strong visitor-relationship and enhance overall user experience. Although every business running online is different (with an equally different target customer persona), the advantages of having a contact form are practically the same. They:
- Promise better engagement with prospects
- Help gather essential visitor data
- Vet new prospects and boost email list
- Protect business mailbox from spam emails
- Help decrease the bounce rate and improve conversions
Here are some examples of great contact forms:
Example 1: Marvel is one of the leading digital platforms that allows individuals to build digital products such as wireframes, prototypes, design specs, etc. with utmost ease and comfort.
Of the many things that fascinate us about this quirky website, its contact form tops the list. Simple, sober, and chic, the form comprises of not more than four generic fields allowing prospects to communicate with the business behind the website easily. The addition of beautiful illustration on the form help catch a prospect’s eye, subconsciously urging them to take the desired action.
Example 2: Stripe is one of the best technology companies that helps online companies accept payments and manage their business activities easily.
Take a look at Stripe’s contact forms, and you’ll note that besides having a clean design and direct messaging, the form has a warm and friendly tone. What really captures our attention is how they’ve given examples of the kind of content to enter into each form field, making it easy for people to understand and follow the guidelines.
Lead Generation Forms
No matter how good your website is, if it doesn’t have the right elements to push your visitors down the conversion funnel, it’s not doing a great job. Of course, compelling content and strong CTAs top the list, but high converting lead generation forms are equally crucial for a website.
Here are some examples of good lead generation forms:
Example 1: Slack is a cloud-based online collaboration tool that allows teams to stay connected and work in a synchronized manner. Unlike its counterparts. Slack likes to keep things simple, including its lead generation form – pretty much evident from the image attached below.
Unlike a typical lead generation form with a plethora of fields, Slack starts by simply asking for your email address. It then directs you to another landing page to input a few more necessary details to kick start the rest of the process.
What makes Slack stand out is its smart strategy to split up the entire form-filling (lead generation) process into multiple steps (and pages). It plays with the minds of its prospects – making them fill a complex form in the most simplified manner, and adds unique animations, which makes them look quirky and appealing as well.
Example 2: eToro is the world’s leading social trading and investing platform allowing individuals to invest in stocks, currencies, indices, commodities, and much more.
One of the best ways to get people to sign-up for your services is by providing them with the ease to do so. And, eToro understands this quite well. The online trading and investment platform gives you the leverage to complete its sign-up form by integrating it with a social media platform such as Facebook, Google Plus, or Linkedin. This increases the chances of conversions manifold as social logins fast track the entire account creation process.
More than anything, checkout forms serve as a basic necessity for ecommerce businesses today. They not only help the companies gather all the necessary information from the customers to process their orders, but also create a streamlined procedure to maintain internal functionality.
Usually, checkout forms are lengthy with about a minimum of 8 to 10 fields, and spread across multiple steps and/or pages to smoothen the entire purchasing process.
Here are some examples of good, easy-to-fill checkout forms:
Example 1: Enter Domino’s website, and you’ll be mesmerized by its design – how beautifully the brand showcases its entire range of offerings under one roof. More so, as you proceed to place an order and make the payment, it’s an easy breeze.
The brand understands that not everyone who comes to their site would like to go through the tedious process of registering as a user first to place an order. Instead, Domino’s allows visitors to place an order by furnishing some basic details only. This way, they not only promote a simple, straightforward checkout process but gather essential visitor data as well.
Example 2: The iconic lingerie shop, Victoria’s Secret derives nearly 20% of its annual revenue from its ecommerce store. One of the early adopters of online sales, VS has over two decades of experience in designing beautiful checkout pages.
Along with a clean and intuitive design, VS pays much attention to the page’s CTAs. Further, the checkout and the chat buttons have been smartly placed on the top bar to boost conversions. The brand has also strategically divided its checkout form into three distinctive segments – Addresses, Delivery, and Offices & Payment – making it easy and convenient for customers to complete the entire process.
From SaaS to ecommerce and media platforms, sign-up forms are everywhere. Also known as registration forms, these practically act as a primary source of data collection and lead generation for most companies operating in an online business arena. The key to creating a high-converting sign-up form is to be minimalist. The simpler the sign-up or registration process, the higher are the chances of visitors filling them out and becoming a part of your lead database.
Here are some examples of great sign-up/registration forms:
Example 1: Facebook practically has over 2.4 billion active users today with the numbers increasing even as we speak. But, how did a social media platform gain such heights? The answer of quite simple – sign-ups. To access Facebook, one needs to sign-up on the platform, only then can they explore the site and make the most of it. Here’s how its sign-up form looks like:
Facebook has a crisp and compact sign-up form, with only four fields, which asks for only the essential information from individuals. As per the research done by Martech, having not more than four fields in your sign-up form can uplift conversions by about 160%. This is because visitors do not feel fatigued or irritated when they have to fill a short, concise form than a long and tedious one.
In addition to this, Facebook’s sign-up form is flexible. You can sign-up either by using an email address or a phone number. Furthermore, the copy that complements the form is also well-written – expressing more while being minimalist.
Example 2: MailChimp is another great example to quote here. Besides being an easy-to-fill form with not more than three input fields, the platform also provides necessary instructions eliminating the chances of errors.
What’s good about MailChimp signup form is that it gives you the option to see your password while creating one. This not only helps you create the right password in the first attempt but also removes the need to confirm the password field again. This further saves time as well as improves the UX design of the form.
Subscription forms are quite similar to sign-up or registration forms. The only line of difference between the two is that while sign-up forms aim to give you access to the inside world of a site – Facebook’s feeds, groups, and other features, to say – subscription forms allow you to subscribe to a site’s services such as its newsletters, blogs, articles and so forth.
Just like any other form type, subscription forms too come with agenda – to increase a website’s subscriber base. The more subscribers, the more are the chances of converting them into potential customers.
Let’s take a look at some of the best examples of subscription forms.
Example 1: Most online businesses like to keep their subscription forms simple and embedded either above the footer or in the sidebar. But, neither they’re attractive, nor they fulfill the basic agenda of having a subscription form on the website. Instead, pop up subscription form helps convert better. And, Joann.com understand this pretty well.
The site uses a pop-up subscription form to lure its visitors to subscribe to its services. The pop-up appears within the four seconds of a visitor’s stay on the website, which is typically an ideal time to grab the attention of a prospect.
Along with a quirky design and crisp content, the company offers a 20% discount to all its first-time subscribers. With this, the brand achieves two goals – increasing its subscriber base and getting visitors to buy its products to avail the 20% discount offered.
Example 2: Just like the rest of the website, Moz likes to keep its subscription form equally simple yet engaging. The leading software company concentrates much on selling the value behind its subscription and addressing the pain points of its persona than focusing on getting leads.
From the content to design, Moz ensures to highlight what’s important and why visitors should subscribe to its services.
Agree or not, but no business, be it a software company, a travel agency, or an ecommerce site, can succeed without market research and customer feedback. For the simple reason that market research helps organizations understand the needs and demands of their target audience and make sound business decisions.
This is where survey forms come into play. They’re not only the oldest form of gathering customer data but also the most effective one. Online survey forms help you gather accurate and measurable feedback from your potential and existing customers regarding your business’s operations, products and/or services offered, study the market trend, understand future prospects, and much more.
Let’s look at some examples of survey forms:
Examples 1: When it comes to offering the best customer experience, none have mastered the art as Netflix. With a strong AI-driven recommendation system, the platform is highly customer-friendly as well. It studies user behavior and recommends them shows, movies, and television series basis their likes/dislikes, ratings, and recent searches. It also uses survey forms to collect necessary user information to augment its services and enhance the customer experience.
Example 2: Amazon is another market giant that extensively uses survey forms to collect customer information and feedback. The reason being, no matter how good and strong your recommendation algorithms may be, authenticity strikes when customers themselves share their thoughts.
The brand’s survey forms are precise and concise. They’re to-the-point, easy-to-fill, and ask for only the basic information.
Pay Attention to Form Design Details
Not everyone landing on your site would pay much attention to your web forms unless they’re or mandatory-to-fill to proceed. But, no matter how important a step they maybe, if they’re not simple, straightforward, and aesthetically pleasing, visitors will ignore them and even abandon your site.
To simply put, attractive web form designs with engaging content not only help provide excellent user experience but increase conversions as well. They show users that your brand is professional, tech-savvy, thoughtful, and enjoyable to work with.
Here are some tips and tricks to designing web forms that convert and promise great user experience.
Follow the KISS Rule
One of the basic facts to keep in mind while designing a form is to follow the KISS Rule – Keep it Simple Silly! The simpler and straightforward your form is, the more are the chances of people attempting the forms, submitting them, and aiding to conversions. For a reason that people only fill up those forms which either have a limited number of fields, spread across two to three steps, or compelling enough to keep their attention focused on filling the entire form. Imagescape is a great example to quote here. The online design studio increased its conversion rate by 120% by simply reducing the number of its form fields from 11 to 4.
But, just because a form converts more doesn’t mean it’s doing wonders for your business. The real test is when the quality of leads which get generated through these forms is also good. So, when designing a web form, try and include only the most important information and eliminate adding any unnecessary fields and questions, which may ruin a user’s experience.
Use the Single-Column Layout
By organizing your form fields in a single-column layout, your visitors are least likely to miss out on filling any form field. They’ll complete the entire form in an order that makes sense, and even submit the form faster than expected they would if you used a multi-column form.
As per a study conducted by CXL Institute, it was found that people were able to complete a single-column form about 15.4 seconds faster than a multi-column form. Meaning, visitors do not like wasting much time filling a form, and rather appreciate one which is simple and straightforward with a synchronized design and one that makes sense to them.
Follow a Logical Order
Ask details logically. Think from a visitor’s perspective than from an application or database’s perspective. Ideally, you must ask for a person’s name, email address and phone number, than asking for their address or credit card details right away.
- Group related information together.
- Use multiple columns instead of one in case your form is too lengthy.
- Logically use input fields. Common methods include, text fields, password fields, drop downs, checkboxes, radio buttons, and date-pickers.
Use Inline Form Field Validation
It’s a process wherein a visitors’ information is reviewed and validated in real-time as they move from one form field to the other. If a visitor fills incorrect information in a field, for instance, their email address or credit card details, show them an error message then and there to notify them of the error. This not only helps visitors correct their mistakes quickly and move to the next question but also reduces form friction.
Align Text to the Left
As a rule of thumb, always align your text, including labels and questions, to the left side of the form. This is because we humans have a natural tendency to read from left to right. Researchers at the University of Basel also back this theory. They found that aligning text on the left side of the form and typically above each field box, reduces friction along with the amount of time spent on completing it.
Put Related Information Together
Grouping related information fields and in a local manner, serves a dual purpose. It helps maintain the flow of the questions in a form and helps visitors make sense of the information they need to fill in every form field. Here’s a great for your reference:
Clear Titles are Always Appreciated
As stated above, adding a line or two as form title gives visitors a clear vision of what exactly the form is all about. For example, a simple title like “Get in Touch” clearly states that the form will help visitors contact the business behind the website. Or, “Grab Your Copy” means that the form will give visitors access to the site’s gated content, such as a case study, a research paper, and so forth.
Use Auto-fill Feature
Typing is one of the most time-consuming and intensive aspects of filling a web form. And, more often than not, this also leads to errors and increases interaction time. Replacing text boxes with buttons, using sliders with the relevant option, and integrating autocomplete feature can reduce efforts as well as increase conversions.
Add Summary Boxes for every Plausible User Concern
t’s always a good idea to add a summary to each form field where visitors are likely to face a problem. For instance, add proper instructions related to password creation, such as “Your password must contain at least eight alphabets with one case character and one special character.” Addressing concerns by adding summary boxes next to important form fields not only helps clarify the intent behind the asked information, but also aids to fast track the form filling process.
Include Smart Defaults To Web Forms
Adding smart defaults to your web forms is another great way to speed up the form-filling process and ensure accuracy. As the name suggests, smart defaults effectively use a visitor’s information such as their current location, etc. to automatically fill in the relevant details and save them the hassle of entering data in each individual field.
Add Progress Bars in Case of Long Forms
The mere thought of filling a lengthy form is intimidating for most of us, let alone actually filling them. But, when you do not have a choice and use long forms on your website, smartly break them down into multiple steps or sections, and add a progress bar. Amazon uses the same technique on its Amazon Associates page.
By doing so, users can not only track their progress throughout the form filling process but also know when they’re almost done. More than anything, it’s a psychological ploy which plays with the minds of the fillers and triggers user behavior. If a user thinks that the forms are never-ending, they’re more likely to bounce off even before completing the entire form.
On the other hand, adding sections or showing progress helps make them understand that they’re halfway through and only a couple of more questions demand their attention. The lesser the field time, the lesser shall be form abandonments.
Indicate the Intent of Importance (Mandatory vs. Optional)
In addition to the above mentioned best practices, indicating the intent of importance, i.e., whether a form field is mandatory or optional, is equally important. By doing so, you make sure that visitors fill in all the essential data while giving them the option to leave out fields which are least important in nature. The convention states to use an asterisk (*) to mark the mandatory fields and the word “optional” for ones which are not required.
Now that we’ve established what web forms, their types, and the best practices to create effective and engaging forms are, let’s deep dive into their analytics – study their intent and their importance in increasing conversions.
What is Form Analytics?
As the name suggests, form analytics helps measure a visitor’s interaction with a web form like interaction time, hesitation time, abandonment rate etc.. It typically comprises of many elements that aim to find and highlight a user’s experience or their overall journey throughout the form filling process while analyzing their pain points, taking the right measures to solve the issues, and gathering all the necessary data for internal business use.
Simply put, a form analytics process helps track just about every move made by a visitor while filling the form – from where they started, the movement of their mouse throughout the process, the areas they slipped, where they abandoned the form and so forth.
Why is Form Analytics Important?
The primary aim behind using form analytics is to measure the behaviour of a website visitor on a web form. Further, use the gathered information to optimize the forms as well as look for the right opportunities to convert visitors into potential leads.
Form analytics as a process helps you:
- Get Deeper Insight into which Customer Segment to Focus on and Organize Data – Filter, sort, and export data collated from web forms to match your business needs. Build individual data views by focusing on the most critical data points, and further use them to achieve business goals.
- Reduce Form Abandonments – On average, 76% of people who start filling an online form never reach the form completion stage. For reasons that either the form was too long for them to attempt or asked for information, visitors were uncomfortable to furnish. So finding such details and friction in the form filling process can help you reduce form abandonment .
- Identify New Opportunities – By understanding the exact intent of your target audience, you can use the gathered information to spark new business ideas. For example, if most of your visitors are abandoning your form as they get to the pricing or budget field, you augment the option and provide them with lower-priced or other relevant choices, reducing hesitation. You can further use such information to target an altogether different market segment and expand your business opportunities.
- Learn Valuable Lessons from Input Errors – Analysing errors help identify cause and effect, further enables you to improve your form(s) in terms of their design, the information asked, and other related essential elements, and maximize their usability.
How to Analyze the Performance of Your Web Forms?
There are approximately a dozen metrics you can use to analyze the performance of your online forms. But, deciding which ones to focus on and when can be a daunting task. To make things easy and convenient for you, we’ve divided the entire form analysis process into two prime stages.
- When people visit the form page
- When people interact with the form
So, let’s get started and learn about the best tools for form analytics.
When People Visit the Form Page
When a person pays a visit to any webpage, they look at a plethora of things – a page’s overall design, its content, embedded images, products or services offered, and so forth. Amid this, forms are usually among those page elements which get least attention. For the reason that either they’re not visually appealing or visible enough (merged in the site design) for people to see them right away or they’re too lengthy (or intimidating) for people to even consider filling them in the first place. This is where the initial lag happens.
To check these fallouts and the reasons behind such intimidations, quantitative, and qualitative analytical tools like analytics, heatmaps, clickmaps, session recordings, etc. come in handy. These tools not only allow you to analyze the overall performance of your web forms but also help keep a tab on the movement of your visitors throughout their journey.
There are several quantitative analytical tools which you can use to track visitor interaction with web forms. With analytics, you can check total page views time spent by a visitor on a form, its bounce rate, and so forth.
In addition to this, the analytical tool also furnishes information about the location of a visitor, the operating system and devices they’re using to access the form, their demography, and even shows the number of visitors currently active or filling a form on the site, total time spent, bounce rate, and more in real-time.
Heatmaps is a qualitative analytical tool that offers a visual representation of how visitors interact with a web form, which elements are catching their attention, which ones are distracting them, and so forth. For instance, in the image below, the highlighted portions, especially the red, orange, and yellow patches, show the areas where people are concentrating their attention the most.
Similar to heatmaps, clickmaps also furnish real-time data about where visitors are clicking on a page and the pattern they’re following while interacting with it. Such information helps find out the key action points and the ones causing a lag or distraction in a visitor’s form filling journey.
Session Recordings is another key matrix that helps study the behavior of your website visitors while they’re on your website. The tool allows you to:
- Track actual mouse movement of a visitor as he/she moves through the web form.
- Check where they’re hesitating, moving smoothly, spending the maximum amount of time, and where they’re bouncing off.
- Record observations for further analysis.
While these tools give an overall view of how website visitors are viewing your web form, the actual task begins when visitors start filling out the forms.
When People Interact with the Form
In this stage, we’ll typically talk about field level statistics of a visitor’s interaction with a web form. Meaning, how they begin their form filling journey, where do they hesitate the most, the total time they spend on the form, where do they drop off, and so forth.
Primary form metrics to study at this stage are as follows:
Total Time Spent on Forms
The metric typically defines the total amount of time taken by a visitor to complete a form along with the total time spent by them on every form field. This data typically helps identify form fields where visitors are concentrating their attention and even where they’re hesitating.
Total Time = Interaction Time + Hesitation Time
Interaction time with Web Forms
Interaction time counts as the time spent by a visitor actively filling a form. This includes everything – their movement from one field to another, their hesitations, filling and refilling fields, and finally submitting the form.
Hesitation time counts as the average time spent by a visitor on a particular form field. This generally includes a detailed time report that uncovers insights like minutes (or hours) spent by a person thinking what to fill in a field, what does a specific field mean, whether or not should they furnish the asked information in the form and other related ambiguities.
This metric typically calculates the percentage of visitors who refilled a particular form field. A high percentage of refills means that visitors are facing difficulty in interpreting what a specific field means.
Ignore rate underlines the number of people who submit the form but leave some form fields empty. Ideally, the fields which are ignored by visitors are the ones which spike the form abandonment rate.
Drop Off Rate
Drop off rate indicates the percentage of people who do not submit the form, either because they’re asked for specific information which they do not have handy, or find the form too difficult to attempt.
Besides the metrics as mentioned above, you can also pull out form submit data in the form of funnel reports and date range graphs to study overall visitor engagement and identify pain points.
Form Funnel Report
Form funnel reports help you deep dive into the nitty-gritty of how visitors landed on one of your web forms, what percentage of them actively interacted with the form, and how many of these visitors finally submitted one. The report also furnished additional information and specific reasons behind drop-offs at each form field stage.
Date-range graphs enable you to compare form conversion data over a period of time. You can also use these graphs to track changes made on specific dates. For instance, adding a couple of fields to an existing form or replaced some with a new field such as phone number field replaced with an email address, and so forth.
To conclude, form analytics platforms are not just another tool to fetch data, make assumptions, and amend forms on a trial and error basis. Rather they offer a streamlined process allowing you to take advantage of their advanced capabilities and metrics to derive tangible information about your web forms, their performance, and their engagement rate.
How to Optimize Web Forms using A/B Testing and Form Analytics
Understand that designing forms while keeping in mind the above mentioned best practices is the first step to creating effective and engaging web forms. But, using the gathered data from qualitative and quantitative analytical tools to optimize them in the most comprehensive manner is what leads us to more quality conversions.
In a nutshell, optimizing your forms is typically a three-step process:
- Evaluate the information collected from the forms, respective pages, visitor analytics reports
- Turn the gathered insights into a set of discrete observations and hypothesis, followed by an actionable strategy for tackling each of the observations, and
- Execute the plan and iterate until you achieve satisfactory results.
While there are a plethora of ways to improve the performance of your web form – making a couple of changes here and there, adding and omitting form fields or changing button text, validating whether or not these changes would surely help increase conversions sustainably is a tricky question.
This is where A/B testing comes into play. A/B testing is nothing but a statistical tool that helps evaluate the performance of an existing form basis the data gathered from form analytics tools against its variations and comparing their individual results for better conversions.
But, first things first, let’s understand what should you actually test. For the simple reason that an A/B testing tool allows you to test anything and everything that you can think of. So, draw a line here!
Prepare a list of the top form elements using the data collected from form analytics tools, which you think can directly impact your form’s conversion rate. Essentially there are five primary form components which you should A/B test. These are as follows:
- Length: As established above, the length of your form can make or break a deal for you. So, test this form element for frictions. Roll out a variation or two. Test them on a custom audience segment and track their performance using form analytics. For instance, remove just one field. Test it against control for volume and quality of leads, and finally analyze the impact of the field on the overall performance of the form. You’ll get a fair idea of whether or not the removed field was the actual cause of problem.
- CTA Button: This is usually overlooked form element. A small change to your CTA color and text copy can showcase surprising results. As per recently published data, it has been seen that changing the text of your submit button can typically increase submissions by 250%. It’s just a small swap which can significantly boost your conversion rate.
- Form Design: (fonts, colors, field placement, desktop vs mobile) Using contrast colors in a form or changing the font of the text, playing with the fields and their alignment, and also checking their responsiveness on desktop, mobile and other platforms are some basic components which can make a form attractive and get more conversions. For instance, if your form is white it color, use yellow or orange (contrasting color) to highlight its fields and black for text input. Then run an A/B test to check whether or not your selected colors schemes are working well for your form.
- Form workflow: (single-step vs multi-step, progressive vs static) Certain types of forms work better in certain types of situations. Understanding where you must integrate a single-step form and a multi-step one is very important. For example, most customers stop short of filling long checkout forms, especially on an ecommerce site, which results in high abandonment rate. In such a case, integrating a multi-step form is always a good idea. On the other hand, if you’re only looking for some basic information from your visitors, such as in the case of a lead generation form, a single-step form would best suit your needs. Apply the same logic when it comes to integrating static and progressive forms on your site.
- Form Position: The positioning of your web form plays an important role in getting more leads. But whether you should place it above the fold, below the fold, or use a two-step opt-in process, this can be a tricky thing to analyze. As a rule of thumb, place your form below the fold if your product or service:
- Is expensive
- Is complex and requires more copy for explanation
- Requires a high commitment
In rest of the cases, it’s best to run an A/B test to find out ideal form placement positions.
Once you’ve decided which element(s) to test, set some goals. For instance, if you want to test the performance of your submit button copy placed on your case study page, your goal should be to get more conversions. Here’s what you should do.
- Thorough Research and Come Up with Observations: Check how the element is currently performing. Pull out data from form analytics tools such as heatmaps, clickmaps, session recordings, etc. and analyse it in a detailed manner.
- Propose a Hypothesis: Create a data-backed hypothesis that aims to satisfy your set goal as per your observation. Without this, your test campaign wouldn’t sustain. In this case, hypothetically speaking, change your existing submit button copy from “Submit” to “Grab a Copy” or “View Case Study.”
- Create Variations: The next step is to create form variations basis your hypothesis. A variation is basically another version of your current version (also known as control) with suggested changes you want to test. You can create as many variations as you want to set against the control to check which one converts better.
- Test your Variations: Once you’ve created the variations, place them on your website and kick off the test. Carefully calculate the duration of your test keeping in mind your average daily and monthly visitors, existing conversion rates, expected conversion rates, number of variations you’ll test, and percentage of visitors you’re targeting.
- Analyze the Result and Deploy Changes: This is the step where you analyze the test results and see which variations outperformed their control. Check the impact and deploy changes.
Understand, it’s not necessary that a variation will outform its control. But, continuously testing ideas and looking for ways to improve the performance of your forms is what can help increase conversions.
How to Optimise Web Forms to Get Better Leads?
In this section, we’ll talk about how to optimize your forms to get more quality leads. But remember, there’s no one-size-fits-all. While some of the below mentioned best practices may work wonders for you, many others may not be much effective.
Move Your Form Above the Fold
Everything we do on a website is to increase visitor engagement and get the right people on board. Afterall, it’s about conversions. As per statistics published by LukeW, visitor engagement usually peaks above the fold. So, placing an important page element like a web form in this particular fold can help maximize its exposure to the incoming traffic and capture more leads as well.
Make your Form Headline a Call-to-action
As stated above, a headline helps visitors identify the intent of the form. But, a good headline with a catchy call-to-action encourages visitors to complete the form and enter your sales funnel. In the image given below, you’ll see how Salesforce has used two powerful call-to-actions, “Save Time. Use your Preferred Social Account,” and “Don’t want to use a social account? Easy. Just fill in the fields below.”
You too should use such headlines to grab the attention of your customers. Here are some more examples of good, catchy headlines you can use for various web forms:
- Save Your Seat. Book Now!
- Insights Delivered Daily to your Inbox!
- Grab Your Free Copy!
- Where Should We Send Your Free Copy?
- Yes! Let’s Start My Free Trial
- Are You In? Let’s Get Started!
Include the Right Number of Fields
We often stumble upon articles over the internet insisting us to keep our web form short and simple. Although it’s true, but it’s what we call as half-baked-information furnished. Long forms can intimidate people and steer them away from completing them, but a shorter form can decrease its perceived value.
The length of your form should always match its intent. If you think your form is good-to-go with only two input fields, such as when you’re giving a free checklist or offering subscriptions to your blogs, then keep it short. On the other hand, if you think that you’d want to collect substantial customer information for data check and usage, then keep it long.
Use Multi-Step Web Forms
Sometimes long forms become a necessity if you’re an ecommerce company, a travel booking platform, or someone engaged in offering financial advisory services. And, as we know that long forms can be intimidating. There’s a catch – use multi-step forms or allow returning users to skip the hassle by saving their information.
In the case of first time users, dividing your long forms into multiple stages (as seen in the case of Victoria’s Secret) is a great way to make people fill a form without intimidating them. Uber is another example to quote here. The multinational transportation network company uses this trick to create a smooth conversion process for its visitors. Notice how the form is short and crisp at each step, and its CTAs effortlessly directing visitors to the next step of the form.
Hide Previously-Completed Form Fields
Similar to the above mentioned point, hiding previously completed form fields in a customer’s form filling journey also proves effective. To give an example here, The ‘Who’s Who Of Executives & Professionals’ uses multi-step form on their homepage to encourage their visitors to check their eligibility to the network.
Notice the image above, the business has embedded a well designed form with step indicator arrows (visual cues) to tell their visitors that they have completed one step and should now move on to the next one. In addition to this, their CTA button also has an arrow indicating the prospects that they aren’t done yet with the application process.
Add a Save Button
Most often people drop off while filling long forms or when they’re asked to furnish very specific information such as their credit card details or identification document copes, etc. (which they may not have handy). To keep you logged in customers from completely abandoning the form or starting the entire form filling process against, add a “Save” button on your form page. Give them the leverage to continue from where they left.
Use Real-time Form Field Validation
Having a real-time data validation application embedded on your form is important. It not only helps fasten the entire form filling process but also enhances a visitor’s experience, further reduces drop-offs by a significant level.
- Locating Errors is Easier: Real-time data validation helps users identify errors immediately. Meaning, they’re corrected then and there (at form field level), and prompted to input correct information to reduce frictions.
- Build Confidence: Legitimizing data while a user is filling the form helps increase the confidence of the fillers as well. As the fields are validated from one to another, users don’t have to go back and review the form for errors before submitting it.
- Reduce the Chances of Abandonment: If users are prompted about their errors after they’ve completed the entire form and hit the submit button, the chances of them attempting the entire process again are quite low. So, pointing out errors right when users are on-to the task is always better and a good technique to keep users from abandoning the form.
Ensure Your Visitors’ Privacy.
Reduce the Need for Typing
Arguably, typing is one of the most most time-intensive aspects of web form conversions, which often causes errors — especially in the case of long forms. Replacing keystrokes with buttons, sliders, or even features like auto-input data can significantly reduce a user’s efforts to complete a form.
Add Sign-up Flexibility
A subset of the above mentioned point, if your site requires users to sign-up or register with your platform to use your services, then give them the freedom to sign-up using a medium they are most comfortable with. For example, leverage them the liberty to sign-up using one of their existing accounts such as Facebook, Gmail, Linkedin, etc. to complete the registration process. This helps achieve two goals:
- Saves users the hassle to go through the tedious registration process, and
- Give you valuable insights into a user’s social network connections.
Truth be told, incorporating social login functionality has become more of an expectation than an option in today’s time as more and more services are entwining with social media.
What are Some Industry-wise Examples of Form Analytics?
Ecommerce Industry Form Analytics Examples
Case Study: BliVakker.no Removed 3 Form Fields from its Registration Form and Saw a Conversion Uplift of 10.48%
BliVakker.no is one of the leading Norway-based online beauty shops that offers a wide range of perfumes, cosmetics, and other toiletries to its global customer base. While the ecommerce company was aware that their registration process is overly complicated, they wanted actual data to support their suspicion.
BliVakker used VWO’s form analytics capabilities to gather necessary data and chose to remove unwanted fields from their registration from immediately. The fields marked with red (in the image below) were the ones which were removed.
The online beauty shop then decided to run an A/B test to validate their hypothesis and created the following versions to A/B test.
- The original version or the control had about 17 form fields.
- The second version or variation 1 (Skjema-light) had the original 17 fields, minus 3 fields namely, account number, phone number, and evening phone number.
- The third version or Variation 2 (Skjema-uberlight) had far fewer fields along with less navigational elements.
Here are the test results:
As you can see, the second version outperformed the control and the third variation. It showed a 10.48% higher form submission rate than the original rate.
Travel Industry Form Analytics Examples
Case Study: Reducing Questions Helped Flying Scot Increase Conversions by 35%
Flying Scot is one of the best 24 hours airport security parking providers in Edinburgh and Glasgow. The company wanted more and more people to sign-up for their services through their website and increase conversions.
While analysing their “Details” page of the booking process, they knew the form wasnt appropriate.
This is how the original Details page looked like:
The company decided to deep dive into the problem. They used VWO’s form analytics tool to check for frictions on the form. Using the gathered data, they decided to simplify the form filling process. They further ran an A/B test to validate their hypothesis.
Here’s how the variation looked like:
Flying Scot saw 45.45% increase in visitors moving to the next step and a 35% increase in overall form submissions. 
Finance & Accounting Industry Form Analytics Examples
Case Study: PayU Increased it’s conversions by 6% by Removing the Email Address Form Field
PayU is a leading fin-tech company that enabled businesses across India to accept and manage payments online. As a payment facilitator, it is crucial for Payu to have a simple, intuitive, and convenient checkout process. But, their Checkout page statistics showcased a very different story. The company witnessed a lot drop-offs on the page, which typically impacted heavily on their sales and revenues.
PayU’s old checkout page asked users to input their email address and phone number to complete the purchase as local laws mandated the company to share the final payment receipt with the user post the purchase.
The company used VWO Form Analytics capabilities and found that entering both phone number and email address was the source of friction on the form, resulting in a lot of drop-offs.
Basis this insight, PayU decided to run an A/B test and check whether removing email address field would increase their conversions.
Here’s how the control looked like:
Here’s how the variation looked like:
The results showcased that by simply removing the email address field from the form, the company saw 5.8% of improvements in their conversions as compared to the control.
SaaS/IT Industry Form Analytics Example
Case Study: Adding “No Credit Card Required” Improved Teamleader’s Conversions by 12.5%
Teamleader is a SaaS technology company headquartered in Ghent, Belgium that offers a unified CRM, invoicing, and project planning platform to the SMEs. The company’s primary objective is to increase their number of free trial sign-ups and make the entire form-filling process more fluid for the visitors.
To do so, the company used VWO’s capabilities, especially form analytics, to check for frictions on their free trial sign-up form. They discovered that a lot of people were dropping off just before adding their credit card details. They hypothesized that maybe by adding information about non-requirement of a credit card to sign-up for a free trial, their conversions would increase.
Teamleader ran an A/B test to legitimize their hypothesis.
This is how the older version or control looked like:
And, this is how the new version or variation looked like:
The company saw the following results:
- Teamleader’s Netherlands website: The variation achieved a conversion rate of about 54.8% against 48.7% for control.
- Teamleader’s Belgium website: The variation showcased a conversion rate of about 38.6% against 33% for the control.