If you ever wanted to create conditional form fields with code using Elementor Pro, this tutorial will guide you on how to do that. We will be using an example where users will be asked if they would like to enter their address details. It will look like this once we’re done:
Building Your Form
The first step is to make sure you have your form fields created. In this example, our conditional form field is going to be seeing if users want to enter their address. Within our form, let’s create a radio field with the label, “Enter your address to further assist us?“. Make it required. It should have two options, “No” and “Yes“.
Next, in the “Advanced” tab, set the default value to “No“. The ID should be set to, “useraddress“.
Creating Your Conditional Option Fields
After we have created our main conditional form field, we want to create the fields that will show up based on whether the user selects No or Yes. In this example, we will be adding, Address, City, State, and Zip / Postal Code.
Under the “Advanced Tab”, have the ID be, addressInfo. For the other fields, we’ll be using the following for their IDs:
- City – addressInfoCity
- State – addressInfoState
- Zip / Postal Code – addressInfoZip
Adding the Code
You will want to create an HTML widget within Elementor Pro. Copy and paste the following into the HTML widget:
Now, on the front end of your site, if you go to your form, by default the address fields should be hidden by default. Once you select, “Yes”, they will show.
You can replace portions of the code to fit your conditional fields. Just be sure to match everything with what you have given the ID for each form field. Elementor will add pre-text to the form field class called, .elementor-field-group-.