Gravity Forms Enhanced User Interface Not Working In Popup

Today we’re going to tackle an issue that, in all honesty, took me a bit of time to uncover in a recent project I was involved in. Gravity Forms uses the jQuery UI library to deliver an enhanced user interface for some of their fields. In most cases, this works right out of the box without any further adjustments but in the case of a form being loaded in a popup which doesn’t initiate until after the page load, it can cause issues.

In this particular case, the client wanted a multi-select enhanced user interface where the form was opened in a popup when the user clicked a button. While the research and searching took some time, the solution was very simple. I just needed to recall the jQuery Chosen library after the Gravity Form field became visible. To accomplish, I created a new javascript file in my theme called gform-contact.js. I then enqueued that file in my themes functions.php like so:

wp_enqueue_script( 'contact-validation', get_template_directory_uri() . '/assets/js/gform-contact.js', array( 'gform_gravityforms', 'gform_chosen' ), '1.85', true );

Notice that I set the dependencies of gravity forms and gravity forms chosen script to avoid errors.

Within this gform-contact.js file, I added the following:

jQuery(document).ready(function(jQuery) {
	jQuery("#input_36_30").chosen({no_results_text: "No results found"});
});

You can copy and paste the above and simply change out the target input ID to the field that uses the enhanced interface. In my case, it was in form 36 and field 30.

Save the file and you’re good to go. The chosen library will be called when the input ID becomes visible, thus re-initiating the enhanced interface on that field.