-
-
Save Tommy-b/ddd5f0406b5afcdad2712721e5960f32 to your computer and use it in GitHub Desktop.
<?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); | |
}); | |
} |
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' ) ));
@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.
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
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.
Wow, thanks for all these snippets! Did you manage to make it work with a recaptcha in the form?
@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
Bumping this, same issue as the above two. Any insight?