[How To] Add A Multi-Step Form 2.0

7 years ago
6 February 2017
224 replies
2924 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 5 / 9

Userlevel 5

Hi, @Mysticadder!

Thank you! If you need to style the buttons individually, you can do so in the CSS. Below are the two button elements that you can edit to your liking:

.multistep .lp-pom-button{
  		position: relative !important;
  		top: 0 !important;
  		width: 60% !important;
  		display: inline-block !important;
  		float: right;
      	letter-spacing: 2px !important;
      	font-weight: 700 !important;
    	text-transform: uppercase !important;
		}

.multistep .lp-pom-button.back-button{
 		margin-right: 0;
  		float: left;
  		opacity: 0.7 !important;
  		background-color: #f1f1f1 !important;
      	color: #636363 !important;
  		width: 35% !important;
  		letter-spacing: 2px !important;
      	font-weight: 700 !important;
    	text-transform: uppercase !important;
		}

Hope that helps!

Amazing work with the script @Caroline. I have a question though, is there a way to separate the next button and the submit button in a sense that I want to increase the width and move one of them but not affect the other one?

Never mind, I solved the problem. If anyone else is curious to the solution just set a height/max height to the form fields container element. This contained the form within my content area and had no negative effects on its function.

@Noah First I have to say that this form code is amazing and I use it all the time. However, I have recently run into an issue.

Is there any way to hide the form overflow? My current landing page is only one short section and my form is quite a few questions. This creates an enormous white footer below my content section to accommodate the rest of the hidden form questions. So again, is there any way to hide the form overflow so this doesn’t happen? Any help solving this issue would be greatly appreciated.

Thank You

Userlevel 5

Hi @Joe_Savitch!

One of my coworkers added that on and used it for one of our clients. I have never personally used it. I can look into it more when I get a chance! 🧐

@Caroline This is pretty awesome. I’m trying it out with a sandbox form to get a feel for the script etc.

I noticed in the code you have line 14 lp.jQuery('#progress-bar').hide(); when I changed it to show I got 3 numbers. Is there some styling that I’m missing or is this not the kind of progress bar I am thinking about?

I’m going to try and apply some inline validation and error handling to the form… wish me luck!

Joe

Userlevel 5

Hi @TilenK!

Could you message me your url?
I can take a look at it later this afternoon.

Thanks!

Hey

Just tried setting it up, it works great 😃

The 1 issue i’m having though is that if any of the fields are required or have validation, it breaks the form steps - wont allow you to continue or go back, will just show error instead.

My form fields are:
-building type (house, apartment, etc.)

size (in square meters)
name
email
phone

If i do “name email phone” as required fields i get errors before even getting to that part:

Ever encountered that before? What part of JS must i be checking to fix that?

Thanks 🙂

Thanks, @Caroline .
Here’s the URL

https://www.sharperselling.com/bathroom-remodel/

And the script

Userlevel 5

Hi @Marissa_Rustici!

Glad it is almost working for you!
Could you please send me a screenshot of Multi Step 2 script and message me a link to your webpage? Just want to check a few things before I assume a fix!

Hi! Thanks for this. I’ve got it installed and it looks great! It did not like being inside a lightbox and had to be on the main page, which is fine for my purpose.

One minor issue: I have 9 questions with 3 steps. Only on the last step is the question text at a fixed width and spilling over into the form field. I poked around to where I can adjust this width and am left stumped. Can you help?

Aweome, thank you so much for this, checked the demo and looks just like what we need, will try to implement it later today 😃

Wondering this as well, any updates?

Hey Noah!

Will save all user data after submiting the buttom?

@Noah, any update on having more than one field show in a given step???

Joe

hey ands,
any luck finding solution for this ?

Hey

Can someone tel me how to add the progress bar like the demo it isnt showing on my page

Thank you

Userlevel 2

For all the community member, i have been able to alter the code and achieve the functionality of displaying multiple fields in one step.
So if you would like me to help you with your code, you can drop me an email at ‘reckless.sam@gmail.com’ with

Subject -> Multi Step Form -Community Unbounce

I will help you with the code at a very nominal price, because based on the fields the code will have to be updated.

Thanks and looking forward to hear from you.

I’ve got a question which @mike22rtn touched on …displaying a group of questions (like maybe a fieldset or something).
While a Conversation Form would be my first choice, this Multi-Step for (with progress bar) is a very close second.

Has @Noah or anyone discovered a way to display multiple questions at once?

Here’s the use case.
We need the visitors height in inches.
Obviously, people would rather enter feet and inches, and just have us do the math for them.

We would LOVE to do so, but I’m not seeing an easy way to achieve that.
What is an easy (user friendly) way to collect two related fields at once with the Multi-step form?

Userlevel 2

@Noah Thanks for the wonderful script. I have seen huge number of people asking for Multiple fields
most probably Name, Email and Phone Number to be displayed in one step. Is there something you could think of to make this happen?

I would be really happy to see a new script to have such functionality because one script will resolve a problem for hundreds of people.

Can you please let me know?

Hey @Noah - nice script. I’m attempting to add this to a page where we’ll collect more info from list subscribers, and the form we’re creating has many fields. With it being so long, it’s caused the page to load past the boundaries that we’d like, because the form’s length is long.

Is there a way we can have this multi-step form on a page without the page needing to be longer than the form? Appreciate any help you could provide!

Hi all!

Unfortunately, one thing has been holding me back with this script.

I can’t used ‘drop-down’ fields in the form unless it is the very last question. Is there a solution to this? It’d be much appreciated!

Userlevel 7

Hey!

What are you seeing? It just checked one of our pages that we built the other day and it seems to be working fine here.

Hi Guys,

I had previously been using this script and it had been working really well. Today there was a notification in Unbounce that they had implemented a new feature to allow the creation of horizontal form fields. The notification also hinted that this might effect some forms from working.

The multi step forms still appear to be working on my existing landing pages however if I create a new variant using this multi step form script it doesn’t seem to work anymore. Any one else having the same issue?

Question!

Is there a way to have 3 imput fields at a time instead just 1? My form has 9 imput fields and I need to show 3 fields divided in 3 sections. Is this possible?

Also, can I change the progress bar? and how to do it?

Unfortunately I can’t share with you the live url because this page is still in edition progress, no live link yet, but it looks like this:

I need something like this example, 3 sections with 3 imput fileds on it and hopefully with the same progress bar:

mstp

BR,

Andres V.

Page 5 / 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