Multi-Field, Multi-Step Form 🔥

Hi everybody! Thank you for the script!

Is there, by any chance, anyone that could share the script including a progress bar? That would be awesome!

Thanks! :slight_smile:

1 Like

Thanks for this. I ALMOST have it working. I can’t seem to figure out the css formatting, though, for the buttons. How do I get the form fields centered on mobile? On steps with multiple fields visible, they appear shortened and left justified instead of centered/full width. How do I fix this?

Having the same problem with email validation. Has anyone cracked this yet? Thanks.

Hi all,

Thanks again for all the great tips so far!

I’m having an issue where eager users are managing to submit the form multiple times before the follow up page loads- this is causing some havoc for our backend system that is receiving the data via webhook.

I initially used @TimothyDO 's code that prevents the form flicking back to “page one” on submit. I initially thought having the “submit” button sitting idly there on the page while the follow up page loaded was causing people to click it again thinking it wasnt working, so I reverted to the original code.

It seems though that the “continue” button becomes the “submit” button after meeting a set of criteria in the JS (is this correct?), so the problem is still occuring- people are clicking “continue” causing additional submits.

My question is, is there a way to disable the buttons on submit? Or better yet, adding to @TimothyDO 's fix, disable the submit button and change the text to “please wait”?

I’ve searched for a solution and tried my hand at fixing it but unfortunately I havent managed to get anything working.

Apologies if this is starting to fall outside the scope of this post, even a point in the right direction would be most appreciated :slight_smile:

Try something along the lines of

and add that in after the line
if ( this.currentStep === this.steps.length - 1 ) {

That ways it should cut in after the final button press if the form is valid… else your not blocking the persons ability to modify errors and try a submission again…

((would have a better go at this but trying to sort out database issues… ))

1 Like

Hi @TimothyDO,

Thanks for the suggestion! It appears however that disabling the submit button is a bit trickier than you’d think, with certain browsers treating the disable JS differently. Someone in the linked thread mentioned they ended up moving the button instead, so for anyone else struggling with this I came up with the following:

In Multi Step 1 JS


My code looks like this (note I removed the line that returns the form to the initial step)

  if ( this.currentStep === this.steps.length - 1 ) {    
    this.goToStep( this.currentStep + 1 );

Then in one of your CSS files
.move-on-submit { margin-top: 100px; visibility: hidden!important; }

The above will simply move the button down 100px and make it invisible. To the user the button will disapper while the followup page loads.

If anyone sees a potential problem with the above let me know!

Thanks again all.


Is there by any chance a way to automatically jump to next question without clicking “next” button?
sthing like this:

That’d be an extra-awe

1 Like

@TimothyDO or anyone else, I have an issue with custom validation. I’ve added custom validation to one of my fields (postcode).

 lp.jQuery(function($) {
    // Config
    var ruleID = 'PostcodeValidation';
    var field = 'postcode';
    var message = 'Make sure poscode entered is correct. Include spaces.';
    var rules =[field];
    $.validator.addMethod(ruleID, function(value, field) {
      // Replace this with any expression you like. It should evaluate to true
      // if the field is valid and false if invalid. This example adds a 
      // rule that the user must enter 'I accept' exactly into the field.
      var valid = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([AZa-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/.test(value);
      return valid || (!rules.required && !value);
    }, message);
    rules[ruleID] = true;

Now I get a validation error right in the beginning and cant continue with the form (postcode field is at the end of the form).

Could you please help me out. I saw the fix for email validation field but dont really understand how to apply it to this.

Thank you :slight_smile:

I’ve tried this, but it shows me all the numbers on all the pages instead of each step… any ideas?

Apologies but my original page where I was testing this is lost in discarded pages…
I would say (complete guess work) that the append is appending to something outside the page structure… therefore you can see all numbers on all pages. | can’t for the life of me remember where this.progressBar was defined as… but that is where I’d start looking…
Sorry again…

Has anyone had a chance to post this? It would be super useful.

1 Like

After adding the code to fix the back button I have a really big problem editing the css so that buttons look good, have backgrounds, etc.
Any chance anyone can help me with this. Thanks.

Has anyone discovered how to get the progress bar to function properly? Currently it displays all three steps/titles at the same time and we haven’t been able to find a working fix.

Does anyone know how to customise the button names between the different steps? At the moment the text for my next button and submit button are the same. I would like these to be different. So the final submit button can naturally be called submit but the button on the first step can be something like “tell us more” or whatever. Thanks for the inputs.


Hey Fourward,

In the second script, where you set how many fields to show per step you should see a line “nextButton”. If you change this that should change the text for your next button, for example, you can change it from ‘Continue »’ to ‘tell us more’. For your submit button, just change the text of the button connected to the form in the Unbounce editor.

1 Like

Why hasn’t unbounce made this a feature that can be easily implemented for those of us who don’t know how to code? I’m trying to get this to work properly but I’m completely lost, and the more I look into things as someone who doesn’t code, it seems like it would just be easier to use a wordpress template for a landing page and then use one of the many plugins to make a multistep form easily.

So awesome! Thank you very much.