Multi-Field, Multi-Step Form 🔥

design
forms
tips
scripts

#1

Every so often, the Unbounce Community is blessed by some absolute freakin’ ROCKSTARS like @Caroline. A few months back, she took it upon herself to share this boss workaround for a multi-step form and it blew our minds. This deserved to be a standalone post within our Tips and Scripts.

Won’t you join me in celebrating the awesomeness that is Caroline?! It’s community members like her that make this such a badass online community! :raised_hands:


33%20PM

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


I think I can speak on behalf of a lot of people…

notworthy


The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

This is an epic script. So useful! We’re going to give it a try right away and see what we come up with. Thank you for sharing it!


#3

Thank you, @Nicholas! I look forward to seeing any advances on this! #sharingiscaring


#4

Awesome @Caroline a real game changer for conversion freaks like me. Thanks!


#5

Amazing @Caroline ! Thank you so much for sharing. Can’t wait to test this out.