How to set up Conditional Fields

Published in Convert Forms
Updated 15 Sep, 2021

People don't like filling out long forms. Create the illusion that your form is short by only asking the questions that are relevant to your users. With Conditional Fields, you can easily create smart and dynamic Joomla forms that react to the actions your users take.

With Convert Forms Conditional Fields you can create rules to:

Show and hide fields

Change values in fields

Add and remove items to/from a list

TABLE OF CONTENT

How to use the Conditional Fields Builder

In this guide, you will learn how conditional logic for fields works and how you can utilize it in order to create dynamic fields and personalized forms.

Note: To proceed with this guide you will need to have Convert Forms Pro and the Conditional Logic Plugin enabled.

Convert Forms manages conditional fields in a central place which can be found under the Behavior tab in the left settings panel. There you need to enable the Conditional Logic option first and then click Setup Conditions to open up the simple yet powerful condition builder environment.

Once the builder opens up for the first time, you will be greeted with a message that says “You haven't added any conditions to this form yet”. Just click ‘Add Condition’ to add your first condition to the form.

After there's at least one condition configured, you should be able to see more options. The builder is divided into 2 parts, the Conditions List and the Condition Settings.

In the left sidebar, you can see at a glance all the form conditions you've created. Think of it as a menu that helps you navigate through the settings of each condition easily.

You click on an item on the list and the respective condition settings appear at the right. This is rather helpful especially with complex forms where you need to focus on one condition at a time.

Each item on the list can have a unique label so you can easily distinguish each condition. Just click on an item and its label will be turned into an editable input. You can write anything you want as the label appears in the backend only.

Additionally, when you hover on an item, a toolbar with two buttons appear that helps you delete and copy a condition respectively.

To add a condition you simply click on the Add Condition button. Although there's no limit on how many conditions a form can have, it is recommended to keep it to the minimum for performance reasons especially if your form consists of a big number of fields. Read Does conditional logic impact performance? FAQ to learn more. Lastly, conditions are independent and do not interact with one another.

In the right area of the builder is where the magic happens. There you can setup the rules and the actions of each condition. A condition is organized into the following 3 sections.

1. When (Rules)

These are the rules that need to be met in order to execute actions. A rule is always based on the value of a field and it consists of 3 options, the Source Field, the Comparison Operator and the Source Value.

To better understand what each option does, let's see an example of a dead-simple condition in plain english.

WHEN FIELD1 equals to 123 SHOW FIELD2

The FIELD1 equals to 123 part is our rule. Where FIELD1 is the Source Field, equals to is the Comparison Operator and 123 represents the Source Value.

Source Field

The field of the form that accepts the user input and that will affect the fields we want to behave dynamically. Fields that do not require the user input such as HTML and Submit Button won't be included.

Comparison Operator

Configure how to compare the expected value set in the Source Value with the user input. The available options shown in this dropdown may vary depending on the type of the selected Source Field. For instance, the Has Selected option will appear in the list only if the selected Source Field is a type of Dropdown or Checkboxes field.

Here’s a list of all supported operators.

Operator Description
Is empty Returns true if field is empty
Equals Returns true if field equals to x. The case is ignored.
Has selected Returns true if field has selected the x option. Appears on option-based fields such as Dropdown, Checkboxes and Radio Buttons.
Contains Returns true if field contains x. Appears on text based fields only. The case is ignored.
Starts with Returns true if field starts with x. The case is ignored.
Ends with Returns true if field ends with x. The case is ignored.
Matches Regex Returns true if field matches the regular expression. The Regular Expession is initialized with no flags. Το provide flags use # at the end following the Regex flags. Eg: string#igm
Read more about Regular Expressions.
Is not empty Returns true if field is not empty.
Does not equal Returns true if field does not equal to x. Case is ignored.
Has not selected Returns true if field has not selected the x option. Appears on option-based fields such as Dropdown, Checkboxes and Radio Buttons.
Does not contain Returns true if field does not contain x. Appears on text based fields only. The case is ignored.
Does not start with Returns true if field does not start with x. The case is ignored.
Does not end with Returns true if field does not end with x. The case is ignored.
Does not match Regex Returns true if field does not match the regular expression.
Less than Returns true if field is less than x.
Less than or equal to Returns true if field is less than or equal to x.
Greater than Returns true if field is greater than x.
Greater than or equal to Returns true if field is greater than or equal to x.
Is checked Returns true if field is checked. Appears on single checkbox fields such as the Terms of Service field.
Is not checked Returns true if field is not checked. Appears on single checkbox fields such as the Terms of Service field.
Total checked equals Returns true if the total checked items equals to x. Appears on Checkboxes only.
Total checked less than Returns true if the total checked items are less than x. Appears on Checkboxes only.
Total checked less than or equal to Returns true if the total checked items are less than or equal to x. Appears on Checkboxes only.
Total checked greater than Returns true if the total checked items are greater than x. Appears on Checkboxes only.
Total checked greater than or equal to Returns true if the total checked items are greater than or equal to x. Appears on Checkboxes only.
All text-based comparisons are not case sensitive. That means both goodmorning and goodMORNING values will be treated the same. If you need to match the exact letter case use the RegEx comparison with the i flag.

Source Value

The expected value of the Source Field that will make the rule to be valid. The display of this option varies depending on the type of the selected Source Field and the selected Comparison Operator. For example, if the selected Source Field is a type of Radio Buttons and the Operator is set to Equals, you should see a dropdown populated with the field's choices while with the Operator set to Starts With, the Source Value will be turned into a free text waiting for a custom value.

Read How Conditional Logic Rules are Processed to learn more technical details about how rules are evaluated and processed

2. Do (Actions)

This is where you configure what actions to execute when the condition is met like show or hide a field or even change the value of a field. An action consists of 2 options, the Field and the Action options.

Target Field

This represents the field of the form to execute the action on, if the condition is satisfied. Since configuring conditional logic for a field based on its own values is not supported, you’re not allowed to select a field that has been used in the Rules section.

Action

In this option you select from a predefined list of actions, how the selected field is going to be affected. The options available in the dropdown will vary depending on the type of the selected field. For instance, if the selected field is a type of Dropdown, you should see actions that run on options such as Show Option and Hide Option.

Value

This option is only available when the Action is set to Change Value and it represents the value we'd like the field to get when the action is executed.

Here’s a list of all supported actions.

Action Name Description
Show field Make a field visible.
Hide field

Make a field hidden. When a field is hidden by conditional logic the following happens to it under the hood.

  1. It is switched from a mandatory to an optional field. so the form doesn’t ask for a value during submission.
  2. It is ignored on form submission. This is one of the main reasons to use conditional logic and can’t be changed. This means a hidden field won’t be available for any process done after form submission (e.g. PHP Scripts) as it is not saved into the database.
Change value Change the value of the field. This option is available for text-based fields only.
Select option Select a field option. This option is available for Dropdown, Checkboxes and Radio Button field types.
Deselect option Deselect a field option. This option is available for Checkboxes and Radio Button field types.
Show option Make an option visible. Available with Dropdown, Checkboxes and Radio Button field types.
Hide option Make an option hidden. Available with Dropdown, Checkboxes and Radio Button field types.
Do you have questions about this process? Are you missing an Action that will make your life easier? Let me know.

3. If the condition is not met

Lastly, you can optionally define what to do when the rules defined in the When section are not met. This is rather useful for 2 reasons. First, it ensures your conditional fields have a default state when the form appears initially on the page load. Secondly, it saves you time as you don’t need to create a separate condition for the actions that need to run when the condition is not met.

How Conditional Logic Rules are Processed

Rules are organized into sets of rules, called groups. Rules inside a group are evaluated using the AND operator while Rule Groups are evaluated using the OR operator. That means, a condition is met when all rules inside at least one group are valid.

When a group is found to be valid, the processing or rules stops to prevent unessesary workload on the browser as the condition is already met.

Both rules and rule groups are processed from top to bottom as configured in the backend.

Basic Conditional Logic

The most common use of conditional logic is to show or hide fields depending on a user’s selection. Let's see an example.

Suppose you have a dropdown called “Business Type” which has 3 options: Retail, Food Service, Other. You also have a textfield called “Other Business Type” which you would like to show only when the “Other” option is selected in the Business Type dropdown.

Here's how our conditional logic rule formula would be in plain English:

WHEN BUSINESS TYPE EQUALS TO OTHER SHOW OTHER BUSINESS TYPE

Let's see how we can implement that formula using Convert Forms Conditional Fields.

Start by opening the form builder. Go to Behavior -> Conditional Fields, and click Setup Conditions. On the window that opens, click Add Condition to add your first condition.

For this scenario we will need a condition with a single rule. In the When section, in the first dropdown, select Business Type to be our Source Field, next set the Operator to Equals and in the 3rd dropdown select Other.

Next, we need to define the action to execute when the rule is met. In our case, we want the field Other Business Type to appear. To do so, in the “Do” section, in the first dropdown select Other Business Type and set the Action option to Show Field.

Lastly, we want the same field to disappear when the user doesn’t select the Other option in the Business Type field. In the "If the condition is not met" section, click on the button with the plus icon to add an action, select the Other Business Type field from the 1st dropdown and set the Action to Hide Field.

Click Save and you're done. You have now applied conditional logic to your form!

Complex Conditional Logic

You may find that a single conditional logic rule isn’t complex enough for some situations. However, it’s possible to add as many conditions as you’d like.

As an example, we’ll ask users to subscribe to our retail marketing newsletter. However, we only want to display the submit button if they’ve shared an email address and accepted our terms and conditions.

To set this up, we’ll need to add first an Email Address field and a Terms of Service field to our form.

Next, we’ll repeat the process from the previous section to enable conditional logic and add our rules. This time, we are going to use 2 rules which will state:

WHEN EMAIL ADDRESS IS NOT EMPTY AND TERMS OF SERVICE IS CHECKED SHOW SUBMIT

Go to Behavior -> Conditional Logic, open the conditional logic builder and click Add Condition to a new condition.

The first rule concerns the Email field which is required to not be empty. Select Email Address in the fields dropdown, and set the Comparison Operator to Is not empty. Next, click on the first button with the plus icon to add a second rule. From the fields dropdown select Terms of Service and set the Operator to Is checked.

Our rules should look like in the screenshot below:

When adding multiple conditions, be careful that they don’t conflict with one another. It’s always a good idea to test out your form before adding to a live page or module.

Next, we'll need to set the actions for our condition which in our case is to show the submit button when our condition is met and hide it when the condition is not met. Therefore, our actions should look like in the screenshot below:

Click save and you’re done. You have now applied a more complex conditional logic to your form.

Behavior of Conditional Logic

Keep the following behavior in mind as you work with conditional logic in your forms:

  • Target fields will be only included in the submission data if they are displayed when the form is submitted.
  • Required target fields are only required if they are displayed when the form is submitted.
  • Editing the Values of list-based fields such as Dropdown, Radio Buttons and Checkboxes used in your conditional logic may affect existing rules.
  • If you remove a field from the form, associated conditional logic may also be removed.
  • When more than one logic rule affects a target field, the field will be shown when any of the rules are satisfied.

Tips for using Conditional Logic

Use these tips to create more versatile rules with conditional logic:

Choose an appropriate operator

If you want to display a target field in more cases than not, listing all of those cases can be inefficient. Instead, accomplish the same result with a shorter condition that using inverse operators such as Does not equal. For instance, if you want to display Submit button in all cases except when value "A" is selected in a dropdown field, you can use the following rule:

Nested Logic

A target field can also be a source field, and this allows you to create nested logic. For example, the answer to Question 1 can cause the form to display Question 2, and the answer to Question 2 can cause the form to display Question 3. If the answer to Question 1 changes such that Question 2 is not displayed, then Question 3 will not be displayed either.

Frequently Asked Questions

Can I integrate conditional logic with Email Notifications?

Not yet. Conditional Logic for Email Notifications is on the plans for a future release.

Can I sync submissions with 3rd party apps like MailChimp, or GetResponse conditionally?

Not yet. Conditional Logic for Addons is on the plans for a future release.

How do I display a different success message based on a field value?

To do so, you will need to use PHP in the PHP Scripts -> After Form Submission area. To learn how to make that happen, visit the respective section in the PHP Scripts doc page.

Can I create calculations based on field values?

To create calculations based on field values you don’t need conditional logic. You just need to enable the Calculations option found in the field settings. To learn more details, visit the Calculations guide. Additionally, after you’ve set up your calculations, you can setup conditional logic based on the calculated values.

Can I create a rule based on the length of a field value?

Not yet. This feature is on the to-do list and when this is implemented, you’ll be able to show or hide a field based on the length of a field’s value. For example, if “FIELD A” is shorter than 7 characters, show “FIELD B”.

Can I create conditional logic with dates?

Not yet. This is on the todo list as well.

Is there any limitation on the number of conditions a form can have?

No, there’s no limit on the number of conditions or rules you can have on a form. However, it is recommended to keep it to the minimum for browser performance reasons.

Does conditional logic impact performance?

Conditional logic evaluation is done at the client-side (the browser) using Javascript, and sometimes browsers are not super fast doing these tasks. The browser has to process all fields associated with the rules to evaluate conditional logic and know which fields to display or hide, along with any other JS scripts that you may have on the page. Also, some conditional logic use cases can add extra work to the browser, e.g. If you’re using conditional logic to show/hide a field and also using this same field as a value in another field conditional logic.

In most cases, you won’t notice any performance impact, but if you have a huge form with lots of fields you may experience slowness in the form displaying or usage, this is something expected due to the explanation above. The only workaround for improving the conditional logic performance, in this case, would be to reduce the number of fields or split your form into many smaller forms.

In the following tutorial you can see how to pass data from one form to another if you need it: How to Auto-Populate Form Fields Using Query String.