[How To] Add A Multi-Step Form 2.0

7 years ago
6 February 2017
224 replies
2873 views

Userlevel 7

Noah
Former Unbouncer
126 replies

When you’re building your landing pages in Unbounce, you want the conversion process to be as simple as possible. Nothing too distracting, and you certainly don’t want to scare your audience away with long, time-consuming forms.

We’ve built an easy solution for you because, hey, we’re marketers too!

Introducing Multi-Step Forms! 📈 🎉

No more scary, conversion killing forms!
Follow the steps below to implement this handy script into your landing page and try it for yourself! And, as always, remember to A/B test, and keep us posted on your results!

You can see this in action (built in Unbounce) here:

How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Create your form in Unbounce.

Step 2.

Create a new button element for your ‘Next’ button and one for your ‘Previous’ button. Keep in mind when positioning these buttons (and your form submission button) that only one field will be shown at a time.

Step 3.

Copy this script and paste it into the Javascripts section of your page with placement ‘Before Body End Tag’:

<script type="text/javascript" src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>

<script>
  (function() {
    // Update the following IDs with your own button IDs
    var backButton = document.getElementById('lp-pom-button-14');
    var nextButton = document.getElementById('lp-pom-button-13');
    var showProgressBar = false;

    var submitButton = document.querySelector('.lp-pom-form .lp-pom-button');
    var formContainer = document.querySelector('.lp-element .lp-pom-form');
    var currentField = 0;
    var allFields = document.getElementsByClassName('lp-pom-form-field');
    var errorSpan = document.createElement('span');

    for (i = 0; i < allFields.length; i++) {
      allFields[i].classList.add('hide');
      allFields[i].style.top = '0px';
    }

    backButton.classList.add('hide');
    submitButton.classList.add('hide');

    allFields[0].classList.remove('hide');

    if (allFields[0].querySelector('input')) {
      allFields[0].querySelector('input').focus();
    }

    errorSpan.classList.add('hide');
    errorSpan.style.color = 'red';
    errorSpan.style.position = 'absolute';
    var labelHeight;
    if (allFields[0].querySelector('label')) {
      labelHeight = allFields[0].querySelector('label').clientHeight;
    } else {
      labelHeight = 25;
    }
    errorSpan.style.top = '-' + labelHeight + 'px';
    formContainer.appendChild(errorSpan);

    if (showProgressBar) {
      var progressContainer = document.createElement('div');
      progressContainer.id = 'container';
      formContainer.appendChild(progressContainer);

      var bar = new ProgressBar.Line(container, {
        strokeWidth: 4,
        easing: 'easeInOut',
        duration: 1400,
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: { width: '100%', height: '100%' },
        from: { color: '#FFEA82' },
        to: { color: '#74D16A' },
        text: {
          style: {
            // Text color.
            // Default: same as stroke color (options.color)
            color: '#fff',
            position: 'absolute',
            right: '0',
            top: '30px',
            padding: 0,
            margin: 0,
            transform: null,
          },
          autoStyleContainer: false,
        },
        step: function(state, bar) {
          bar.setText(currentField + 1 + ' of ' + allFields.length);
          bar.path.setAttribute('stroke', state.color);
        },
      });
    }

    function nextEvent() {
      allFields[currentField].classList.add('hide');

      currentField += 1;
      allFields[currentField].classList.remove('hide');
      if (allFields[currentField].querySelector('input')) {
        allFields[currentField].querySelector('input').focus();
      }

      if (currentField > 0) {
        backButton.classList.remove('hide');
      }

      if (currentField === allFields.length - 1) {
        submitButton.classList.remove('hide');
        nextButton.classList.add('hide');
      }

      updateProgress();
    }

    function backEvent() {
      allFields[currentField].classList.add('hide');
      submitButton.classList.add('hide');

      currentField -= 1;
      allFields[currentField].classList.remove('hide');
      if (allFields[currentField].querySelector('input')) {
        allFields[currentField].querySelector('input').focus();
      }
      if (currentField === 0) {
        backButton.classList.add('hide');
        nextButton.classList.remove('hide');
      }
      if (currentField <= allFields.length - 1) {
        nextButton.classList.remove('hide');
      }

      updateProgress();
    }

    function currentFieldInvalid() {
      var invalidInput = allFields[currentField].querySelector(':invalid');

      if (invalidInput) {
        errorSpan.textContent = invalidInput.validationMessage;
      }

      return Boolean(invalidInput);
    }

    function updateProgress() {
      if (showProgressBar) {
        var barSize = (currentField + 1) / allFields.length;
        bar.animate(barSize); // Number from 0.0 to 1.0
      }
    }

    updateProgress();

    nextButton.addEventListener('click', function(e) {
      if (currentFieldInvalid()) {
        if (allFields[currentField].querySelector('input')) {
          allFields[currentField].querySelector('input').classList.add('hasError');
        } else {
          allFields[currentField].children[1].classList.add('hasError');
        }

        errorSpan.classList.remove('hide');
        e.preventDefault();
      } else {
        if (allFields[currentField].querySelector('input')) {
          allFields[currentField].querySelector('input').classList.remove('hasError');
        } else {
          allFields[currentField].children[1].classList.remove('hasError');
        }

        errorSpan.classList.add('hide');
        nextEvent();
      }
    });

    backButton.addEventListener('click', backEvent);

    submitButton.addEventListener('click', function(e) {
      if (currentFieldInvalid()) {
        if (allFields[currentField].querySelector('input')) {
          allFields[currentField].querySelector('input').classList.add('hasError');
        } else {
          allFields[currentField].children[1].classList.add('hasError');
        }

        errorSpan.classList.remove('hide');
        e.preventDefault();
      } else {
        if (allFields[currentField].querySelector('input')) {
          allFields[currentField].querySelector('input').classList.remove('hasError');
        } else {
          allFields[currentField].children[1].classList.remove('hasError');
        }

        errorSpan.classList.add('hide');
      }
    });

    document.body.addEventListener('keydown', function(e) {
      var keyCode = e.keyCode || e.which;

      // Enter key
      if (keyCode === 13 && currentField < allFields.length - 1) {
        if (currentFieldInvalid()) {
          if (allFields[currentField].querySelector('input')) {
            allFields[currentField].querySelector('input').classList.add('hasError');
          } else {
            allFields[currentField].children[1].classList.add('hasError');
          }

          errorSpan.classList.remove('hide');
          e.preventDefault();
        } else {
          if (allFields[currentField].querySelector('input')) {
            allFields[currentField].querySelector('input').classList.remove('hasError');
          } else {
            allFields[currentField].children[1].classList.remove('hasError');
          }

          errorSpan.classList.add('hide');
          e.preventDefault();
          nextEvent();
        }
      } else if (keyCode === 13 && currentField === allFields.length - 1) {
        if (currentFieldInvalid()) {
          if (allFields[currentField].querySelector('input')) {
            allFields[currentField].querySelector('input').classList.add('hasError');
          } else {
            allFields[currentField].children[1].classList.add('hasError');
          }

          errorSpan.classList.remove('hide');
          e.preventDefault();
        } else {
          if (allFields[currentField].querySelector('input')) {
            allFields[currentField].querySelector('input').classList.remove('hasError');
          } else {
            allFields[currentField].children[1].classList.remove('hasError');
          }

          errorSpan.classList.add('hide');
        }
      }

      if (keyCode === 37) {
        // Left key
        if (currentField > 0) {
          backEvent();
        }
      } else if (keyCode === 39) {
        // Right key
        if (currentField < allFields.length - 1) {
          if (currentFieldInvalid()) {
            if (allFields[currentField].querySelector('input')) {
              allFields[currentField].querySelector('input').classList.add('hasError');
            } else {
              allFields[currentField].children[1].classList.add('hasError');
            }

            errorSpan.classList.remove('hide');
            e.preventDefault();
          } else {
            if (allFields[currentField].querySelector('input')) {
              allFields[currentField].querySelector('input').classList.remove('hasError');
            } else {
              allFields[currentField].children[1].classList.remove('hasError');
            }

            errorSpan.classList.add('hide');
            nextEvent();
          }
        }
      }
    });
  })();

  /**
   * Do not remove this section; it allows our team to troubleshoot and track feature adoption.
   * TS:0002-03-062
   */
</script>

Step 4.

Update the script with the ID of your ‘Previous’ and ‘Next’ button elements. Tip: Make sure you exclude the ‘#’ in the ID.

Step 5.

Copy this script and paste it into the Stylesheets section of your page:

<style>
  #container {
    margin-top: -45px;
    width: 100%;
    height: 8px;
    position: relative;
  }
  .lp-form-errors {
    display: none !important;
  }
  .hasError {
    border: 1px solid tomato !important;
    box-shadow: 0px 0px 5px 1px tomato !important;
  }
  .hide {
    display: none !important;
  }
  .lp-pom-form-field,
  .lp-pom-button {
    -webkit-animation: KEYFRAME-NAME 2s;
    -moz-animation: KEYFRAME-NAME 2s;
    -o-animation: KEYFRAME-NAME 2s;
    animation: KEYFRAME-NAME 2s;
  }

  @-webkit-keyframes KEYFRAME-NAME {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes KEYFRAME-NAME {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-o-keyframes KEYFRAME-NAME {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes KEYFRAME-NAME {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

You’re done!

Now sit back and let the conversions roll in…

Can’t see the instructions? Log in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Show first post Hide first post

224 replies

Page 9 / 9

Userlevel 7

Noah
Author
Former Unbouncer
126 replies
6 years ago
15 June 2017

Hi @Andy2,

You may have some luck wrapping this code in a conditional statement based on window size:

<script>
  if ( lp.jQuery(window).width() <= 600 ) {
    // Your mobile code goes here
  }else{
    // Your desktop code goes here
  }
</script>

Hope this helps point you in the right direction!

Thanks @Noah! I’m testing out now, seems promising. At least one issue I’m encountering with this solution is that validation no longer seems to work.

@Noah I’ve tested this out here: http://unbouncepages.com/multistep-mobile-only/

On desktop, the validation works, but error messages aren’t appearing. On mobile, validation and error messages seem to be working fine.

Any thoughts on how to get error messages to appear on desktop? Thanks!

Userlevel 7

Noah
Author
Former Unbouncer
126 replies
6 years ago
15 June 2017

Hey Andy, you’ll likely have to write a media query that only applies the following CSS to a max-width of 600px:

Here’s a guide on media queries if you need any help: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I hope that does the trick!

Hi All,

I love, love, love this form. This is exactly what we have been after, the multiple page approach has been painful on mobile due to having to load pages but i’m sure this will fix that.

Apologies if this has already been mentioned but i’m struggling to figure out how to put multiple fields in each stage. i.e. First Name and Last Name in the same stage rather than one after the other. Any guidance?

Also, is it possible to make the first button stretch the length of the form?

Thanks

@Noah is there any possible way to combine your awesome script with your other script, the Form Glow Script? They are both awesome, and I’d love to use them simultaneously.

On another note, I saw @Samir talk about drop-down menu’s. I haven’t been able to fix this for myself yet, the drop-downs won’t allow me to continue filling in the multi-step form. Is there a solution for this yet?

Kind regards,

Pepijn

Isn’t the first button all by your own design? You can make it as long as you’d like, or am I seeing this wrong?

Hi community-members,
I am running into the following problem: I want to integrate the multistep-form into a convertable. This works perfectly fine for desktop. However, for mobile I got a very cluttered view on Chrome browser and no view at all on Safari.

Has anybody an idea to solve this?

The biggest part of our traffic is mobile.

Best regards,
Nicol from OneFit

Userlevel 7

Hey Nicole!

Could you share a link/screenshot?

Cheers 🙂

Hi Noah,

I’m having an issue with the pages that have this script on them opening straight to the form rather than the top of the page. I can work around it by adding the ID of the top most section to the URL, but I was wondering if you knew why this was happening? I can send you a link to one of the pages this happens on if you want.

Thanks,

Alice

Userlevel 7

Noah
Author
Former Unbouncer
126 replies
6 years ago
11 July 2017

Hey @aclayton this should address the issue you’re having:

@Noah I’m trying to get this script to perform with a couple of drop-down fields in the form but it doesn’t seem to work… any ideas?

http://unbouncepages.com/lander-a-candis/

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

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?

Userlevel 7

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

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

Userlevel 7

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

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

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…

Im sorry I dont understand this step 😦
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
🤔

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

Userlevel 7

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

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?? 😕

@Emeric_Lfrt

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

Page 9 / 9

Introducing Multi-Step Forms! 📈 🎉

How to Install in Unbounce

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

You’re done!

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded