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.
HOW DO I BUILD A MULTI-STEP FORM ON UNBOUNCE?
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’.
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.
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 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.
