When people are filling out your forms, not every element needs to show. Sometimes an element needs to only pop up when some other property is selected. Or maybe you want an element to disappear when a certain property is selected. In either case, you can create what are known as "conditional" fields: Elements that only display if certain conditions are met.

To do so, you'll need to create what is called a display rule. And that's where that Show Element property you see on every element comes in!

The default setting for each Show Element property is "Always". This means that the program knows to always display the element, of course. In other words, every time the form is loaded, no matter which options are chosen, the currently selected element will always be visible.

Now, let's say you only want a certain element to appear when another object is selected. To do this, you just need to define a display rule.

From the drop-down that says "Always", choose "Using Display Rule".

Now you need to build your rule. The basic format of a display rule goes like this:

Display this element if (Form Element) (is / is not) (Value).

The "If" of this rule is automatically included. You just need to choose an element, an operator (is, is not), and a value of the chosen element, and click Insert.

We'll use the example of countries and their territories. Our order form has a drop-down that allows you to choose which country you are from (United States or Canada). We are including two conditional elements:

  • State: Lists all the states of the United States
  • Province: Lists all the provinces of Canada

We only want the "State" element to show if "United States" is selected from the "Country" element. Likewise, we only want the "Province" element to show if "Canada" is selected from the "Country" element. Let's start by building a display rule for the "State" element.

The display rule built above basically says:

Show the "State" element if "country" is "United States".

To finalize your rule and implement it into your form's functionality, click Insert. The rule is added to the box below.

We'll talk more about the syntax of what was added to that box in the Rule Syntax section.

Now we just need to create a similar rule for our "Province" element that tells Form Builder to display it only if "country" is "Canada". Let's take an overall look at our form and see how it appears in Web Form Builder:

Did you notice that both "State" and "Province" are shown? Don't panic! To make it easy to work with your forms and preserve the awesome WYSIWYG workflow, Form Builder shows all elements—even the ones that have conditional display rules—while you're working on it. When you publish, the display rules will be in effect, and only the ones with certain conditions met will be shown. In our example, since "United States" is the default selection, "State" is displayed when the form is loaded. However, when you switch to "Canada", "State" disappears and "Province" is displayed instead.

You can try it for yourself below. (Make sure you notice that the options in the drop-downs change, too! How neat!)

Multiple Display Rules for One Element

You can add multiple conditions to require a single element to display. To the right of the Insert button is another drop-down with the options "AND" and "OR". To define a second rule for an element, choose one of these options from this drop-down. In this example, we chose "AND".

Now just build another rule like before. This example chooses the options "address_confirm", "is", and "I Have an Address".

Last step: Click Insert just like before!

The rule is added to the full display rule in the box below. You can add as many conditions as you want. Just remember to really think about the logic behind your rules!

Rule Syntax

You also have the option of typing your rules by hand in the box, or adjusting as necessary. For example, if you want to easily change [checkbox4] to [checkbox7], you don't need to rebuild the entire rule; you can just change the "4" to "7". Beware that altering the contents of this box can mess up your rule if you don't know what you're doing! Here's a breakdown of the syntax used for different elements of display rules:

  • Form Fields: Surrounded by a single set of square brackets.
    • Example: [country]
  • Operators: Always appear as either is or is_not, depending on the operator being used.
  • Values: Surrounded by double quotes.
    • Example: "United States"
  • Multiple rule operators: Always appear as either and or or, depending on the operator being used.
  • Every rule: Always entirely surrounded by parentheses.
    • Example: ( [country] is "United States" )
  • Multiple rules: Each rule is surrounded by its own parentheses, and the linking operator must remain outside of them.
    • Example: ( ( [country] is "United States" ) and ( [address_confirm] is "I Have an Address" ) )

Remember that Web Form Builder will alert you if you violate the basics of this syntax or include a field or value that doesn't exist. Just remember to select the correct ones.

Enjoy your brand new conditional form elements!