[How To] Add A Multi-Step Form 2.0

forms

#144

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%20button
back button.PNG966x305 86.8 KB

Here’s my next button:

next%20button
next button.PNG848x274 47.6 KB

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

multi-step%20script
multi-step script.PNG977x127 7.61 KB

This is what it looks like when it’s up and running:
multi-step%20styling

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


#146

Hi,

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?

Regards,


#147

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.