Condition

You use the Condition form element to create a form that responds to user input. This turns your form into a dynamic form. As a result, you can have the form show form elements to the user only if these are relevant, for example, while form elements that are not relevant are hidden. If a certain condition is fulfilled, you can also specify that entire form pages should be skipped or that an input field becomes a required field. By using conditions, you can ensure that the forms you create remain clearly structured and adapt dynamically to the needs of your users.

For example, you might be creating a form that asks users whether they want to receive more information about your product by email or post. If they want to receive this information by email, you do not need to ask them for their address details. If a user chooses ‘post’, however, form elements are then shown for entering the details of their postal address. How these address elements behave therefore depends on the input made in other form elements.

Without conditions, the form would simply show all of its form fields all the time. Whether or not your users select the email or post option, this would not affect what is shown in the form.

Two forms shown with all form elements regardless of the choice made.

In the screenshots that follow, you can see the same form with conditions. Here, users are only shown what is relevant for them.

Two forms a shown. Depending on what is selected different form elements are visible.

How it works

First, create the complete form, with all of the fields and options that you may need – even if these will not be relevant for all your users.
You then create the conditions.

Adding Condition

In the Structure area, click the green plus sign.
Navigate to General →Page elements and click Condition.
You can now see the form element you’ve just added in the form tree.
On the right, under Edit Condition, you can now adjust the settings for your new form element as required.

Setting the trigger and outcome

This section shows you how to specify the criteria that need to be fulfilled to trigger a condition and the action or outcome that should then result.

Specifying an If trigger for conditions

Under the If section, select the form element and the criterion that needs to be met so that the action in the next section under Then is accordingly triggered.

Give the condition a name.
In the Form element drop-down field, select the form element that will be used as the trigger for the condition.

Example

For the example we mentioned above, we need a single choice field with 2 options: ‘Email’ and ‘Post’, which we therefore select here.

Our users have to make this choice, so we activate the Required field option in our Please send me information by single choice field.
In the Operator drop-down field, select the operator for the trigger. Which operators are available here depends on whether you selected a text field (e.g. an input field) or a selection field (e.g. a single choice field) in the If section.

Example

We pick Selected here, because we want to specify what happens when a particular option is selected.
For Value, you can either enter values or select options, depending on whether you picked a text field or a selection field under Form element. Enter a value or pick an option that will be used as a reference by the selected Operator.

Example

In our example, we are offered the choices of ‘Email’ and ‘Post’ from the single choice field. Here, we pick Email, because we want to set up a condition where an input field is shown for the email address and becomes a required field when users select the email contact option.

Specifying a Then action for conditions

Under Then, you specify which action is carried out when the criterion specified under If has been met.

In the Form element drop-down field, select the form element that will be referenced by the state that you have specified in the If step. Then click State and select the action that should be carried out when the condition is fulfilled. If necessary, you can also specify another Outcome for your condition.
Please note

The condition specified under If affects the form element that you select here. If the condition is not fulfilled, it will take on the opposite state of the action that you specify here.

These pairs of opposing states are as follows:
1. Hidden – Shown
2. Activated – Deactivated
3. Required field – Optional field
4. Editable – Read-only
Example

In our example, we pick two states for the input field used for the email address: Shown and Required field. Accordingly, it should be shown and become a required field when users select ‘Email’ and therefore fulfil the condition. (Another option would be to specify that the email address is a required field when creating the input field. In this case, we would only pick the Shown state.)

If our users select ‘Post’ rather than ‘Email’, the condition will not be met. In this case, the form element added will take on the opposite state. This means that the input field used for the email address will be hidden (state Shown becomes Hidden). So, now we have created the first condition.

In the next step, we now need to create the second condition. This specifies how the form behaves when users choose the ‘Post’ option. Here, we need to have the condition display the input fields for the address details when users select ‘Post’.
First of all, we need input fields for street, house number, city and country. As we are creating these input fields, we will also set them to be required fields.
Following this, we then create the condition as shown below:

Trigger If = ‘post’ selected → action Then = street, house, city, country shown

As we have already specified that the input fields for street, house number city and country are required fields, we do not need to add any other states here
Please note
1. Required fields do not have to be completed if they are hidden.
2. You can pick the states Optional and Required field as well as Editable and Read-only only if Required field or Read-only has not been activated in the properties for the respective form element you added.
3. The states that are available here will depend on whether you picked a text field or a selection field under Form element.
Tip

If conditions with various actions are present in a form, they may end up influencing one another. In rare cases, this can lead to a situation where conditions do not work as they should. For this reason, we do not recommend picking opposing actions in separate conditions. For example, if you want a condition to show a particular form element, then you do not need to set up a second condition for this form field that specifies how the field should otherwise be hidden.