Learn How to Reduce Landing Page Friction with These 8 Multi-Step Form Examples

Learn How to Reduce Landing Page Friction with These 8 Multi-Step Form Examples

Last updated on by Stephanie Mialki in Conversion Optimization


It’s not uncommon for web users to click away from a landing page because it’s too long or the lead capture form asks for too much information. While landing page contact forms are essential to collecting visitor information, many marketers fail to design them correctly and end up losing valuable leads. That’s why it’s imperative you design your landing page to ensure visitors stay engaged without being intimidated by lengthy forms.

One way to do this is with a multi-step form.

What is a multi-step form?

A multi-step form is a longer form broken up into shorter, less daunting steps. From the marketer’s point of view, it’s great for any situation in which you want to collect detailed prospect information because it does so in small chunks. From the prospect’s point of view, multi-step forms allow them to demonstrate their interest by completing a short form, then proceeding to additional form fields to share more about themselves and/or their businesses.

Since requests for additional information only appear after baseline information has been submitted, multi-step forms can reduce friction on your landing page. Designing your form this way can increase the visitor’s time on page, generate more leads, and help you gain insight about higher qualified leads. Which, of course, you can then nurture through the marketing funnel to sale.

Multi-step forms vs. two-step opt-in forms

Both multi-step forms and two-step opt-in forms help engage and qualify leads. Where they differ is how they appear on the page. Multi-step forms are broken into stages, with each succeeding stage only appearing after the preceding stage is complete. Conversely, two-step opt-in forms are triggered when a visitor clicks a CTA button, and a pop-up box shows the form.

Using multi-step forms instead of on-page or two-step opt-in forms can avoid what we call “Goldilocks Syndrome.” Too long and it may deter prospects from completing it; too short and you’ll end up with unusable leads, or leads that are more suitable for marketing than sales. By optimizing your landing page forms based on the offer and stage of the marketing funnel where your prospects currently reside, you can request more appropriate information and, in turn, generate better conversion rates.

There may not be a “one size fits all” template per se, but the multi-step form examples below are a great starting point for you to emulate in your next design. Let’s see how some of the world’s biggest brands use multi-step forms to engage visitors and maximize leads.

Multi-step form examples

Uber

Uber uses this landing page to entice people to drive for them as a side job:

multi step form uber

They use a multi-step form on the page to create a smooth conversion process for visitors. Notice how the CTA button reads, “Next,” with an arrow directing traffic to the second step of the form. Both of these indicate there is at least one additional step in the process.

Who’s Who of Executives & Professionals

This selective networking forum placed a multi-step form on their homepage to encourage visitors to apply for eligibility to the network:

multi step form visual cue

The form is well designed with a step indicator (each in the shape of an arrow — which are visual cues) to imply the visitor should continue to each succeeding step. The CTA button contains an arrow as well, to show prospects that they aren’t finished with the application process yet.

On-page forms don’t always allow for large fonts, long fields, or even field labels because of the limited space on the page. Conversely, multi-step forms create more space since they are broken up into sections, therefore, allowing more variation and visual cues. Often, they even include a progress bar so users can track how far along they are in the signup process.

University of Phoenix

See how University of Phoenix graduate school uses a progress bar near the top?

multi step form phoenix

The form begins asking for noninvasive information from the visitor — field of study, degree level, learning format, and zip code. The progress bar is a nice touch because it gives visitors a clear idea how long the form is before they can download the Quick Start Guide.

Connecting with social media is another effective tactic when it comes to designing your multi-step form. In fact, conversion rates can increase by as much as 189% with social media auto fill. By implementing this feature, users’ relevant social information (that they’ve already submitted to social networks) is automatically inserted into the form, which improves the user experience.

Also in regards to user experience, placeholder text can irritate and confuse visitors, as they might mistake it for fields that have already been auto-filled by their social accounts. Instead, label each field above the box to reduce friction and smoothly guide your users through the form.

GreenGeeks

GreenGeeks created this landing page to include a multi-step form. First, the landing page makes the offer:

multi step form example GreenGeeks 1

Once the visitor clicks the “Get Started Now” CTA button, this page appears with step one of the form:

multi step form example GreenGeeks 2

At this point, users aren’t asked for any identifying information — just a domain (new or pre-existing) — so users who aren’t all the way down the funnel aren’t deterred by a long, complex form. Once visitors are ready to continue signing up, they’re directed to this page, which is step two of the form:

multi step form example GreenGeeks 3

This is another multi-step form that has each section and individual field clearly labeled, providing a seamless signup process for customers.

Cirius Marketing

Here’s an example from Cirius Marketing. They use a two-step opt-in page with a multi-step form on the pop-up box. This is the landing page with the CTA button immediately visible above the fold:

multi step form example Cirius Marketing 1

And here’s the multi-step form in the pop-up box:

multi step form example Cirius Marketing 2

Notice the progress bar that indicates 50% complete at the top of the window to let prospects know this isn’t the only information they’ll need to provide.

Sprout Social

Sprout Social designed this multi-step form for their prospects to complete:

multi-step form sprout social

This first step is where they create their account; they’re then brought to the second step where they can attach their social profiles; and finally, in step three, they can finish the signup process and begin using Sprout.

Quick Base

The Quick Base landing page below offers employee training services:

multi step form example QuickBase 1

When prospects are ready to start their free trial, they click any of the cooperative CTA buttons (three total on the page), and are brought to step one of this multi-step registration form:

multi-step form quickbase

Notice how this part of the form is specifically labeled “Step 1 of 2”. Informing prospects that they’re “seconds away” from their free trial is an indicator that completing the form won’t take long.

Hootsuite

Hootsuite guides prospects through their account sign up process with clearly defined steps:

multi-step form hootsuite

The headline states how many steps are involved with signing up, so prospects know immediately what it entails. Then, each of the steps is clearly labeled with a section header to easily guide visitors through to completion.

Increase on page engagement with multi-step forms

If your best conversion scenario requires a lot of information from prospects and you don’t want to come off as intimidating, using a multi-step form to simplify the situation can help alleviate these issues. These multi-step form examples reduce friction, persuade customers to trust you with their information, and ultimately, help lead to the conversions you’re looking for.

Get started adding multi-step forms to your landing pages with Instapage today. With our designer-friendly platform and 100% customizable templates, you can create professional landing pages with multi-step forms that will help increase your conversion rates and sales.

Show Me The 35 Best Landing Page Tips