Hiding and Showing Form Fields Based on User Choice in Elementor

Once upon a time, Elementor made the ability to hide and display form fields based on user selection in its excellent native form builder standard. As of early 2022, that’s now an extra feature. Fortunately, there is an incredibly easy way to hide and reveal form fields yourself with a little JQuery. For this example, I’ll use Select options to reveal the correct fields. Let’s get started!

Before we get going it’s a good idea to plan out what we want to do. In this scenario, I’m going to create a form with the basic fields Name and Email, but for *reasons* I want them to choose between submitting a Message or a Phone Number.

I’ve set up the form with the first three fields. I’ve also gone into the Advanced tab of the ‘Which field’ selector and added ‘selection’ to the field id. For the options, I’ve added None, Message and Phone. The none is so that by default, nothing shows when the user enters the page.

Now I’ll set up the other fields and add custom ids there as well. So at this point, all of the fields are showing.

I’m also going to add an HTML block beneath the form to hold the JQuery script.

Now that the setup is done, it’s just a matter of popping in the script. I have an example below, but you’re probably not going to want to hide and show phone and message fields.

Elementor will give the field the id that you assigned earlier, but you don’t want to hide just the field, you’ll also need to hide the label and any of the other info that goes along with it. The resulting class is ‘.elementor-field-group-message’, you can replace message with whatever id you assigned, or just take a look at the inspector to get the correct name.

The gist is to initially hide the unneeded fields, then reveal them based on user selection, which is the select value. If they keep None as their selection, then no extra fields will show. 

				
					<script>
jQuery(".elementor-field-group-message").hide();
jQuery(".elementor-field-group-phone").hide();
jQuery("#form-field-selection").change(function() {
    if(jQuery(this).val() === 'Phone') {
        jQuery('.elementor-field-group-phone').show();
        jQuery('.elementor-field-group-message').hide();
    }
    else if (jQuery(this).val() === 'Message'){
         jQuery('.elementor-field-group-message').show();
        jQuery('.elementor-field-group-phone').hide();
    } else {
        jQuery('.elementor-field-group-phone').hide();
        jQuery('.elementor-field-group-message').hide();
    }
});
</script>
				
			

This is a cheap and easy way to create dynamic forms and is fairly flexible. Just make sure none of the hidden fields or the selector is required.

If you liked it, share it

Facebook
Twitter
LinkedIn

What do you think?