avatar image
1
Pagebuilder: Single page multi-step form not sending all form data
By Created , last editted

Hi there,

I was trying to create a multi-step form in the page builder, but the resulting behaviour is not what I expect.

I have a form component. In the form component I have a stepper component with two steps. In de first step I have one input field and a button with an interaction: NextStep, in the second step I have two input fields and a button (interaction: PreviousStep) and a button (interaction: submit form - standard submit button has responsiveness issues)

After compiling I noticed that only the data from the fields in the second step is sent to the back-office. It seems that when I trigger the next step the value of the input field in the first step is removed, because when I press the previous step button in step 2 the value of the input field in step 1 is empty again.

It can also be that the compiled app only submits data from input fields that er rendered. Because when I set the stepper to show all steps, then fill all the field and click the submit button all data is submitted. 

So question remains: How do I set up a single page multi-step form that does send all the form data keeping the UX of the stepper component in mind.


Hi there,

I was trying to create a multi-step form in the page builder, but the resulting behaviour is not what I expect.

I have a form component. In the form component I have a stepper component with two steps. In de first step I have one input field and a button with an interaction: NextStep, in the second step I have two input fields and a button (interaction: PreviousStep) and a button (interaction: submit form - standard submit button has responsiveness issues)

After compiling I noticed that only the data from the fields in the second step is sent to the back-office. It seems that when I trigger the next step the value of the input field in the first step is removed, because when I press the previous step button in step 2 the value of the input field in step 1 is empty again.

It can also be that the compiled app only submits data from input fields that er rendered. Because when I set the stepper to show all steps, then fill all the field and click the submit button all data is submitted. 

So question remains: How do I set up a single page multi-step form that does send all the form data keeping the UX of the stepper component in mind.

Answers
Sort by:

Please login to reply to the topic.