[How To] Add A Multi-Step Form 2.0


Ahhh. I see. No, you create the back and next buttons yourself. You can style them however you like.

When you create the two buttons you have to find their ID’s & make sure that is what’s in your script.

So here’s my back button :

back button.PNG966x305 86.8 KB

Here’s my next button:

next button.PNG848x274 47.6 KB

And you can see I’ve put those in the script here:

multi-step script.PNG977x127 7.61 KB

This is what it looks like when it’s up and running:

I’ve just pointed out a couple of other things I’ve done.

I’ve but a box around the progress bar and I’ve changed the colour of the step counter to match the styling of my page. The box is as simple as creating it and arranging it behind the form in the right spot.

Changing the colour is in the script. It’s here:step%20counter%20text

In that picture you can see that you can also change the progress bar colour (the from: & the to: values).

1 Like



Thanks for this info!

I added a button and looked in the code for lines saying ‘Var backButton =…’ and 'var nextButton =…" so that I can add the ID like you showed, but they are not there. Is this something I can add myself without ‘breaking’ the script? Where should I add it exactly?




Hi Matteo.
I’m afraid we are talking about two different scripts. My script is the original one of this thread & yours is the one posted by Caroline right?

I’m afraid I don’t use the multi-step form you are trying to set up so I can’t help you!

P.S. I do recommend using the multi-step form (the one this thread is supposed to be about!).
It’s brilliant & easy to set up.

Scroll all the way to the top and try it out.



I actuallly totally agree with @mike22rtn. Even though this script is already totally awesome, it would be great if you could 2-3 questions at a time instead of only 1, so that to the user it “feels” like only 2-3 pages of a survey, even if it’s the same amount of questions.

Also @Noah do you know if there’s a way to track individual fb pixel standard events for each question? This would be IMMENSELY valuable and is a gaping hole in the entire survey/quiz/funnel software industry. None of the dynamic survey tools allow for tracking conversions INSIDE the survey, they only track the start and end. But for example, to better optimize fb campaigns, I want to be able to put a ViewContent pixel on the first question, an AddToCart pixel on the second question, a Lead pixel on the 3rd question, etc. etc.


Multi-step form in AMP

I’m also very interested in where to set the height/max @Eliot_Sell!



I’m having the same exact problem.



Be careful with this script, with the removal of Jquery in the form you need the following par in the JS of otherwise you’ll have two errors messages.

//add error span
errorSpan.style.color = '#FFFFFF';
errorSpan.style.position = 'absolute';
var labelHeight;
labelHeight = allFields[0].querySelector('label').clientHeight;
}else {
labelHeight = 35;
errorSpan.style.top = '-'+labelHeight+'px';  

Maybe @Noah can confirm this as i’m not a JS expert ?



First of all, I would like to send a massive high five for job well done with this script. Working like a charm.

One thing that I would love to change (any ideas how?) is that if you press left or right direction button it takes u back or forward respectively in the form. It proved to be counter productive as a lot of people use direction buttons to navigate through text.

Anyone knows how to fix that?

Thanks a lot in advance :slight_smile: