onStepNumberChange( )

Runs a callback when a Wix Form navigates to another step.

Note: The WixFormsV2 element is only available in Wix Studio and Editor X.

Syntax

function onStepNumberChange(callback: OnStepNumberChangeCallback): void
callback: function OnStepNumberChangeCallback(currentStepNumber: number): void

onStepNumberChange Parameters

NAME

TYPE

DESCRIPTION

callback

OnStepNumberChangeCallback

Callback for the changed form step number.

Returns

This function does not return anything.

Return Type:

void

OnStepNumberChangeCallback Parameters

NAME

TYPE

DESCRIPTION

currentStepNumber

number

The current step number which form navigated to.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Get which step the form has navigated to

Copy Code

1$w('#form').onStepNumberChange((currentStepNumber) => {
2  console.log('Step number changed to: ', currentStepNumber);
3});

Display a text message with step numbers

Copy Code

1// Display a text message showing which form step the site visitor is currently on 
2// and how many steps are in total.
3
4$w.onReady(function () {
5  const firstStep = $w('#form').getStepNumber(); // Get the first step number
6  const totalSteps = $w('#form').getStepsCount(); // Get the total number of steps
7  $w('#text').text = `Step ${firstStep} out of ${totalSteps}` // Display step numbers on the first step.
8  $w('#form').onStepNumberChange((currentStepNumber) => {
9     $w('#text').text = `Step ${currentStepNumber} out of ${totalSteps}` // Each time the step number changes, update the text message with the current step.
10  });
11});