Adding a Multi-step Form

Follow

Multi-step Forms

Note

If you are concerned about GDPR compliance or Google Analytics privacy policy please refrain from appending personal identifiable information to the the URL on form submissions.

You can use the form settings to create multi-step forms in Unbounce.

Setting it Up

  1. Create a new page.
  2. Add a form to the page that collects some basic information (such as first name and email).Picture_6.png
  3. In the Properties Pane on the right (with your form selected), set the confirmation to "Go to another web page".
  4. Add the URL for the next page you're going to build. In this case I'll use the URL "http://promo.site.com/step2".
    Screen_Shot_2012-05-01_at_9.16.12_PM.png
  5. Check "Append form data to URL".
  6. Publish the page.
  7. Create the second page. You'll probably want to just duplicate this page so that your design is the same. My second page is called Multi-step Form #2.
  8. Give it the URL that we used in step #4 (in this case: http://promo.site.com/step2).
  9. Edit the form on your second page to ask for whatever other information you need:       Picture_8.png
  10. Add hidden fields for the information you asked for on the first form, matching the field names. In this case that's "First Name" and "Email". Leave the default values blank. Picture_9.png
  11. Publish your page.

Now when the visitor fills out the first form, they'll be redirected to the second form and when they fill that one out, it will contain the data from both forms in the lead information. If you want to have more than just 2 steps, simply repeat #7-#10 for each middle page. Please note that depending on how much data your fields are collecting, this method will break down after a while, as URLs do have a maximum length.

You can also pass incoming URL parameters through your form with hidden fields as shown later in this article.

How does this work?

Unbounce pages will automatically pre-populate a form field of the same name as a GET paramater - so since we added hidden fields named "first_name" and "email", those will be automatically populated with the values form the URL.

What's cool about this?

Aside from being able to spread out a form into multiple steps so as not to scare a visitor off on your first page, you also get the benefit of measuring each step along the way. You can test different variants of each page, and you can also set up integrations for each step as well. You'll probably want to set up your MailChimp/AWeber/Constant Contact integration on the last step, but you could set up an email notification on the first step if you want to be notified of users that may not get all the way through your form.

We know this is a bit complicated for something that should be very simple, and we are really looking forward to when we can tackle this as a built-in feature in Unbounce. Until then though, we'd love to hear about anyone who has this successfully set up!

Was this article helpful?
0 out of 2 found this helpful