Create WordPress Forms With Conditional Logic

Conditional forms let you show or hide specific fields in a form based on what a user selects or types. 

Instead of displaying all the fields at once, the form adjusts and only shows what’s relevant. This makes it easier for users to fill out forms because they only see the fields that matter to them. 

Conditional forms offer several key benefits:

• Less overwhelming: Users aren’t faced with long forms with fields that don’t apply to them.
• Improves user experience: By showing only relevant fields, users can complete the form faster without confusion 
• Collects better data: When users only see relevant questions, they get more accurate information.

For example, if a user signs up for a service and selects “Business Account,” the form can show fields asking for business details. But if they choose “Personal Account,” business fields stay hidden.

In this article, you’ll learn how to make complex WordPress conditional forms easily using SureForm’s simple interface. Let’s begin.

Understanding Conditional Logic Concepts

Before creating a conditional form, here are some fundamental concepts you should get familiar with:

Show or Hide Fields

When setting up conditional forms, the first step is deciding which fields to Show or Hide based on what the user selects or types. 

Here’s what each of them means:

1. Show: A field appears only if the user’s answer meets a specific condition.

For example, If a user selects Yes for “Do you want to receive updates?”, an email input field appears for them to enter their address.

2. Hide: A field stays hidden unless the user’s response matches the condition you’ve set.

For example, if a user selects “No” for “Is this a business order?”, fields asking for company details remain hidden.

And vs Or Conditions

And & Or rules help you decide how multiple conditions work together to show or hide a field. 

Here’s how they work:

1. And Logic

With the And logic, all conditions must be true for a field to show up. Basically, every rule you set needs to be met before the field appears.

For example, let’s say you want to show the Phone Number field only if the user selects Credit Card and India in their respective fields.

This means the Phone Number field will appear only if the user chooses a Credit Card as the payment method AND selects India as the country in the dropdown. 

If any of these conditions isn’t met, the field stays hidden.

2. Or Logic

With Or logic, the field appears if just one of the conditions is true.

For example, you can show the “Phone Number” field if the user selects either:

1. Credit Card as a payment method
2. India as their country

This means the “Phone Number” field will appear if the user picks either a Credit Card for payments OR India as their country. 

If the user doesn’t select either, the “Phone Number” field will stay hidden.

3. Using And & Or Logic Together

When you combine And & Or logic, you can create more specific rules that control when a field shows up. Both sets of conditions need to be met, but they can be mixed to match different situations.

For example, we want to show the “100% Off Coupon Applied” text when:

1. The user enters a specific coupon code OR
2. The user selects both Credit Card for their payment method AND India as their country

This means the “100% Off Coupon Applied” text field will show if the user enters a specific coupon OR selects both India AND Credit Card in the respective fields. 

Conditional Logic Operators

These conditions are used to compare the value a user selects or types and decide if a field should be displayed based on that comparison:

Here’s what each of them mean:

• is: This condition checks if a user’s response is exactly the value you specify.
• is not: This checks if the user’s response is different from a specified value.
• is empty: This condition checks if the user hasn’t entered anything in a field.
• is not empty: This checks if the user has entered something in a field.
• contains: This condition checks if the user’s response includes a specific part or text.
• does not contain: This checks if the user’s response does not include a specific part.
• starts with: This condition checks if the user’s response begins with a specific value.
• ends with: This checks if the user’s response ends with a specific value.
• is greater than: This condition checks if the user’s number is greater than a specific value.
• is less than: This checks if the user’s number is smaller than a specific value.

Now, we’ll explain all of these concepts by creating a functional conditional form. Let’s begin:

Creating A WordPress Form With Conditional Logic

You need to follow these steps to create conditional forms in SureForms:

• Create a form or select your preferred form under SureForms > Forms.

• Select any field then go to Advanced > Conditional Logic and activate “Enable Conditional Logic”.

• Decide whether you want to show or hide this field before configuring its conditions.

Click on the “Configure Conditions” button.

Setting Up A Basic Rule

In this example, we want to show payment details for the selected payment method. For example, if the user chooses “Credit Card”, we want to show fields such as – Cardholder name, Credit card number, and CVV. 

We’ll start with the “Cardholder Name” field. The form will show this field only when the user selects Credit Card as their payment method. 

To do this, you need to:

Hence, the form will show the “Cardholder Name” field only when “Credit Card” is selected under the “Select Payment Method” dropdown.

Click the “Set Rules” button to apply these changes.

We’ll repeat the same steps for the “Credit Card Number” and “CVV” so that they also show up after selecting Credit Card.

Now, we need to show the PayPal email field when the user selects PayPal as their payment method. To do this, select the “Your Paypal Email” field, and set these rules:

After clicking “Set Rules” and saving your form, here’s what it’ll look like on the front end:

Using the And Logic

Here, we’ll show the “Address” field only when the user selects India as their country and Credit Card as their payment method. The address field won’t appear if either conditions aren’t met. 

Here, we’ll use the And logic:

• Select the “Address” field, choose “Show”, and click “Configure Conditions”.

• We’ll add these two rules for our example. You can specify the second rule by clicking the first “And” button.

Click the “Set Rules” button and save the form in the editor. Here’s what the form will look like:

Note: To delete an And condition, simply click the “Trash” icon next to it.

Using the Or Logic

Now, we want to show a new field called “Billing Address” if the user selects either Credit Card as their payment method or India as their country. Here’s how we can do it by using the OR logic:

• We’ll select the “Billing Address” field, choose “Show”, and click “Configure Conditions”.

• We’ll select the following rules. You need to click the “Or Group” button after adding the first rule.

Now, the “Billing Address” field will show up when the user selects either India as their Country or Credit Card as their payment method. Billing Address won’t appear at all if the user doesn’t select any of them.

Using Both the And & Or Logic

Now, we’ll show a use case showing both And and Or logic. For example, we need to show a “Shipping Insurance” field only if:

1. The user selects both “India” as their country and “Credit Card” as their payment method 

or

2. The user is an employee using the company’s insider email address ending with “@company-insider.com”.

To do this:

• We’ll select the “Shipping Insurance Details” field, choose “Show”, and click “Configure Conditions”.

• Here’s what the conditions will look like:

Now, if the user selects India and Credit Card from their respective dropdowns, he/she will get an option to opt for “Shipping Insurance Details”. 

If the user doesn’t select either of them but enters an email address containing the words “@company-insider.com”, he/she will be shown the “Shipping Insurance Details” field regardless of their payment method and country. For example:

Similarly, you can experiment with different combinations of And and Or as well as Show and Hide to create complex dynamic forms that encourage form completions.

We hope this article was helpful. If you need any help, feel free to reach out. Our support team is always here to help!