How to design a conversion-optimized landing page form?

Expedia was losing $12 million a year because of an optional field titled ‘Company’ on their landing page form.

The form field confused visitors to enter the visitor’s bank addresses instead of home addresses. The result? Hundreds of failed transactions. After the company removed the field, the sales increased again.

That’s how important landing page forms are. However, how to design a landing page form that converts? This article will offer the answer.

In the next five minutes, learn the 8 best practices to designing a conversion-optimized landing page form:

Why you must choose popup forms over embedded forms
Why you must create mobile-responsive forms
Why you must opt for multi-step forms
Why you must choose a double-column form layout
Why you must reduce the number of form fields
Why you must opt for left-aligned field label placement
Why you must include strategic microcopy
Why you must offer social proof

8 best practices to designing a conversion-optimized landing page form

Table of Contents

Choosing popup forms over embedded forms

HubSpot discovered replacing embedded forms with popup forms and a CTA button increased conversions by 0.4% (2.8% from 2.4%, to be precise). The number might sound negligible but with HubSpot’s 100,000 active customer base, the conversion increase translates to thousands of dollars worth in sales.
An Aweber study confirmed opting for popup forms over embedded forms increased conversions by a stellar 1,375%.

Thus, choosing popup forms must top your landing page form optimization checklist.

Popup forms convert more as:

Popup forms attract the visitor’s eyes.
Popup forms have fewer form fields to fill.
Furthermore, timer popup forms generate a sense of urgency and scarcity; leading to higher conversions.

Creating mobile-responsive forms

54.4% of global website traffic comes from mobile devices. Thus, if the landing page form isn’t mobile-responsive, you’ll lose over half the visitors.

When building mobile-responsive landing page forms:

Include bigger CTA buttons.
Opt for bigger text throughout the forms.
Choose embedded forms or separate form pages over popup forms.
Opt for radio buttons instead of dropdowns as dropdowns take the longest to fill out in mobile devices.
Move white spaces around buttons and between fields.

Opting for multi-step forms

Multi-steps convert 86% higher than single-step forms.

Furthermore, a HubSpot experiment found similar results, with the number being 59.2% higher.

Multi-step forms convert higher than single-step forms as:

Multi-step forms make the massive amount of required information appear better organized than single-step forms.
Multi-step forms use basic behaviorial psychology that people love to finish things they started; which in this case, is the landing page form.

However, never use multi-step forms for low-value offers such as ebooks and whitepapers.

Choosing a double-column form layout

HubSpot found choosing a double-column form layout over single-column ones resulted in a 57% higher conversion rate.

A double-form layout leads to a higher landing page form conversion rate as:

A double-column form layout makes the landing page form appear smaller. Thus, visitors find the form less intimidating.
A double-column form layout holds the visitor’s attention. With the average human attention span of 8 seconds, the layout makes all the difference.

Reducing the number of form fields

HubSpot confirmed conversion rates increase by up to 50% when the company reduced form fields from 4 to 3.
Neil Patel found conversion rates increased by 26% after he removed one form field.

Thus, landing page form best practices must include reducing the number of form fields. Selling an ebook or an online course? Cut out the ‘Address’ form field. You never mean to call your leads? Never ask for their phone numbers. You get the vibe.

Opting for left-aligned field label placement

Left-aligned field labels are the easiest and quickest to fill out. Here’s why:

Left-aligned field labels keep the visitor’s eyes focused on the labels.
Puts limited cognitive load on the visitor’s brain.

Thus, left-aligned field labels become a landing page form optimization tool. While placing left-aligned field labels, make sure to:

Include white space between the form labels and fields.
Right align the text.
Opt for plain text labels.
Keep labels close to the form fields.

Including strategic microcopy

Yoast included the phrase ‘there will be no additional costs’ to their checkout form. The result? 11.30% higher conversion rates. That’s the power of strategic microcopy.

Microcopy:

Guides users to take specific actions such as searching for products or buying a course.
Builds empathy and trust with users. Thus, the users have a stronger bond with the business.

Make sure the microcopy:

Conveys the tone and voice of the business.
Answers a question, builds empathy and trust, or fulfills a need.
Is concise and easy to understand.
Blends with the visuals.

Offering social proof

66% of customers are more likely to buy your products or services if the customers see social proof.

Social proof:

Builds trust and credibility.
Creates the bandwagon effect. If you don’t know, bandwagon effect is a psychological concept which tells people are more likely to engage in actions if others are already doing the action.

Designing a conversion-optimized landing page form — it can skyrocket your business

3% is the industry average form conversion rate; with 5% being the highest conversion rate. Thus, reaching the highest conversion rate can skyrocket your business.

In this guide, you’ve learnt 8 best practices for designing a conversion-optimized landing page form: