This website works best with JavaScript enabled. Learn how to enable JavaScript.
Skip Navigation
VWO Logo VWO Logo
Dashboard
Request Demo

Website Form Analytics

What are Web Forms?

With the advent of modern technology and the changing face of the internet, websites no longer serve as just a regular online platform to share information with the masses. They’ve rather turned into perfect tools for businesses to communicate with their potential customers, gather necessary data, and use it to their advantage in any and every manner possible. While a lot of factors contribute to the success of a website, including carefully crafted content, smart navigation and site structures, sharp call-to-actions, and user-friendly site designs, web forms serve as one of the most crucial usability features 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 fillers an idea about its intent and the kind of information to be filled therein. 

a web form & its analytics

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 two-way communication with online visitors, track data regarding purchases, obtain feedback on services rendered, generate new leads, and even boost conversions. 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. 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 them 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 Your Purpose

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.  

  • Include Easy-To-Understand Headers: Easy-to-understand, straightforward headers 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. 
an example of a contact us web form
  • Provide Clear Instructions: It’s a good practice to clearly communicate the kind of information you’re seeking from your fillers. 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. 
  • 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.

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 essential.  

Below mentioned are some of the most common types of web forms you can use for your website.

Contact Forms

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 and well-crafted 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:

  1. Promise better engagement with prospects 
  2. Help gather essential visitor data
  3. Vet new prospects and boost email list
  4. Protect business mailbox from spam emails 
  5. Are multifunctional and super useful
  6. 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, it’s 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 a filler to understand and follow the guidelines. 

Lead Generation Forms

No matter how beautifully designed or aesthetically strong 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 lead generation forms are equally crucial for a website. They not only have the potential to increase conversions but also promise a great user experience as well.

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 not only helps fast track the process but also increases the chances of conversions manifold. 

Checkout Forms

More than anyone, checkout forms serve as a basic necessity for ecommerce businesses today. They not only help ecommerce companies create a synchronized order and payment reception framework for their platform but allow website visitors to place orders and make payments easily. 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.

victoriassecret.com's checkout web form
Image Source

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 accelerate conversions. The brand has also smartly divided its checkout form into three distinctive segments making it easy and convenient for customers to complete the entire process.

Sign-up/Registration Forms

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 the 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: Medium is another great example to quote here. In addition to keeping your sign-up forms simple and easy-to-fill, with minimum fields, using social media platforms is also a smart way to fast track the sign-up process.

As you land on Medium’s platform and click on the “Get started” CTA button strategically placed on the homepage, a form pops up. Beautifully designed with engaging content and a quirky illustration, the form has no input fields but only social media sign-up buttons. One of the best things about adding social media sign-ups instead of any to-be-filled fields is that they not only make your form look neat and clean but fast tracks the entire process.

Subscription Forms

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.

Pop-up Subscription Web Forms

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.

Survey Forms

Agree or not, but no business, be it a software company, a travel agency, or an ecommerce site, can succeed without market research. 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 Design Details

Not everyone landing on your site would pay much attention to your web forms unless they’re too useful 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. BliVakker.no is a great example to quote here. The online beauty shop increased its form submission rate by 10.48% by simply removing three form fields in its registration form. 

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. Usually, asking for a person’s address or credit card details before their name or email address would be unusual.

Use Inline Form Field Validation

It’s a process wherein 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, serve 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 an example 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 using auto-fill browsers such as Google Chrome and Firefox can reduce efforts as well as increase conversions.

Add Summary Boxes for every Plausible User Concern

It’s always a good idea to add a summary to each form field where fillers 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

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.

progress bars in long web forms

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 is an in-depth analytical tool that helps measure a visitor’s interaction with a web form. 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. Meanwhile, 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 tool 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?

When a visitor fills out a form on your website, they share their intent to become your lead – ready and willing to move ahead into your sales funnel. And, this is true for all types of web forms embedded on your website – be it a contact form, sign-up/registration form, or any lead generation form. Tracking visitor interaction with your web form helps you:

  • Segment 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.
  • Grow Your Email List: As you take a look at how your visitors are behaving on your forms, you can create a segmented email list basis such information and use it to your advantage. 
  • 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 maximum 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. 

  1. When people visit the form page
  2. 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 often the last thing most people typically notice. The reasons being that either the form is 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 Google 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. 

Google Analytics

Google Analytics (GA) is, by far, the best quantitative analytical tool to track visitor interaction with web forms. With GA, you can check total form views, unique form views, time spent by a visitor on a form, its bounce rate, and so forth. 

In addition to this, GA also furnishes information about the location of a visitor, the operating system they’re using to access the form (Google Chrome, Firefox, Internet Explorer, etc.), their demography, and even shows the number of visitors currently active or filling a form on the site, in real-time. 

Heatmaps

Heatmaps is a qualitative analytical tool that offers a visual representation of how visitors interact with a web form, what element are catching their attention, which form fields 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.

screenshot of heatmaps on web forms.
Clickmaps

Similar to heatmaps, clickmaps also furnish real-time data about where visitors are clicking on a form 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. 

Visitor Recordings

Visitor Recordings is another key matrix that helps study the behavior of your website visitors while they’re filling the form. 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 

The matrix 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

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, refilling fields, and finally submitting the form.

illustration of form analytics tools

Hesitation Time 

Hesitation time counts as the average ideal time spent by a visitor on a particular form field. This generally includes a detailed time report that uncovers insights like minutes (hours) spent by a person thinking what to fill in a field, what does a specific field mean, whether or not should they furnished the asked information in the form and other related ambiguities website visitors.

Refill Rate

This matrix 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

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 number of visitors who do not submit the form, either because they’re asked for specific information which they do not have handy, or finds the form too difficult to attempt. 

Besides the metrics as mentioned above, you can also pull out form submit data as form funnel reports and data 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

Date-range graphs enable you to compare form conversion data over a person of time. You can also use these graphs to track changes made on specific dates. For instance, added 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. 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 Optimise Web Forms to Get Better Leads?

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 conversions. 

In a nutshell, optimizing your forms is typically a three-step process:

  • Evaluate the information collected from form analytics reports
  • Turn the gathered insights into an actionable strategy, and
  • Execute the plan and repeat the process until you achieve conversions. 

In this section, we’ll talk about how to optimize your forms to get better leads and more conversions. 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. After all, 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.” 

example of a strong call-to-action in Salesforce.com's form headline

You too should use such CTAs to grab the attention of your customers. Here are some more examples of good, catchy CTAs 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
  • 100k Subscribers in a Month? Yes, It’s Possible! Learn How From our eBook! 
  • 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 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!

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.

an example of multistep web form on Uber.com

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.

an example of web form with hidden, previously-completed fields

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 the visitors from completely abandoning the form or start 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 Field Validation

Getting people to fill a form is comparatively easier than validating whether or not their filled data in each form field is correct and authentic. That’s why having a real-time data validation application embedded on your form is important. 

  1. 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.  
  2. 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.  
  3. 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.

It’s always a good idea to link your privacy policy either next to your email field or at the bottom of the form, typically below the submit button. This helps assure visitors that whatever information they’re furnishing through the form will not be shared with any third party. This further increases your brand’s credibility makes it trustworthy, and enhances conversions.

Reduce the Need for Typing

Arguably, typing is one of the 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. 

Software giants like Google and Parsley provide special JavaScript APIs which help cut down the need for typing and promote auto-completion. Such ease not only helps reduce the time taken by a visitor to fill a form but also boost conversions.

Add Sign-up Flexibility

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 liberty to sign-up using one of their existing accounts such as Facebook, Gamil, Linkedin, etc. to complete the registration process. This helps achieve two goals:

  1. Saves users the hassle to go through the tedious registration process, and 
  2. 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.

How to A/B Test Forms Using Form Analytics?

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 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 three primary form components which you should A/B test. These are as follows:

  1. 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.
  2. Submit Button Copy: This is usually an overlooked form element. A small change to your submit button 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.
  3. Field Bottlenecks: Field bottlenecks are typically the areas where visitors exit the form without submitting it. Checking these field bottlenecks using form analytics and testing against variations can help optimize your forms and enhance lead generation. 

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. 

  1. Conduct a Thorough Research: Check how the element is currently performing. Pull out data from form analytics tools such as Google Analytics, Heatmaps, Clickmaps, Visitor Recordings, etc. and analyse it in a detailed manner.
  2. Develop a Hypothesis: Create a data-backed hypothesis that aims to satisfy your set goal, i.e. boost conversions. 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.” 
  3. 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. 
  4. 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.   
  5. 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.

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 online beauty shop then decided to run an A/B test to validate their hypothesis. 

The company created the following versions to A/B test. 

  1. The original version or the control had about 17 form fields. 
  2. 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. 
  3. The third version or Variation 2 (Skjema-uberlight) had far fewer fields along with less navigational elements.

Here are the test results:

A/B Test Results from Blivakker.no's case study for VWO.com

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:

control version of A/B test on Booking.com's form page
Control

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:

variation version of A/B test on Booking.com's form page
Variation

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:

control version of A/B test on payu.com's checkout page
Control

Here’s how the variation looked like:

variation version of A/B test on payu.com's checkout page
Variation

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.

highlight of payu.com's A/B test results

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:

control version of A/B test on teamleader.eu's form page

And, this is how the new version or variation looked like:

variation version of A/B test on teamleader.eu's form page

The company saw the following A/B test results

  1. Teamleader’s Netherlands website: The variation achieved a conversion rate of about 54.8% against 48.7% for control. 
  2. Teamleader’s Belgium website: The variation showcased a conversion rate of about 38.6% against 33% for the control.

Deliver great experiences. Grow faster, starting today.

Start Free Trial Request Demo
>