-
-
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); | |
| }); | |
| } |
Hey @Tommy-b I'm struggling to get this to work with Swup.
The first step of adding the ajax.url - is this relevant to load forms when switching pages in Swup?
Any help would be greatly appreciated
cheers.
@spenncerr Happy to help any way I can. Adding the ajax.url is relevant for Swup as well. Go to your functions file (or wherever you enqueue you main JS file for the site) and add that snippet and be sure to change out change-me-to-your-script-file-handle to whatever your file handle is. Hopefully this helps but if not maybe you can give me some more info on the problem you are having and we can track down whats happening.
@spenncerr Happy to help any way I can. Adding the ajax.url is relevant for Swup as well. Go to your functions file (or wherever you enqueue you main JS file for the site) and add that snippet and be sure to change out
change-me-to-your-script-file-handleto whatever your file handle is. Hopefully this helps but if not maybe you can give me some more info on the problem you are having and we can track down whats happening.
Hey @Tommy-b thanks for reaching out. So I'm currently experience the exact issue above, Gravity Forms not initializing when transitioning from the homepage to the contact page with Swup.
When you say "change-me-to-your-script-file-handle to whatever your file handle is", I'm not 100% sure I understand what this relates to. Which file should this be?
Thanks a bunch.
Have you managed to make this work with gravity forms 2.5? I gave it a go but nothing happened when I clicked submit.
The validation submitted correctly as a network request but it never outputted the errors to the form.
Same with a successful submission – it doesn't return the form correctly and gives you a white screen.
Also struggling to get to this play ball with Gravity Forms 2.5. Anybody managed it yet?
Bumping this, same issue as the above two. Any insight?
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
Thank you for this! This is will be a great help in some of my upcoming projects!