-
-
Save mpro9x/34fd6b9a527a06c2a96442d9ac2c4222 to your computer and use it in GitHub Desktop.
Here is the Multi Step Script 1, Please put this to the Javascript section in Unbounce "Before Body End Tag" area
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//source code found https://community.unbounce.com/t/multi-field-multi-step-form/13718 | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> | |
<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.form.find('button[type=submit]').eq(0); | |
// 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.text(); | |
this.init(); | |
} | |
UnbounceMultiStep.prototype.init = function() { | |
this.formContainer.addClass('multistep initial'); | |
this.form.attr('id', 'fields'); | |
// Add progress bar | |
this.formContainer.prepend('<div id="progress-bar"></div>'); | |
this.progressBar = 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.find('.fields').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++; | |
} | |
} | |
this.progressBarItems = 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); | |
// Add event listeners | |
this.backButton.bind('click.unbounceMultiStep', this.backHandler.bind(this)); | |
this.forwardButton.bind('click.unbounceMultiStep', this.forwardHandler.bind(this)); | |
this.fields.find(':input').bind('invalid', function(event) { | |
// Prevent browser from trying to focus invalid inputs on non-visible steps | |
if (jQuery(event.currentTarget).closest('fieldset.active').length === 0) { | |
event.preventDefault(); | |
} | |
}); | |
// Show first step | |
this.goToStep(0); | |
}; | |
UnbounceMultiStep.prototype.goToStep = function(newStep) { | |
// Make sure we aren't going to a step 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; | |
this.forwardButton.children('span').html(forwardButtonLabel); | |
this.currentStep = newStep; | |
}; | |
UnbounceMultiStep.prototype.isValid = function() { | |
return this.steps.eq(this.currentStep)[0].querySelectorAll(':invalid').length === 0; | |
}; | |
UnbounceMultiStep.prototype.forwardHandler = function(event) { | |
if (!this.isValid()) { | |
// If one or more fields on the current step is invalid, prevent going to next step. Allow the | |
// default click action, which will display the validation errors. | |
return; | |
} | |
if (this.currentStep === this.steps.length - 1) { | |
// If we are on the last step, go back to the first step, and allow the default click action, | |
// which will submit the form. | |
this.goToStep(0); | |
} else { | |
event.preventDefault(); | |
this.goToStep(this.currentStep + 1); | |
} | |
}; | |
UnbounceMultiStep.prototype.backHandler = function(event) { | |
event.preventDefault(); | |
this.goToStep(this.currentStep - 1); | |
}; | |
jQuery.fn.unbounceMultiStep = function(options) { | |
this.map(function(index, element) { | |
new UnbounceMultiStep(jQuery(element), options); | |
}); | |
return this; | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment