Elementor: Create Conditional Form Fields with Code

Smart Web Creative - Elementor: Create Conditional Form Fields with Code

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:

  1. City – addressInfoCity
  2. State – addressInfoState
  3. 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:

<script type="text/javascript">

jQuery(document).ready(function(){
// We're wrapping the code with 'elementor/popup/show' because we want this form in a popup
jQuery(document).on('elementor/popup/show', () => {

// Create the variable for all the elements
var radioSelectNo = document.getElementById("form-field-useraddress-0");
var radioSelectYes = document.getElementById("form-field-useraddress-1");
var addressField = document.querySelector('.elementor-field-group-addressInfo');
var cityField = document.querySelector(".elementor-field-group-addressInfoCity");
var stateField = document.querySelector(".elementor-field-group-addressInfoState");
var zipField = document.querySelector(".elementor-field-group-addressInfoZip");

// We want to set our address fields to not display by default
document.querySelector('.elementor-field-group-addressInfo').style.display = "none";
document.querySelector('.elementor-field-group-addressInfoCity').style.display = "none";
document.querySelector('.elementor-field-group-addressInfoState').style.display = "none";
document.querySelector('.elementor-field-group-addressInfoZip').style.display = "none";

// When a user selects "Yes", the style on the fields displays to "flex"
radioSelectYes.onchange = function () {

addressField.style.display = "flex";
cityField.style.display = "flex";
stateField.style.display = "flex";
zipField.style.display = "flex";
}

// When a user selects, "No", the style goes back to the default we set it at, "none"
radioSelectNo.onchange = function () {

addressField.style.display = "none";
cityField.style.display = "none";
stateField.style.display = "none";
zipField.style.display = "none";
}
});

});

</script>

Note that in the code above, all of the JavaScript is wrapped with “jQuery(document).on(‘elementor/popup/show’, () => { ACTUAL CODE HERE });”. You can leave this here if you want to have your form in an Elementor Popup. If not, you can remove it. Be sure to remove the bottom portion too of, });.

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-.

Other Helpful Articles

What is Webmail?

What is webmail? Webmail is usually a free cloud-based email service that is set up on your hosting. You can use webmail by having a professional-looking email address such as, “[email protected]” and it’s usually at no additional cost. You can also have a professional-looking email with an email client such

Read More »

Disable Product Pages in WooCommerce

Add the following code to your functions.php file to disable users from accessing product pages within WooCommerce: /* Remove Links to Access Product Pages */ remove_action( ‘woocommerce_before_shop_loop_item’, ‘woocommerce_template_loop_product_link_open’, 10 ); remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_product_link_close’, 5 ); /* Prevent Users from Accessing Product Pages by Displaying the 404 Page */ function prevent_access_to_product_page(){

Read More »

What Do You Need Done?:

(Please check all that apply)

Tell Us About You

Almost Done!

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info

Let's Get Some Info