Unbounce Multistep Form

< script src = "https://code.jquery.com/jquery-3.2.1.min.js"
integrity = "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin = "anonymous" > < /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 + 62 + 'px');
 this.progressBar.css('margin-top', -35 + '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;
 var dywidth = 0;
 var widthfill = (100 / this.options.steps.length);
 for (currentStep = 0; currentStep < this.options.steps.length; currentStep++) {
  dywidth = dywidth + widthfill;
  this.progressBar.append(
   '<div class="step" style="width:' + dywidth + '%;background-color:#6a6a6a;transition: 0.4s linear; transition-property: width, background-color;">' +
   '<span class="num" style="color:white;text-align:center">' +

   '<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.
  jQuery("#fields").children().eq(4).removeClass('btnHide');
  this.goToStep(0);
  jQuery("#lp-pom-text-88").children().first().text("Do you own the house?");
 } else {
  event.preventDefault();
  if (this.currentStep == 0) {
   jQuery("#lp-pom-text-88").children().first().text("How much is your monthly electric bill?");
  }
  if (this.currentStep == 1) {
   jQuery("#fields").children().eq(4).removeClass('lp-pom-button')
   jQuery("#fields").children().eq(4).addClass('btnHide');
   jQuery("#lp-pom-text-88").children().first().html("What’s your Email?*");
   jQuery("#fields").children().eq(4).addClass("btnHide");


  }
  if (this.currentStep == 2) {
   jQuery("#fields").children().eq(4).removeClass('lp-pom-button')
   jQuery("#fields").children().eq(4).addClass('btnHide');
   jQuery("#lp-pom-text-88").children().first().html("Your First Name*");
   jQuery("#fields").children().eq(4).addClass("btnHide");


  }

  if (this.currentStep == 3) {
   jQuery("#fields").children().eq(4).removeClass('lp-pom-button')
   jQuery("#fields").children().eq(4).addClass('btnHide');
   jQuery("#lp-pom-text-88").children().first().html("Your Phone Number?*");
   jQuery("#fields").children().eq(4).addClass("btnHide");


  }

  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> <
script >
 jQuery('.lp-pom-form form').unbounceMultiStep({
  steps: [{
    title: '',
    fields: 1
   },
   {
    title: '',
    fields: 1
   },
   {
    title: '',
    fields: 1
   },
   {
    title: '',
    fields: 1
   },
   {
    title: '',
    fields: 1
   },

  ],
  nextButton: 'Continue',
  backButton: 'Back',
 });

jQuery('form#fields').css('margin-top', '0');

jQuery('#progress-bar').show();

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

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

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

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

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

//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>';

//jQuery('fieldset.step:last-of-type').append(disclaimer);

jQuery(window).keydown(function (event) {
 if (event.keyCode === 13) {
  event.preventDefault();
  return false;
 }
}); <
/script> <
script >
 $("#slideshow > div:gt(0)").hide();

setInterval(function () {
 $('#slideshow > div:first')
  .fadeOut(4000)
  .next()
  .fadeIn(3000)
  .end()
  .appendTo('#slideshow');
}, 3000); <
/script>

Trigger Java 

<script>

 jQuery(document).ready(function () {
  $("#lp-pom-text-88").appendTo("#lp-pom-form-90").children().first().next();
  jQuery('input[type=radio]').change(function () {

   setTimeout(function () {
    jQuery("#fields").children().eq(4).click();

   }, 100)
  })
 }) 

</script>

CSS

 

<style>html,
* {
 -webkit-font-smoothing: antialiased !important;
}


/* Style Form */

.step {
 width: 20%;
 height: 8px;
 text-indent: 10px;
 border-radius: 5px;
}

#progress-bar {
 width: 82% !important;
 background-color: #fcfcfc !important;
 border-radius: 5px;
 margin: auto;
 border: 1px solid #e8e8e8;
 height: 9px;
}

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

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

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

#progress-bar {
 width: 100%;
 background-color: grey
}

.multistep #progress-bar .step {
 width: 100%;
 background-color: #ddd;
 position: absolute;
 top: -6px;
 display: none;
}

.multistep #progress-bar .step.active {
 position: relative;
 display: inline-block;
}

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

.multistep .lp-pom-button {
 position: relative !important;
 top: 0 !important;
 width: 232px !important;
 display: none!important;
 float: left;
}


/********
 Formating CTAs Mobile
 ********/

.multistep .lp-pom-button.back-button {
 display: none !important;
 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;
}

.btnHide {
 position: relative !important;
 top: 0 !important;
 width: 232px !important;
 float: left;
}

.multistep.initial .lp-pom-button {
 display: none !important;
}

#lp-pom-text-88 p {
 font-size: 20px !important;
 color: #444 !important;
}


/* Hide the browser's default radio button */

.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}

#lp-pom-form-90 .lp-pom-form-field .opt-label {
 font-family: arial;
 font-weight: bold;
 font-size: 22px;
 color: #fff;
 line-height: 15px;
 background: #5cb85c;
 /* width: 30%; */
 display: block;
 padding: 15px 10px;
 text-align: center;
 cursor: pointer;
 border-radius: 3px;
}

.lp-pom-form.has-axis .option input[type=radio] {
 margin-right: 8px;
 margin-left: -20px;
 opacity: 0;
}

#ub-option-should_how_much_is_your_monthly_electric_bill-item-2,
#ub-option-should_how_much_is_your_monthly_electric_bill-item-3 {
 top: 56px;
}

#lp-pom-text-88 {
 display: block;
 background: rgba(255, 255, 255, 0);
 border-style: none;
 border-radius: 0px;
 left: 107.5px;
 top: 10px!important;
 z-index: 7;
 width: 352px;
 height: 19px;
 position: absolute;
}

@media only screen and (max-width: 600px) {
 #lp-pom-form-90 .lp-pom-form-field .opt-label {
  font-family: arial;
  font-weight: bold;
  font-size: 16px;
  text-align: left !important;
 }
 #lp-pom-text-88 {
  left: -15.5px;
 }
}

</style>