1) Basic principles of the form

Making a multi-step questionnaire becomes quite simple when you understand that you can customize the form block quite extensively without impacting its functionality. The basic principle is to transform the form into a kind of slider. The questions that will be each in a div are shown as you click on the "Next" button.

This image bellow shows the questionnaire under construction. You can see the card with the first question and on the right the card with the second question

The questions are in Divs that are stacked on the top left in the Form container, when this container is set to Overflow hidden, we will only see the first question and when we make it disappear ("display none") the second will appear.

2) Step by step : the form container

In the image bellow, we can see that we have a section inside which there is a classic centered container. Inside this container is the form. The "Form" container has been renamed to "form-multi". Inside are the cards (d-question-card) in which each of the questions are located. At the time I made this capture, the "Submit button" had not yet been integrated in the last card.

3) Important settings on the Form container

The Form element (renamed "form-multi") has become a flex container. It is set to horizontal and all elements in it stack on the left. Its overflow is set to hidden.

‍

4) The cards with the questions

You have to give a width of 100% to each card, for my part I also chose to give them an identical height so that the questions and the buttons are always placed at the same level of the screen.

In the screenshot above, I show a problem that you may encounter. By default in the "Sizing" menu the flex child is set to "Shrink if needed" and we see that the elements are compressed to fit in the container.

To prevent this from happening, it is essential that the card sizing is set to "Don't shrink or grow". As you can see in the following screenshot

4) The "Next" button to move from one question to another

There is only one animation that allows to switch from one question to another, the system deserves to be explained because it uses two advanced features of animations. The animation is attached to the class of the button not to the element.
‍
In order not to have to copy the animation we attach the animation to the class of the button. We see below that the animation is attached to the class "bt-next-multi" in the "Trigger settings".
‍

‍

5) The animation targets the parent element of the button

As you can see in the screenshot below, when you click on the button, "d-question-card" disappears, which is the parent element (containing the button). In the "Affect" section we choose to target the  "class" and "Only parents with this class". So when you click on the Next button, the card that contains it disappears but not the other cards (which all have the same class)

5) The return button

For the "Return" button, we can't use the same strategy as with the "Next" button. You will have to create a separate animation for each return button that displays the previous card ... and therefore pushes all the others.

6) Step animations ( at the top)

You will also have to create an animation for each step and change the color of the active state. I won't go into details here. The best solution is to create 4 active states for the 4 steps of the form and to add them to the Next and previous buttons. I don't go into detail about these animations, normally if you are reading this tutorial, you should be a fairly advanced Webflow user to know how to do this.

7) The submit button.

It simply put in the last card with an appearance similar to the Next button. All the changes we made on the form does not prevent it from working perfectly.

8) The downside

This technique has a flaw, it is the problem of required questions. In a Webflow form when you try to submit a form without having filled in a required question, the field is highlighted and a text tells you that this question is required. The problem here is that if a required question is on a card that is not the final card, the user will not see these indications. They may not understand what is going on. The best solution is to make the questions before the last step not obligatory and to concentrate the important questions on the last step (email, phone).

You can also use custom code, or no code for that matter, to make the questions in the steps required. This will be the subject of another tutorial, one day.