Creating conditional logic forms in WordPress is one of the most important features our users look for. Using this option not just makes your form to look neat and clean but also gives your users an intuitive experience.
To this end, you will need to apply the old-school ‘IFTT' programming condition that is “(if this, then that)” approach. Fear not, friend! You don't have to be a programmer for this!
In this tutorial, we will show you how to quickly create conditional logic in WordPress forms without the need for any coding know-how. Now, let's dive in.
Why Should You Use Conditional Logic in Your WordPress Forms?
- To give your forms more sophisticated and precise look.
- To save your precious time and effort.
- To hide or show a particular area or field of your form in an interactive way.
- To take data more efficiently from your website visitors.
- And many more.
Here Is How to Create Conditional Logics in WordPress Form Builder?
Creating conditional logic forms in WordPress forms is much easier than you might think. Follow these steps carefully:
Step 1: Install weForms and weForms Pro
Assume that you have your WordPress website up and running. Now. go to Plugins > Add New. Search for the keyword ‘weFoms‘. Now, install and activate it like all other plugins.
However, the plugin does not bring conditional logic feature in the free version and so you need to avail the pro version in the form of a ZIP file from here.
To install the pro version, you need to go to to the Plugins > Add New > Upload the Zip file and you are done.
Step 2: Go to the weForms Form Builder
Now, go to the weForms > All Forms > Add New.
Now, a pop will appear on your screen where you will be able to select form-templates to ease the process of creating a form from scratch. Now, click on the “Create Form” button.
Next, you will be taken to the form builder. From here, select fields like name, email address and radio field.
After that, go to Field Options and change the field label to whatever text you want. Here in this example, we are collecting customer opinions on different marketplace solutions and so we used “What type of marketplace you want to open?” in the Field Label options. Then, add two more items in the field – “Single Seller” and “Multi-seller” options in the dropdown field:
Next, you will be adding two checkbox fields. Now, change the field labels to “Select your preferred single seller solution” and change the other field label to “Select your preferred multivendor solution“.
Give some options to both of the checkbox fields – for example- WooCommerce, CS-Cart, Wix, BigCommerce, etc.
Step 3: Set up Conditional Logic
Now, go to the Advanced Fields and select ‘Yes‘ from the conditional logic option and use the ‘select‘ dropdown option. From there set condition like show this field if the user selects “Single Seller” in the “What type of marketplace you want to open“.
Follow the same process for the other checkbox field.
When you finish adding conditional logic, save the changes.
Step 4: Publish the Form Using the Native weForms Gutenberg Block
As always we wanted to give you an edge over others with creating a native Gutenberg Block for weForms we have come up with it with the release of weForms version 1.2.7
Navigate back to the WP Admin Dashboard > Pages > Add New. Select the (+) sign to add a new block. After that, you have to select the weForms block.
Now, select the “Blank Form” that we have created just now.
Interestingly, when you select the form, the Gutenberg editor will show you a preview of the form. Finally, hit the ‘Publish‘ button to publish the form.
Previewing the Form From the Frontend
Now, it's time to get a view of the form from the frontend. It will allow you to get the exact view of your form just like the way your users will be able to see from the frontend.
To do so, click on the ‘View Page' option and you will get the frontend view:
Now, let's fill out the name field, email address field.
Next up, choose the “Single Seller” option. If you select the radio field “Single Seller” option, you will get the conditional field that is “Select your preferred single seller solution” field on the frontend.
Now, choose the solutions that you like from the checkboxes. After that, hit the “Submit Query” button to submit the form data you entered just now.
For the other option “Multi Seller“, use the same technique:
That's how your users can use the conditional logic from the frontend.
Some Real-life Use Cases of weForms
Here are some effective use-cases you can consider:
- Customer Specific Contact Page
- Hiding Certain Sections
- Interactive Quiz forms
- Opt-in Service forms
- Payment forms
To know more about these use cases you can go through this article.
Now It's Your Turn!
We have added the conditional logic as per users' feature request. And we hope this will help you stay ahead of the curve when building smart condition based forms.
In addition, publishing the form with the help of a native Gutenberg block has been a cherry on top. If you are yet to give a shot to these features of weForms, you can try anytime and it's never too late for good things. 🙂