How to Build Multi-Step Forms on Unbounce + 4 Ah Ha! Moments + Q&A

Post by 
Greg Daily
June 11, 2020

s one of the leading PPC Agencies in Denver, Colorado, we are always looking for ways to help our clients find more business and maximize their budget.

Johnathan Dane and his team over at Klient Boost wrote a great article on the power of using multi-step forms to significantly boost conversions by starting with a small anonymous question on the landing page and encouraging the potential lead to submit more information over a series of steps, rather than going for a name, email and phone number immediately.

If we start with an easy and anonymous question on our landing page, people are more likely to submit an answer, and once they are comfortable saying ‘yes’ to answering our first question, they become far more likely to say ‘yes’ again and again.

This technique is sometimes referred to as Yes Laddering or compliance without pressure and has been used in sales long before it actually had a name.

While my team and I are testing several tools for building multi-step forms, I am going to only be talking about Unbounce in this articles because of how many requests there have been online for the information. You can see the form in action here:

If it's not simple, it won't work. - Peter Drucker

The process, to be perfectly honest, was a bit of a frustrating one. When you look online for advice on building a multi-step form on Unbounce, you won’t find any help from the Unbounce team even though the community has been requesting this feature and trying to resolve this for themselves for more than three years.

So, what do we do when we see an opportunity for clients and there is no clear solution? We roll up our sleeves and get to work.

Now full disclosure, the following did stem from the community, but what we found was neither stable nor easy to implement across client accounts. We took this direction and spent more than 10 working hours refining it and turning it into something that we have successfully implemented across our client accounts for both landing pages and the Unbounce popup forms.




1. You will need the three files in this multi-step form zip file.

2. Create a form with x number of fields.

3. Click the CSS editor at the bottom of the landing page and create a new style sheet called Stylesheet 1. Paste the content from ‘Stylesheet 1’ in your zip file into this window and click ‘Done’.


Insert the CSS file
Paste Stylesheet 1 here.


4. Click the Javascripts editor at the bottom of the landing page and ‘add a new Javascript’ called Multistep 1. Paste the content of ‘Multistep 1’ in your zip file into this window, placement before body end tag, and click ‘Done’.

5. Click the Javascripts editor a second time, this time name this script Multistep 2, and paste the content of Multistep 2 in your zip file into the window, placement before body end tag, and click ‘Done’. You should now have a total of two Javascripts and one CSS Stylesheet in your landing page.

Javascript editor in Unbounce
Paste the Javascript files here.


6. Open your Multistep 2 window, starting at line 4, and edit the steps fields. The example below shows three fields on the first step, and two fields on the last step.

steps: [
{ title: '', fields: 3 },
{ title: '', fields: 2 }

If you want the first step to show 2 fields and the second step to show 3 fields. That can be changed to:

steps: [
{ title: '', fields: 2 },
{ title: '', fields: 3 }

Each of those different { } sets is a different “Step".

If you want to break it up into 3 steps. You can change it to:

steps: [
{ title: '', fields: 2 },
{ title: '', fields: 2 }, //(note the comma here)
{ title: '', fields: 3 } //(note NO comma here)

The above will show the first 2 fields on the first step, then the next 2 on step 2 and finally 3 on step 3.


The step 2 Javascript for a multi-step form in Unbounce
The fields for our 3-step get proposal form.


The total number of fields should equal the total number of numbers above.

7. Note that the button placement will look a little odd in the editor since the button is fixed. You will want to place the button below your maximum number of fields. In the editor, the button can overlap the form for alignment purposes. 

8. Save, test and you’re done!

The GREAT NEWS is that the above process has been simplified enough that you can still use all of Unbounce’s native form editing tools to create the perfect form design for your client.


Questions & Answers

What is a multi-step form?

A multi-step form breaks standard form entries into multiple steps, increasing the likely hood that a landing page visitor will complete the form.

How do I build a multi-step form?

There are multiple tools to build multi-step forms. The following article explains how to build a multi-step form on Unbounce…

Does Unbounce have Multi-step forms?

Not natively. To use multi-step forms on Unbounce, you have to follow the simple steps in this article to implement one yourself.

Do multi-step forms convert better than standard forms?

The research suggests yes.

Do multi-step forms work on mobile?

Yes. This multi-step form will work on mobile, you may have to adjust the layout just a bit.

Join Our Design

We never share your info. View our Privacy Policy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Join Our Amazing


Schedule a

We would love to get to know a little bit about your business.

Reach out today, either via email or a direct call, and find out how we can help.
Thank you for reaching out.

We will be in touch shortly.
Oops! Something went wrong while submitting the form.
THere's More

Post You mIght Also Like

All Posts

Liquor Store Advertising That Works

With so many options, it's hard to know what will work. In this article, we will show you.
Local SEO

Google Business: How to Show Up on Map Results

Exactly how to get your business listed on Google Map results.

PPC: How to Understand Your Data

We help you interpret your pay per click results here.

6 Tips for Successful Google Ads Management for Small Businesses


How Do I Get The COVID-19 Google Ads Credit

Google is offering free advertising dollars to small businesses.