Multi-Field, Multi-Step Form 🔥

design
forms
tips
scripts

#23

Okay think I got the email validation issue… might also need a little extra for phone validation but the page I am working on doesn’t require a phone number so will update if and when I find I need phone validation.

Fix is as follows… just need a little extra in the validation skipping for different pages :smiley:

// Only validate fields that are in current step

  $.each(window.module.lp.form.data.validationRules, function() {
    if ( this.email === true ) {
      this.email = $(this).is('.active :input');
      this.required = {
      	depends: function () {
          return $(this).is('.active :input');
      	}
      };
	}
    else if ( this.required === true ) {
      this.required = {
      	depends: function () {
          return $(this).is('.active :input');
      	}
      };
	}
  });

#24

@TimothyDO - Great work & thank you for sharing! Myself and many others thank you!


#25

Okay so next challenge,

Anyone else tried custom validation with this script?

I’ve just tried implementing the data8 custom validation from https://blog.data-8.co.uk/2018/01/25/validating-email-telephone-numbers-in-unbounce-forms/

((Code actually looks like this… formatting on the blog post screws up the code formating))

<script type="text/javascript">window.jQuery = lp.jQuery;</script>
<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/loader.ashx?key=API_KEY_HERE&load=InternationalTelephoneValidation,EmailValidation"></script>
<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/jqueryvalidation_min.js"></script>
<script type="text/javascript">
window.module.lp.form.data.validationRules.telephone.d8val_inttelephone = true;
window.jQuery(document).ready(function() { 
	window.module.lp.form.data.validationMessages.telephone.d8val_inttelephone = "Data8: Invalid telephone number";
}); 
</script>

It does seem to work on occasion but will never work on the first click of the next button…
Anyone got any thoughts?


#26

I’m also having this issue. Have you had any luck yet? @Caroline is this something you’ve looked into or have a fix for? After I submit the form, the form returns to step 1 while the form is being submitted and a URL redirect takes place to a thank you page.


#27
 if ( this.currentStep === this.steps.length - 1 ) {
    this.form.submit();
    this.goToStep(0);
}

If you look for this section, this is what both submits the form and jumps the page back to step one on submission. You can happily delete the this.goToStep(0); section that will stop the jump back to the first page.
As the what happens on the submission of the form that is controlled from the unbounce editor as this is just calling the standard submission with the this.form.submit();


#28

Hi @Caroline, I’m now having a similar problem as @ibrudap.
Can’t seem to get the “next” and “back” button to align with the form.

Here is the example, it’s in spanish:
http://unbouncepages.com/entrenamiento/argentina/

Thanks!


#29

@TimothyDO

Thanks that makes sense and it worked.

One issue I’m trying to figure out is how to stop the form submitting when filling out the form on mobile and tapping “go” on an android keyboard. yet to test on an iphone but i’m afraid the same issue will remain - that a form can be submitted without completing all fields by tapping “go” on the mobile keyboard after filling in a field.

EDIT:

The following code will change the behavior of the GO button on mobile devices, so instead of submitting the form pressing GO will just close the keyboard

jQuery(document).ready(function() {
jQuery(‘input’).keypress(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if ( (code==13) || (code==10))
{
jQuery(this).blur();
return false;
}
});
});

Remember to add script tags at the start and at the end


#30

@raget in your style sheets set #lp-pom-button-11 left attribute to 0px; or turn it off…


#31

@Jess

I noticed there is some script that adds a progress bar in lines 39-41

// Add progress bar
this.formContainer.prepend(’

’);
this.progressBar = lp.jQuery(’#progress-bar’);

And in the second script there is code that hides it

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

Showing it instead of hiding it makes numbers 1,2 and 3 show but no progress bar.

How do I get this progress bar working?


#32

That basically is the progress bar :wink:

It’s providing a good framework to create your own through JS/CSS tweaks…

For example on one of the landing pages I am using I’ve tweaked it as so…

Mutlipage.js
this.progressBar.append(’

’ +
’+Math.floor(((currentStep)/this.options.steps.length)*100) + ‘% complete ’ +
’+ this.options.steps[currentStep].title +’’ +
’+ this.options.steps[currentStep].description +’’ +
’);

and multiPageOptions.js

  lp.jQuery('.lp-pom-form form').unbounceMultiStep({
steps: [
	{ title: '', description: 'Select your gender:', fields: 1 },
	{ title: '', description: 'Select your age:',  fields: 1 },
	{ title: '', description: 'Are you a smoker?',  fields: 1 },
	{ title: '', description: 'Enter your name:',  fields: 2 },
	{ title: '', description: 'Enter your phone number:',  fields: 1 }
],

This leads to a title/description/percent complete info that I can then format using CSS…

((excuse the formating for the first javascript, the wysiwyg is refusing to format it correctly…))


#33

Hey @Caroline ,

Sometimes I get a form completion where most of the fields are empty even though they are mandatory if you want to progress to the next step. Even the name, email fields (mandatory) in the last steps are empty.

Within these leads the fields in the first step are filled in, however alle of the fields from step 2 and onwards are empty. Anyone had this situation before?


#34

Hi @Caroline @TimothyDO

Where do I edit the code to change the number of columns on each step? It currently does two columns on the final step and one during all the others. Ideally, I would be able to reverse the order of that and have two columns on my first step and one in my second step. Can you please help?

Thanks!
Riley


#35

In this section in the second script you can set the number of pages and number of options to each page. The script above does 3 on the first and second pages, 6 on the last (Any remainder is added to the last page).
Make sense?


#36

Hi Timothy,

This script is working for me when I have an email on the second part of the form but it is also removing the built in Unbounce email validation. The email field now validates with any value entered into the field even though the field has the Unbouce email validation checked.

I tested and when I removed the script the correct Unbounce email validation returned.

Have you had this issue also? If so, how were you able to resolve so the field validates as an email instead of any text?


#37

Hi @Caroline -thank you very much for the code!

I’m having a problem where the back button is submitting the form.

Anyone else experiencing this?

I’m trying to isolate the issue and will report back.

Thanks!


#38

With every update to the builder there is almost always an update that needs to be made to the script… which has been happening a lot lately. With this instance, there isn’t a great way around this (and it isn’t the easiest if you are not familiar with custom scripts or CSS) - but you have to change the button’s ID attributes. This will remove default styles

First, go into Multi Step 1 and add the following line at the bottom of the Store DOM Elements section:

this.forwardButton.attr('id', 'next-button');

The section will look like this:

  // 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.forwardButton.attr('id', 'next-button');

Second, go down to the Add a Back Button section and change it to the following:

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

Now you will need to add a new stylesheet to edit the buttons. It will look something like the following:
Please note: this is just an example & will need to be completely custom for your design

<style>
#next-button, #back-button {
display: block;
border-radius: 20px;
width: 190px;
position: absolute;
background-color: #522398;
box-shadow: none;
text-shadow: none;
font-family: Roboto;
}
</style>

I hope this helps!


#39

@Caroline

Thank you so much for your fast and very well explained solution!

This did the trick and fortunately I can fix up the CSS :slight_smile:


#40

Apologies Abraham, I only have this script on one variant at the moment as it goes through my companies QA process.
As Caroline mentions below, updates play havoc with certain scripts and I’ve spent the past week trying to debug issues on our custom inline errors script (which features on all our landing pages :*( ) So the new version of multipage is a little on the back burner for me at the moment… does however look like I am writing the new version of the multipage compatible inline errors script I’ve been pushing for…


#41

Ok, I understand, thank you for the reply. Good luck with everything and I look forward to seeing any new tips/scripts that may be coming! :slight_smile:


#42

Hi again!
One more question, is there a way to make the “enter” android button to go to the next field?
The experience now is I need to hide the keyword each time to select the next field and is defenetly not the best.