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


#50

@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 = module.lp.form.data.validationRules[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:


#52

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


#53

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…