Tassos Marinos Developer of Joomla Extensions

Build Smart Joomla Forms with Conditional Fields

Published in Tutorials by Tassos Marinos on Monday, 27 July 2020
Updated 27 Jul, 2020

Build Smart Joomla Forms with Conditional Fields

People don't like filling out long, complex, and overwhelming forms. That’s the sad truth.

In the digital age, people are so unforgiving when it comes to forms. Why? Because they expect personalization. Who wants to answer questions that don’t apply to them or are irrelevant to their case? They’d rather spend their time and money with brands who connect with them on personal, human levels.

So, if you don’t want to sacrifice conversions, it’s smart to make your forms short and personalized to the user.

Fortunately, there’s a simple way to create advanced forms in Joomla that aren’t arduous or overly complex. With Convert Forms Pro, you can build interactive forms that let you collect the data you need without straining the user experience.

But, before we dive deeper into what’s conditional fields let’s see what’s conditional logic in general.

What is Conditional Logic?

Every day involves making thousands of decisions based on past information and current conditions. This is conditional logic.

"If I overeat pastry, I will gain weight."

My body shape and weight are thus the logical consequence of my pastry binging habit.

"If you go out in the rain, you will get a cold."

"If we humans could live on Mars, there would be more space on Earth."

You get the point – if you build a sentence that is based in the if-this-then-that paradigm, then this means you are using conditional logic. As such, the conditional logic definition could be as simple as “a branch of logic based on if…then sentences.”

You create a task or action that happens when certain conditions are true.

What is Conditional Fields?

Although it sounds advanced, the truth is, conditional fields is just a way to create smart and dynamic forms. As mentioned previously, it is a typical “if this, then that” process that enables you to create forms that change based on input.

For instance, when a user clicks something on your form, other fields on the form interact with that input and change accordingly. New fields may appear, dropdown options may disappear, the value of some other fields may change, and so on.

This way of interacting with your site visitors is user-friendly, allows you to control how your forms behave and guides visitors so information is sent to you in the most efficient, and effective, way.

That may seem technical, but it’s really quite easy. Let’s see a more specific scenario:

A software agency has an online estimate form for prospective customers. One field asks for the type of work. If the user selects “Website Design” from a drop-down list, a few extra questions appear (in the same form) that relate to web design, like “How many pages will your website be?” or “Who will supply the content of the website?” or “Do you have a logo?”. If the user selects another type of work, a different group of questions appears.

While you could show all your fields to everyone who views the form, no one wants to read through questions about web design if they’re looking for a mobile application. Right?

Employing conditional logic renders significantly more simple and comprehensible forms, which reduces abandonment rate while increases conversions. This is especially important for mobile users who are even less forgiving with long, cumbersome forms.

Apply Conditional Logic to Joomla Forms

It would probably be futile to say that I have a form builder with conditional logic, but here it is: I do have it, and using it is easy-peasy.

With Convert Forms Pro you can display or hide fields dynamically depending on the user’s input. Add as many OR/AND conditions as you need to make your forms work just right.

The setup of conditional fields takes place inside the form builder in a central place that can be found under the Behavior tab in the settings panel. There you need to enable the Conditional Fields option first and then click “Setup Conditions” to open up the simple yet powerful condition logic builder environment.

To set up a condition you begin with the field that will determine which other fields are going to be affected when its value changes. This is considered the Source Field for your rule and can be any field type that accepts user input like:

  • Textbox
  • Textarea
  • Dropdown
  • Radio Buttons
  • Checkboxes
  • Number
  • Email Address
  • Phone
  • Website / URL
  • Date / Time
  • Password
  • Terms of Service
  • Confirm

Read more details about the Source Field.

In the rule’s settings, we need to define the logical comparison operator that will be used to compare the value of the Source Field. The operators you can use (varies based on field type) are:

  • Is empty
  • Is not empty
  • Equals
  • Does not equal
  • Has selected
  • Does not have selected
  • Contains
  • Does not contain
  • Starts with
  • Does not start with
  • Ends with
  • Does not end with
  • Matches RegEx
  • Does not match RegEx

Read more details about the comparison operators.

Next, we need to set the actions we’d like to take when the condition is satisfied. An action consists of the Target Field which can be any field of the form and the Action (varies based on field type) we’d like to execute. The available actions are:

  • Show field
  • Hide field
  • Change value
  • Select option
  • Deselect option
  • Show option
  • Hide option

Read more details about how Actions work.

Lastly, you can optionally define what to do when the condition is not met in the respective section. 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.

Conclusion

Conditional logic is something that the pros in web form design are already using.

That's why they have such a slick, streamlined experience when you arrive on their website and fill in their forms.

Are you ready to simplify your Joomla forms and boost conversions? Get started with Convert Forms Pro today to get access to incredibly handy conditional logic.

Join over 46.9K

Subscribers to get free Joomla tips, extension updates, and deals!