How to use the multi-step question type

The multi-step question type allows you to ask a user multiple questions in one single step. 

When to use the multi-step?

The multi-step is very useful:

1. When you have several related questions you want to ask.
2. When you want to use calculations.
3. If you want to show an image and question next to each other horizontally.
4. Want to make your flow more compact (e.g. merging 3 questions in one). It could offer more structure and a better overview for your users.

Adding the multi-step to your flow

You can find the multi-step by clicking on the configuration tab > advanced question types > multi-step:

Editing your multi-step

You can drag & drop the multi-step question into your flow. Once you have added the multi-step to your flow, you can edit the multi-step by clicking on the pencil. A pop-up appears with two tabs where you will have the following options:

1. Information tab

• Type: Allows you to easily change the type of the question.
• Category: Allows you to give the question a certain category (convenient for internal structure and matching).
• Question: The overall question you want to ask your users.
• Text: Extra text for the overall question. This can be useful to give more clarity to your question. 
• Show in product matches list: when enabled, it shows the selected answers of the user on the result page as a match label.

2. Steps tab 

In the ‘steps’ tab, you can add multiple question types to your multi step. In the right-hand column. First, choose your desired layout.

• Layout 1: shows 1 column where you can add multiple questions underneath each other
• Layout 2: shows 2 columns next to each other. 
• Layout 3: shows 2 columns next to each other and 1 horizontal row.

You can add multiple questions types in each column as shown in the image below.  

Adjusting the width of multi-step questions

You can easily adjust the width of questions if you want to show multiple questions next to each other within one column. If, for example, you want to show two number inputs next to each other, you can edit both number inputs and set the "Display width" of both inputs to "Half width".

Vertically aligning multi-step questions

A common use-case when using a multi-step is to show an image and on one side and a list of options on the right. By default, all "blocks" in a multi-step are aligned to the top. To vertically align these blocks, you can use the "Center blocks vertically" option.

Hiding the 'next' button in your multi-step

By default, a multi-step shows a ‘next’ button at the bottom right so your users can go to the next follow-up. In some cases, you may want to use a multi-step as a result. For example, to show a text result or a calculated result. For instance, this could be the case when using Qonfi to calculate and advice the right clothing size. 

In that case you want to hide the 'next' button. You can do this by clicking on the finish flag or the arrow when hovering the answer, as shown below. 

A follow-up dialog will open. Select the follow-up 'do nothing',

The 'next' button is now hidden in your multi-step as shown below. 

Auto-proceed to next step

When you enable "Auto-proceed to next step", the user will automatically go to the next step when all single-select options are selected.

Adding an extra button with a link

You can also choose to add a button with a link in the text/media block by toggling the Add a button with link switch and entering a link and button text. 

Example of how it may appear below:

Multi-step matching

Matching your products to your added questions in your multi-step works the same as when you match a 'regular' question type. In ‘data matching’, you will see the added questions under your ‘main question. You can select and match each individual added question. 

Match testing a multi-step 

Match testing your multi step works the same as match testing a single question type. The added question types in the 'steps' tab are nested into the multi step.

Use cases

Use case 1 : calculate clothing size

You can use the multi-step to easily calculate the right clothing size based on the user input. It's also possible to build dynamic urls so you can send users to an existing webpage with products containing the correct clothing size. See the video below for an how-to. 

Use Qonfi to enrich your customer profiles for better personalization

It is extra interesting to use Qonfi to calculate the correct clothing size at the time you collect the calculated clothing size and push the (zero-party) data  to your customer data platform (CDP). This way, you can use this data to enrich your customer profiles and further optimize your on-site personalization.

Use case 2: calculate the right size, square meters or quantity needed

The multi-step is great when you want to use calculations. For example, you can calculate the right sizes, quantities or price based on different inputs of the user, such as the length and heights. You can then use the calculated output (square_meter, size or quantity) in your matching or/and in your advice as shown in the video below.

Configuring proceed conditions

Configuring proceed conditions ensures that users cannot advance to the next step if the entered value does not meet the specified requirements.

For instance, suppose you have two number inputs for length and width, both limited to a maximum value of 10. You can configure proceed conditions to prevent the user from advancing if the sum of both combined values exceeds 10.

How to set up the proceed conditions

In the example above we have set up a multi-step with 2 number inputs for length and width.

The first input, length, has the variable key length_input and uses its entered value.

The second input, width, has the variable key width_input. It also has an additional variable called maximum_value, which is set to {vars.length_input + vars.width_input}. This ensures that the length and width values are added together, giving the combined total.

Now, let's go back to editing the multi-step:

At the bottom, under Proceed Conditions, we can create our conditions.
In this example, we use the previously created variable maximum_value and set the condition so that it must be less or equal to 10.

There is also an input where you can display a custom error message when the conditions are not met, called “Proceed Conditions Error Message.”

Once all of the above has been configured, the multi-step  will function as shown below.