Change the onClick() of a 'Back' button in a multi state form

Ask the community
, ,
1

Hi,

I’m stuck trying to make a ‘Back’ button in a multi-state form work the opposite way – instead of going back, I want it to push users forward through the form steps. I tried using the onClick -> changeState method to change the form state to the next step, but it doesn’t seem to play nice with multi-state forms. Here’s what I tried:

Here is the code i’m using to do so:

		$w("#backButton").onClick(() => {
		console.log("Clicked Back");
		$w('#mainForm').changeState('nextStep');
	});

I’m aiming to create a form flow where hitting ‘Back’ basically means ‘No’, moving the user forward, all within a form setup because I need tags for some scripts I’m running.

If there’s a workaround or a different way to set up a multi-state box inside tags to do this, I’d love to hear it. I’m kinda stuck and any help or pointers would be super helpful.

Thanks!

2

Is it possible the back button is already set up to do something else in the editor? Or the nextStep state id is incorrect? Can console.log($w('#multiStateBox1').states) to check their ids.

I made a little test site that demonstrates this functionality (and loops back around at the end of the state list): https://anthonyl5.wixstudio.io/msb-next

$w('#next').onClick(() => {
	const currentStateIndex = $w('#multiStateBox1').states.findIndex((i) => {
		return i.id === $w('#multiStateBox1').currentState.id;
	});
	const nextStateIndex = currentStateIndex + 1 >= $w('#multiStateBox1').states.length ? 0 : currentStateIndex + 1
	const nextState = $w('#multiStateBox1').states[nextStateIndex];

	$w('#multiStateBox1').changeState(nextState);
})
3

Thanks Anthony for the response.

As I mentioned - I took the method from the multiStateBox into a multiStateForm, I suspect that’s why it doesn’t work, but can’t find any reference to that.

I must have the form tags wrapping the form itself, so the multiStateBox can be a good option, if there would be a way to wrap it in form tags.

4

If you are comfortable with coding, why not ditch the Wix Forms multi step form and create your own using a multi state box?

This way you code all buttons to move forward to the next slide …… or not include back buttons all together.

When connecting the input elements just be sure to use a form dataset instead of a regular dataset. That way you can use Wix automations to trigger a notification to the Admin when the form is filled out. (Or code it, whatever floats your boat)

#codequeen

1 Like
5

I see. In this case there’s no support for a MultiStateForm type in Velo. @codequeen’s suggestions should work for your needs.

6

Hi! Thanks for the response codequeen.

It might be that eventually I’ll ditch the form to use the multiStateBox, are you familair with a way to put this multiStateBox inside form tags? I can code the whole form myself, but much much easier using Wix elements to do the work :slight_smile:

Thanks!