Wordpress + Ajax page loading + Gravity forms + Gravity forms page break Wordpress + Ajax page loading + Gravity forms + Gravity forms page break wordpress wordpress

Wordpress + Ajax page loading + Gravity forms + Gravity forms page break


After digging a bit into gravity form plugin I was able to fix this.

So here is what I did.. hope it helps somebody in the future (not sure if the best solution but it works):

So the "main" idea is that barba or whatever you are using (in my case biggie) is making an ajax call for a new page and you will have something like a ready / newPageReady function, in here you make a new ajax call to get your form.

JS: (Given that gform uses jquery you can use it)

 ready(done) {   ajax.get(APP.AJAX_URL + '?action=get_form', {      success: (object) => {      //console.log(object.data)      jQuery('.main-content-wrapper').append(object.data)      jQuery('body #gform_wrapper_2').show()    }  })}addEvents() {  // this will check everytime a form is loaded    jQuery(document).bind('gform_page_loaded', this.gform)}gform(event, form_id, current_page) {   //Here the form is loaded but not showed.. you can do something like this    TweenMax.fromTo('.gform_wrapper', 1.2, {autoAlpha: 0}, {autoAlpha:1})}

Functions.php

 add_action( 'wp_ajax_nopriv_get_form', 'get_form' ); add_action( 'wp_ajax_get_form', 'get_form' ); function get_form() {     gravity_form( id_of_your_form,false, false, false, false, true );    die();}


Not sure if it's the right solution but I managed to do something like gform.init() by calling script tags under the form with an eval(). Theses scripts are inserted after each form by the plugin.

For example, after you change your page with ajax, do something like this :

// After changing page with ajax :var scripts = myNewForm.querySelectorAll('script'); // where "myNewForm" is the container including the new form added after an ajax call  for (var i = 0; i < scripts.length; i++) { // "For" loop in case there is more than one script added by the plugin    eval(scripts[i].innerHTML); // --> this will init the new form}

Be sure to call this only after an ajax call.