Table of Contents

Multi-Question - the Question editor (WEB - Landbot 3 only)

Dilyara Updated by Dilyara

The multi-question feature is only available for web v3 bots.

The Multi-question block allows you to ask more than one question within a single message, making it easier for the customer to provide all the relevant information.

Multi-Question block

  1. On top of the block's configuration menu, you can set the Message: the main text that will show up on top of your multi-question message:

Here's how it looks:

  1. Now you can start adding questions as if they were buttons of a regular Buttons block. The name of the button will be the type of that specific question, selectable from the first dropdown, or the same as the field "label" in case this is set.

In this example, we're:

  • Selecting Email as the question type.
  • Setting "email" as the variable name where the answer will be saved in.
  • Adding the label "Your email address" for this question's title.

We can click on the toggle 'Is required?' if we want the answer to be mandatory, meaning the user cannot skip it.

Keep in mind that if the toggle "Is required?" is not clicked, users will be able to click on Send button and skip the questions without any input.
Warning: The "Is Required" option is not compatible with the options "Color" and "Select", which will always choose a default answer if the user does not change it.

For the "Color Question", the default answer will be black, and for the "Select Question", the default answer will be the first option given.

  1. If we scroll down a bit within this button's configuration and click on 'Extra options', we'll find a new set of configuration possibilities, namely:
  • Placeholder: The text that shows up in the field itself. In the example below, "Enter your email". You can also use it as an example value to display inside the field when it has no value.
  • Help text: A little piece of text that gives context to the user. In the example below, "Put here your email address".
  • Default value: The value that will be stored if there's no user input.
  • Column Width: Here you can select if you want this question to fill the whole width of the form. In the example below, it's set to "full", but it can be 1/2, 1/3, 2/3.

And a few more for input validation:

  • Input validation - Minimum characters.
  • Input validation - Maximum characters.
  • Input validation - Regex pattern. If you want to validate using a regular expression.
  1. If you scroll down a bit more, you'll see the toggle "Advanced options". By enabling it you can customize submit button label.
  1. Finally, this is what this example multi-question look like:

Question types

Now we'll show you all the available question types:

Text

This is an open text question and it allows users to type anything in the field.

Here an example of its configuration:

And this is how it looks in the chat:

This type creates basic single-line text field. If you want an extensive answer from the user, better use the Text area question type!
Email

We've already seen this one πŸ˜‰

It's designed to ask the user's email, so it will show the following error message when the answer's format doesn't match the email address'.

Please keep in mind that the error message cannot be customized.
Tel

This question type is used to let the user enter a telephone number.

In this type of question, it can be very useful to use the Regex pattern in Extra options to validate phone numbers.

For the detailed explanation please check the Use case 1 at the end of the articleπŸ˜‰

URL

Use this question type to ask your users to provide you an URL.

In the chat you'll see this error message if the format is not matched:

Time

This question type allows users to choose a time.

In the chat when the clock is clicked, the user can choose the exact time:

Not compatible with IOs devices
Date

This question type allows a user to pick a date.

In the chat when the calendar is clicked, a date picker will be displayed and the date is going to be in the format DD/MM/YYYY:

Number

This question type is used to let the user enter a number. It includes built-in validation to reject non-numerical inputs.

In the chat user can use the scroll or arrows to increase/decrease the amount:

Week

With this question, type user can easily choose a week of a year. The answer may vary from week 1 to 52/53

Users can click on the calendar and choose a week. The answer will be saved as "Week 41,2020", for example.

Color

The color question type lets a user specify a color.

Users can pick a color either by using a visual color picker or by entering the color in hexadecimal format (#rrggbb). The answer will be saved in a hexadecimal format.

Text area

This question type is useful when you need an extensive answer from the user.

In the chat, the user will see a much bigger text area than in the regular Text question type.

Checkbox

A Checkbox allows a user to select single values for submission in a form.

When adding options to checkbox you'll see two fields:

Text - text that will be displayed in chat (what user will see).

Value - value that will be stored in the variable. Also can be useful for internal terms, because it's not visible for the visitor.

This is how it looks in the chat:

The options chosen by the user will be saved in array format:

Note: When a checkbox group is required, every single one must be checked.

When a checkbox group is not required, all of them can be optionally checked.
Radio

This question type is similar to checkbox, but with an important difference: only one option can be selected at the same time, meanwhile, checkbox allows multiple options to be selected.

Same as in checkbox, you'll see two fields when adding options:

Text - text that will be displayed in chat (what user will see).

Value - value that will be stored in the variable. Also can be useful for internal terms, because it's not visible for visitors).

This is how it looks in the chat:

Select

This question type allows a user to choose one option between a group of options.

When adding options you'll see two fields:

Text - text that will be displayed in chat (what user will see).

Value - value that will be stored in the variable. Also can be useful for internal terms, because it's not visible for the visitor.

This is how it looks in the chat:

Use case 1: Phone Validation with Regex

We are going to show how to validate a UK phone number format using Regex:

  1. Create a Multi-Question block and edit the question text

  1. Press Add New Question
  2. From the Question type section, select text
  3. In the "Save answer in" we are going to create if needed a variable type String called @phone_number
  4. Press "Extra options"
  5. Now in the bottom, we can see the input for our Regex Code:
  6. Let's search on Google for a Regex pattern. There are plenty of sites with examples for many cases, with a simple search like "UK phone number regex"

We find many results, one of the best pages to find already built Regex patterns is regextester.com:

  1. Once we enter we can see an already built example with few testing inputs:

In blue, are those tests that match with the Regex pattern above.

  1. Now we need simply to copy the Regex between the first / and the last /g:
  2. Paste this part in the Multi-Question regex pattern section:
  3. Press Save and test the bot
    If the input from the user doesn't match the Regex Pattern, it will alter the user and ask to retry:
The error message cannot be customized

Use case 2: Form to ask to allow WhatsApp notifications

This amazing example is done with just three questions, which are:

  1. To make the field for the country code we are using "select" question type, where you can add different options of country codes:
  1. For the phone number we are using "tel" question type.
  1. You can see that fields for the country code and for the phone number are in the same line.

To achieve it we will need to adjust the Column width both in the country code and phone number questions.

Imagine that the space of the question is divided in three parts. So we can play with different options of Column width to achieve result that we wish.

We can choose the option "1/3" of Column width for the first question and "2/3" for the second question, which will make an adjustment and will place two questions in the same line.

In the country code question open Extra options and set the Column width to 1/3:

  1. In the phone number question set the Column width to 2/3:

That's it! Now these two questions are in the same line πŸ˜‰

  1. Last, but not least! We are using "checkbox" question type to ask to allow to send WhatsApp messages:

Now you can recreate this example and adapt it to your needs πŸ™Œ

How did we do?

Contact