Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Tommy-b/ddd5f0406b5afcdad2712721e5960f32 to your computer and use it in GitHub Desktop.
Save Tommy-b/ddd5f0406b5afcdad2712721e5960f32 to your computer and use it in GitHub Desktop.
This allows your gravity forms to load via ajax to ensure they work correctly with page transitions that have no window/document.onload
<?php
// ***IMPORTANT*** PLACE THIS PART IN YOUR ENQUEUE SCRIPTS FUNCTION AFTER YOUR SCRIPTS.JS ENQUEUE
wp_localize_script( 'change-me-to-your-script-file-handle', 'ajax', array(
'url' => admin_url( 'admin-ajax.php' )
));
// You can now use ajax.url as the URL in your ajax calls
// PLACE THIS ANYWHERE IN YOUR FUNCTIONS.PHP FILE
// Add the action and nopriv action to account for users not logged in
add_action( 'wp_ajax_nopriv_load_gravity_form', 'load_gravity_form' );
add_action( 'wp_ajax_load_gravity_form', 'load_gravity_form' );
function load_gravity_form() {
// These return the following:
// The form ID
$gfId = intval($_GET['formid']);
// Rather or not to add the form title - converted to a boolean
$gfTitle = filter_var($_GET['formtitle'], FILTER_VALIDATE_BOOLEAN);
// Rather or not to add the form description - converted to a boolean
$gfDesc = filter_var($_GET['formdescr'], FILTER_VALIDATE_BOOLEAN);
// Rather or not to the form should be submitted via ajax - converted to a boolean
$gfAjax = filter_var($_GET['formajax'], FILTER_VALIDATE_BOOLEAN);
// This is the shortcode to embed the form
gravity_form($gfId, $gfTitle, $gfDesc, false, '', $gfAjax, 1);
die();
}
?>
This allows your gravity forms to load via ajax to ensure they work correctly with page transitions that have no window/document.onload
<?php
// This function will enqueue the necessary styles and scripts for the
// specified Gravity Form. This is useful when manually embedding a form
// outside the WordPress loop using the function call.
//
// This is placed in a foreach loop to account for all forms including
// future forms you may not have an ID for yet. If you only have a couple
// forms and know the Ids won't change you can just add them as such:
// gravity_form_enqueue_scripts( 1, true );
//
// Place this right before wp_head();
$forms = GFAPI::get_forms();
foreach ($forms as $form) {
gravity_form_enqueue_scripts( $form['id'], true );
}
?>
<div class= "form-wrap">
<!-- I am using Gravity forms ACF field to allow user to select which form they wish to display.
You can download and find more at https://github.com/DannyvanHolten/acf-gravityforms-add-on -->
<?php $acf_field_form_id = get_sub_field( 'field_name_for_form' ); ?>
<!-- Set the form ID to match user selection, set whether the form should show
title and/or descrition, and rather it should be submitted via ajax or not -->
<div class="gfid" data-id="<?php echo $acf_field_form_id; ?>" data-title="true" data-descr="true" data-ajax="true"></div>
</div>
// Grab all items from your page template file
var yourForm = $('.form-wrap'),
gfItem = yourForm.find('.gfid'),
gfNum = gfItem.attr('data-id'),
gfId = parseInt(gfNum),
gfTitle = gfItem.attr('data-title'),
gfDesc = gfItem.attr('data-descr'),
gfAjax = gfItem.attr('data-ajax');
if (yourForm.length) {
$.ajax({
type: "GET",
// Make sure this matches what you set in your wp_enqueue_script
url: ajax.url,
data: {
// The name of the function declared in functions.php
action: 'load_gravity_form',
// The data pulled from page-template.php
formid: gfId,
formtitle: gfTitle,
formdescr: gfDesc,
formajax: gfAjax,
}
}).done(function (data) {
yourForm.html(data);
});
}
@will-yellowpeach
Copy link

Also struggling to get to this play ball with Gravity Forms 2.5. Anybody managed it yet?

@kieferslaton
Copy link

Bumping this, same issue as the above two. Any insight?

@square52
Copy link

This is a super late reply, but in case anyone stumbles upon this gist, as I did, here are some notes from when I was working to implement this. I was able to get it to work with barba.js and Gravity Forms 2.6.1 by making a slight modification to what I think is a typo in the code.

The variable name on line 3 of the scripts.js file should match. E.g, it should be
contactForm = $('.form-wrap'), gfItem = contactForm.find('.gfid'),

As far as getting it to work with barba.js, I just wrapped the code in the scripts.js file in a function (gformsAjax) and called that:
barba.hooks.after(() => { gFormsAjax(); });

And one last thing to answer @spenncerr's question above. The script handle of wp_localize_script needs to match the script handle of the scripts.js file:
wp_enqueue_script('gravityscripts', (get_stylesheet_directory_uri() . "/assets/js/scripts.js"), array(), '1', true); wp_localize_script( 'gravityscripts', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ));

@Tommy-b
Copy link
Author

Tommy-b commented Apr 25, 2022

@square52 Thanks for chiming in on this! I have been too busy to add support here but I did update the Gist fixing the typo you caught.

@Tommy-b
Copy link
Author

Tommy-b commented Apr 26, 2022

It looks like with the fix of the typo square52 called out, this is working correctly with gravity forms 2.6+. One thing to mention though is if you have added any additional functions in your theme to load gravity forms scripts in the footer it will break this. More about this here

@dougkeeling
Copy link

dougkeeling commented Aug 31, 2022

Just circling back to say that I am still thankful for these snippets! I had to revisit them for a new project and this solution still works great.

@atoupet-toki
Copy link

Wow, thanks for all these snippets! Did you manage to make it work with a recaptcha in the form?

@Striffly
Copy link

Striffly commented Apr 23, 2024

@atoupet-toki with the updated version of the Gravity Forms reCAPTCHA Add-On, reCAPTCHA scripts are now automatically enqueued.

BTW, if you're interested, I've created an "updated" version of this script with functional conditional logic : https://gist.github.com/Striffly/fa79b85901dd6c98a8075a35d7dc45ee

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment