Multi-Field, Multi-Step Form 🔥

design
forms
tips
scripts

#43

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:


#44

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?


#45

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


#46

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:


#47

Try something along the lines of https://stackoverflow.com/questions/3366828/how-to-disable-submit-button-once-it-has-been-clicked

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… ))


#48

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
After
this.form.submit();

Add
this.forwardButton.addClass('move-on-submit');

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.form.submit();
    this.forwardButton.addClass('move-on-submit');
    
  }else{
    //$('#reg_nurse_disclaimer').hide();	
    this.goToStep( this.currentStep + 1 );
  }
}; 

Then in one of your CSS files
Add
.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.


#49

Awesome!

Is there by any chance a way to automatically jump to next question without clicking “next” button?
sthing like this: https://audimagnet.com/comparador/?v=1&adsid=_19630420300699590

That’d be an extra-awe