Gravity Forms Enhanced User Interface Not Working In Popup


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a few high profile websites, Arrivala, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







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.


Comments:

  1. Chandrakant says:

    Hi,

    I have been facing the same problem. On the single page, I am using different Gravity Forms through different tabs. The “enhanced user interface” only works on the Tab One as it is the default tab which displays the content on page load.

    When I switch to Tab Two, the “enhanced user interface” does not work anymore.

    I have tried using the customization as explained by you, for the Form ID 2 and Field ID 2 (using #input_2_2 in JS file) but still no success.

    Please advice.

Share Your Thoughts

Leave a Reply

Your email address will not be published.


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!