Introduction
If you’re using Barba.js or a similar library to load content dynamically, you might notice your forms stop working after a new page loads. This happens because Gravity Forms only loads its scripts and styles as needed on each page, and libraries like Barba.js don’t always run those scripts again when new content is added. This article guides you through loading forms with hidden UIs and dynamically loaded content.
Examples
Load a Form in a Hidden UI using Barba.js
/**
* This action loads a specific form in all frontend pages without displaying it, so the scripts and styles are loaded.
*/
add_action( 'init', function(){
if ( is_admin() ) {
return;
}
if ( ! class_exists( 'GFFormDisplay' ) ) {
require_once( GFCommon::get_base_path() . '/form_display.php' );
}
// Gets the form for rendering, but don't display it
GFForms::get_form( 100 );
}, 100 );
/**
* This action tells Barba.js to execute all script tags in the next page.
* Allowing GravityForms scripts to be executed.
*/
add_action( 'wp_footer', function(){
?>
<script>
barba.hooks.beforeEnter(({ next }) => {
const js = next.container.querySelectorAll("script");
js.forEach(script => {
window.eval(script.innerHTML);
});
});
</script>
<?php
} );
Note: If you’re working with other types of hidden UIs, you may need to modify this snippet further.
Placement
This code can be used in the functions.php file of the active theme, a custom functions plugin, a custom add-on, or with a code snippets plugin.
See also the PHP section in this article: Where Do I Put This Code?