[How To] Add A Multi-Step Form 2.0

forms

#81

Hey @Alan_C, it looks like there might be an issue with dropdown fields with hidden field labels. I’ll take a look at fixing this, but in the meantime the solution is to unhide the field label.


#82

Thanks for the speedy reply @Noah!

I’ve just tried doing that and even tried removing the script that fills the fields with titles. Still no luck.

Hoping to get this page ready for a client on Wednesday


#83

I guess the form data is not being saved in the lead database after each step of the form, but only at the end, or is it?


#84

Hi @Aleks,

You are correct. The form or in this case the last step needs to be submitted in order for the data to be actually recorded.

Best,
Hristian


#85

Hey @Hristian !

Do you think it is technically achievable at all to save the leads after each form step in the same database? Or in other words: How do we recover valuable lead data if a visitor abandons the form in between the steps?

How about this solution? (not nice but probably doable)

Each step is represented by a different landing page:

example.com/step-1/
example.com/step-2/
example.com/step-3/
example.com/step-4/

Each form step is not just a ‘next’ button but in fact a ‘submit’ button (with ‘next’ as text).
But at the same time of the submit we send over the form data with URL parameters like so:

example.com/step-1/
example.com/step-2/?name=Aleks
example.com/step-3/?name=Aleks&email=aleks@example.com
example.com/step-4/?name=Aleks&email=aleks@example.com&phone=1234567

Yes, we’ll have four databases with mostly duplicate data. But, in this example we at least would keep the email address if a visitors abandons the form in step 4.

What do you say? Possible, yes? Is there a more efficient way to do it with Unbounce you could think of?

Regards
Aleks


#86

Hi @Aleks,

What you are proposing was actually how you would do a multi-step form on Unbounce back in the day.

It is a pain to set up but it works.

However, you have to ask yourself… If my visitor didn’t complete the form do they really want to be contacted by me.

I would personally not like someone contacting me if I didn’t give explicit consent.

Couple of other options you can try to get your visitors to complete the form:

  • Retargeting - Pixel them and set up some retargeting ads.

  • Make use of the Convertables and offer them something on exit intent

Last but not least maybe the “offer” of the page is something else that can be worked on and improved. Give them a compelling reason to actually complete the whole form.

Best,
Hristian


#87

Hi @Hristian

How about calling the ‘next’ button, ‘submit and continue’ instead (or something less clunky)?
Or have a disclaimer, telling that all partial data is being submitted and used for marketing purposes.

That way you get your consent for every step of the form.

Also think about this: If a visitor enters the name and email but doesn’t want to give away his phone number that’s fine. But if we lose the entire submission because the visitor simply doesn’t want to give the phone number and doesn’t skip but instead abandons the form, we lose everything.

So my point is: I think every field entered and submitted (‘next’ button clicked) is a form of consent anyway and we are allowed to use the data of a partial form submission.

How about leaving that to an A/B-Test?

Yes, you might make certain people a bit more unhappy if you use their data of a partially submitted form. But if it turns out financially more beneficial to your client to use partial submissions then this is the way to go, right? And I’m pretty sure using partial submissions are going to increase the conversion rate down the entire funnel.

Regards
Aleks


#88

Thanks Noah,

This is an excellent script. We implemented it on our landing page. But we have a lot of form fields. We wanted to know if we can group the personal details fields (Name, Phone Number & Email) in one group to show together when the user clicks on Next -> then we show the Company Details fields together.
So the next button in all appears twice only.


#89

i have also spent hours with this, and i too have tested typefrom and leadformly. Typeform seem to be the best but Ben i’m wondering where you landed with this in terms of what forms you use? thanks


#90

We really gave Typeform a good go but the responsiveness is what killed it for us. Embedding Typeforms into Unbounce worked OK for desktop but on mobile the embed code coming from Typeform would not recognise that the unbounce HTML container was now for mobile/smaller. This meant we had to use the ‘popup’ option for launching the Typeform which tanked conversions coming from the paid traffic. It was a shame. But Leadformly, despite being buggy and driving us nuts, is just what we need and recognises the size of the parent container.


#91

I know exactly what you mean. But adding a single button click step really tanked conversions? The typeform form is so smooth on mobile using the pop up version, better than anything else I tested. Leadformly drove me insane during the trial. I so wanted it to work well…


#92

Im sorry I dont understand this step :frowning:
Update the script with the ID of your ‘Previous’ and ‘Next’ button elements. Tip: Make sure you exclude the ‘#’ in the ID.
Can you give me an example
:thinking:


#93

Hey @Noah, this script is awesome! Thank you! We’re very close to deploying it live and seeing how it does. Just one quick question…

We have the form below the fold, but there must be something in the script that is causing the page to “jump” to that section with the form in it upon load. Is there a way to disable this?

Regards,


#94

Hey Nicholas, this should do the trick!


#95

Hello @Noah, Thanks for this excellent script! We’re trying to implement this with multiple fields in each step - 2 fields in step 1 (a dropdown and checkboxes) and 4 fields in step 2 (all text boxes). Is there a way to do this?

Thanks!

Andy


#96

Curious to hear the answer to this. We’d love to test something like that too!


#97

Hi @Noah

where is the function which is named ‘validate’?

It is called, but never defined, as far as I can see

    var errorList = lp.jQuery('.lp-pom-form form').validate().errorList;

Also, why is errorlist added at the end?? :confused:


#98

@Emeric_Lfrt

  • right click on a button, find the id number
  • in the script, change the number of the button to your number

#99

Looking to implement a multi-step form on a convertible. If anyone one is available, I’m open to paying for assistance.
Thanks!


#100

Hi @RWF,

My team and I have done quite a few multi-step forms on Unbounce pages.

We’ve developed our own robust script to handle pretty complex multi-step forms which should be possible to apply to a convertable as well.

DM me a bit more details about your form and any special requirements you might have.

Best,
Hristian