[How To] Add A Multi-Step Form 2.0

forms

#101

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.


#102

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?


#103

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.


#104

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!


#105

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!


#106

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


#107

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?


#108

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.


#109

Hey

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

Thank you


#110

hey ands,
any luck finding solution for this ?


#111

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

Joe


#112

Hey Noah!

Will save all user data after submiting the buttom?


#113

Wondering this as well, any updates?


#114

Here is what we have been using for multi fields on multi steps.

This as has worked well for us across many pages & clients.
Here is an example of it in action: http://unbouncepages.com/multi-step-test/

  1. Create form in one column the way you normally would, in the order you want the fields to appear.
  2. Add the following script (before body end tag), name it “Multi Step 1”
<script>
  function UnbounceMultiStep(form, options) {

  // Validate arguments
  if ( !form.is('.lp-pom-form form') )
    return console.error('jQuery.unbounceMultiStep must be called on an Unbounce form.');

  if ( typeof options !== 'object' )
    return console.error('No options were passed to jQuery.unbounceMultiStep');

  this.options = options;

  // Store DOM elements
  this.form = form;
  this.formContainer = this.form.closest('.lp-pom-form');
  this.fields = this.form.find('div.lp-pom-form-field');
  this.fieldsByStep = [];
  this.currentStep = 0;
  this.forwardButton = this.formContainer.find('.lp-pom-button').eq(0);
  //this.validationError = $('.lp-form-errors');
  
  // Verbiage
  this.text = {};  
  this.text.next = this.options.nextButton;
  this.text.showSteps = this.options.showSteps;
  this.text.back = this.options.backButton;
  this.text.submit = this.forwardButton.children('span').html();

  // Call constructor method
  this.init();
}

UnbounceMultiStep.prototype.init = function() {
  var _this = this;

  this.formContainer.addClass('multistep initial');
  this.form.attr('id', 'fields');

  // Add progress bar
  this.formContainer.prepend('<div id="progress-bar"></div>');
  this.progressBar = lp.jQuery('#progress-bar');

  // Replicate Unbounce's field spacing
  var height = parseInt( this.fields.eq(0).css('height'), 10);
  var top = parseInt( this.fields.eq(1).css('top'), 10);
  this.fields.css('margin-bottom', (top - height) + 'px');
  this.progressBar.css('margin-bottom', (top - height) + 'px');

  // Set up fieldset elements for each step
  for ( var i = 0 ; i < this.options.steps.length ; i ++ ) {
    console.log('Adding new fieldset.');
    this.form.append('<fieldset></fieldset>');
  }
  this.steps = this.form.find('fieldset');
  this.steps.addClass('step');

  // Sort fields into new steps
  var currentField = 0;
  for ( currentStep = 0 ; currentStep < this.options.steps.length ; currentStep ++ ) {
    this.progressBar.append('<div class="step">' +
                            '<span class="num">'+ (currentStep + 1) +'</span>' +
                            '<span class="title">'+ this.options.steps[currentStep].title +'</span>' +
                            '</div>');
    this.fieldsByStep[currentStep] = [];
    for ( i = 0 ; i < this.options.steps[currentStep].fields ; i ++ ) {
      console.log('Field ' + currentField + ' -> step ' + currentStep );
      this.fields.eq( currentField ).appendTo( this.steps.eq( currentStep ) );
      this.fieldsByStep[ currentStep ].push( this.fields.eq( currentField ) );
      currentField ++;
    }
  }

  // Add any remaining fields to last step
  if ( currentField < this.fields.length ) {
    currentStep --;
    for ( i = currentField ; i < this.fields.length ; i ++ ) {
      console.log('Field ' + currentField + ' -> step ' + currentStep );
      this.fields.eq( currentField ).appendTo( this.steps.last() );
      this.fieldsByStep[ currentStep ].push( this.fields.eq( currentField) );
      currentField ++;
    }
  }
  console.log(this.fieldsByStep);

  this.progressBarItems = lp.jQuery('#progress-bar .step');

  // Add a back button
  this.backButton = this.forwardButton.clone().insertBefore(this.forwardButton);
  this.backButton.addClass('back-button');
  this.backButton.children('span').html(this.text.back);

  // Only validate fields that are in current step
  $.each(window.module.lp.form.data.validationRules, function() {
    if ( this.required === true ) { this.required = {
      depends: function () { return $(this).is('.active :input')}
    };
  }
  });

  // Add event listeners
  $(function() {
   _this.backButton.unbind('click touchstart').bind('click.unbounceMultiStep', function(e) {
      _this.backHandler();
    });
    
    //_this.backButton.removeAttr('href');	
    _this.backButton.attr('href','#request');

    _this.forwardButton.unbind('click touchstart').bind('click.unbounceMultiStep', function() {
      _this.forwardHandler();
    });
    
    //_this.forwardButton.removeAttr('href');
    _this.forwardButton.attr('href','#request');
  });

  // Show first step
  this.goToStep(0);
};

UnbounceMultiStep.prototype.goToStep = function ( newStep ) {
  // Make sure we aren't going to a steΩp that doesn't exist
  if ( newStep < 0 || newStep >= this.steps.length ) return false;

  this.steps.eq( this.currentStep ).removeClass('active').hide();
  this.steps.eq( newStep ).addClass('active').fadeIn();

  this.progressBarItems.eq( this.currentStep ).removeClass('active');
  this.progressBarItems.eq( newStep ).addClass('active');

  this.formContainer.toggleClass('initial', newStep === 0);

  // Update the label of the forward button
  var current = parseInt(newStep) + 2;
  var total = this.steps.length;
  var nextText = this.text.showSteps ? this.text.next + ' (Step ' + current + ' of ' + total + ")" : this.text.next;
  var submitText = this.text.submit;
  
  var forwardButtonLabel = ( newStep === this.steps.length - 1 ) ? submitText : nextText;
  console.log(forwardButtonLabel);
  this.forwardButton.children('span').html(forwardButtonLabel);

  this.currentStep = newStep;
};

UnbounceMultiStep.prototype.validate = function () {
  return this.form.valid();
};

UnbounceMultiStep.prototype.forwardHandler = function () {

  // Prevent going to next step or submitting if step isn't valid
  if ( !this.validate() )
  {$('.lp-form-errors').appendTo( '#' + window.module.lp.form.data.formContainerId );
    return false;}
  
  
  if ( this.currentStep === this.steps.length - 1 ) {
    this.form.submit();
    this.goToStep(0);
  }else{
    //$('#reg_nurse_disclaimer').hide();	
    this.goToStep( this.currentStep + 1 );
  }
};

UnbounceMultiStep.prototype.backHandler = function () {
  this.goToStep( this.currentStep -1 );

  // Refresh the validation status
  this.validate();
};

//jQuery plugin
lp.jQuery.fn.unbounceMultiStep = function(options) {
  window.ms = new UnbounceMultiStep(this, options);
  return this;
};
</script>
  1. Add another script (before body end tag), name it “Multi Step 2”
<script>
  lp.jQuery('.lp-pom-form form').unbounceMultiStep({
  steps: [
    { title: '', fields: 3 },
    { title: '', fields: 3 },
    { title: '', fields: 6 }
   ],
  nextButton: 'Continue »',
  backButton: 'Back'
});
  
lp.jQuery('form#fields').css('margin-top','20px');

lp.jQuery('#progress-bar').hide();

lp.jQuery('fieldset.step:last-of-type div.lp-pom-form-field').css('float','left');

lp.jQuery('fieldset.step:last-of-type div.lp-pom-form-field').css('width','150px');

lp.jQuery('fieldset.step:last-of-type div.lp-pom-form-field input').css('width','140px');

lp.jQuery('fieldset.step:last-of-type div.lp-pom-form-field select').css('width','140px');

lp.jQuery('fieldset.step:last-of-type div.lp-pom-form-field:last-of-type select').css('width','140px');
  
lp.jQuery('#Country').val('United States');
  
  var disclaimer = '<p style="margin-top: 55px; font-family:arial,helvetica,sans-serif;font-size: 10px; color: #636363; line-height: 12px; padding: 40px 0 20px 0;"> I like cats because they are fat and fluffy always ensure to lay down in such a manner that tail can lightly brush humans nose , for run outside as soon as door open. Chase ball of string lounge in doorway or give me some of your food give me some of your food give me some of your food meh, i dont want it yet plan steps for world domination so touch water with paw then recoil in horror for chase dog then run away i shredded your linens for you.</p>';


lp.jQuery('fieldset.step:last-of-type').append(disclaimer);
  
lp.jQuery(window).keydown(function(event){
if(event.keyCode == 13) {
    event.preventDefault();
    return false;
}
});
  

</script>
  1. Add the CSS (add stylesheet) - This is copied straight from the page I built for the demo.
<style>
html, * {
    -webkit-font-smoothing: antialiased !important;
}

/* Style Form */

	.multistep #fields{
  		height: auto !important;
		}

	.multistep #fields .step{
    	height: auto !important;
    	position: absolute;
    	top: 0;
    	display: none;
		}

	.multistep #fields .step.active{
    	position: relative;
		}

	.multistep #fields .step .lp-pom-form-field{
  		position: relative !important;
  		top: auto !important;
		}

	.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;
		}

	.multistep.initial .lp-pom-button.back-button{
  		display: none !important;
		}
  
	#lp-pom-form-636 .lp-pom-form-field .text{
  		font-family:'Montserrat'!important;
    	font-weight: 700 !important;
    	text-transform: uppercase !important;
    	color: #3F4144 !important;
  		font-size: 12px !important;
    	letter-spacing: 2px !important;
  		}
  
    #lp-pom-form-636 .lp-pom-form-field select {
    	background-color: #ffffff !important;	
    	border-radius: 20px;
    	font-family:'Montserrat'!important;
   		font-weight: 700 !important;
    	text-transform: uppercase !important;
    	color: #3F4144 !important;
  		font-size: 11px !important;
    	letter-spacing: 1px !important;
		}
  
  
/* Style Mobile */
  
@media only screen and (max-width: 525px) {
  .lp-form-errors{
  	position: absolute !important;
  	clear: both;
  	float: right;
  	margin-top: 20px;
  	top: -120px !important;
    left: 0 !important;
  	z-index: 100;
}
  }
  
  
/* Style Errors */

	.lp-form-errors{
 		position: relative !important;
 		clear: both;
  		float: right;
 		margin-top: 20px;
  		top: -200px !important;
    	left: -320px !important;
  		z-index: 100;
		}

	.lp-form-errors div.content li{
  		list-style: none !important;
  		margin: 0 0 5px 0 !important;
		}

	.lp-form-errors:after {
  		position: absolute;
  		top: -7px;
  		right: 55px;
  		display: inline-block;
  		border-right: 7px solid transparent;
  		border-bottom: 7px solid red;
  		border-left: 7px solid transparent;
  		border-bottom-color: #661414;
  		content: '';
		}
  
</style>
  1. Make sure anything in the CSS that has an ID for the form is change to your ID (this one only has two places to replace)

  2. In step #3, in the script called, ‘Multi Step 2’ - you can change the number of fields on each step and they will appear in the order you have in them. There you can also rename the ‘Back’ and ‘Next’ buttons and well as add or remove a disclaimer.

  3. SAVE!

This is a bit more on the advanced side, so I will be happy to help anyone with this as much as I can!
Disclaimer - I am not the original creator of this script

Please feel free to add on to this, edit it, remove something, etc.

One issue I have ran into is that the page will still go as long as the form is in the editor UI. If anyone has any ideas of that, please add!

Please make sure to test, test, test!

Enjoy


#115

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


#116

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?


#117

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!


#118

Thanks, @Caroline .
Here’s the URL

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

And the script


#119

Hey

Just tried setting it up, it works great :smiley:

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 :slight_smile:


#120

Hi @TilenK!

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

Thanks!