Gravity Forms – Get Current Page Number

2 Views

I have a multi-page form.

I would like to execute some custom JavaScript on the last page of this form. Theoretically, all I have to do is retrieve the current page number and write a conditional.

Read More

Simple, right? Apparently not.

My original workaround was like this: 

if ($('gform_page').last().css('display') !== 'none') {
    // perform custom scripts now that the last
    // Gravity Form page is being shown
}

but $('...').css('display') returns undefined on every element I’ve tried this on within the form. Custom scripts were being fired every time the user hit the “Next” button. No cigar.

Then, after reviewing the Gravity Forms documentation, I found two useful-looking events: gform_post_render and gform_page_loaded.

However, the documentation gives no instruction on how to access the parameters. 

jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page){
    console.log(current_page);
    // returns nothing when loaded in the footer
    // returns [Object, object] when placed in an HTML field in the form
});

In addition to not having the correct code, I also suspect I don’t have the code in the correct place as I have also fruitlessly tried the following in functions.php and in header.php (as the documentation suggests): 

<?php
function enqueue_custom_script($form, $is_ajax){
    if ($is_ajax) :
        echo '<script>console.log(current_page);</script>';
    endif;
}
add_action("gform_enqueue_scripts", "enqueue_custom_script", 10, 2);
?>

Question:

What code do I need to retrieve the current page number, and more importantly, where do I place that code?

Post Views: 2

Related posts

Leave a Reply

8 comments

  1. I got it.

    The function rgpost is, apparently, crucial in accessing the current page number. After some muddling around on my own, I was able to get the following code working in both functions.php and just before the wp_head() function in header.php.

    function run_script_on_last_page($form) {
    if (!is_admin()) {
        $current_page = rgpost('gform_source_page_number_' . $form['id']) ? rgpost('gform_source_page_number_' . $form['id']) : 1;
        if ($current_page == 10) {
            wp_enqueue_script('custom_script', get_template_directory_uri() . '/js/custom_script.js', array('jquery'), null, true);
        }
    }
}
add_action('gform_enqueue_scripts_63', 'run_script_on_last_page');

    If you’re copy/pasting the code above, make sure to:

    • replace 10 with the page you want to check
    • ensure your parameters are correct in wp_enqueue_script
    • replace 63 with your form ID

    Some resources I found useful:

  2. The OPs accepted answer might well work but it doesn’t work if you have the form setup to paginate using Ajax.

    In that case I could only get it working using Javascript and the following method;

    http://www.gravityhelp.com/documentation/page/Gform_post_render

    jQuery(document).bind('gform_post_render', function (event, formId, current_page) {
    if (current_page == 2) {
        // do something
    }
});

    You could of course use the formId parameter to limit this to a specific form

  3. The currently accepted answer only works if the user never goes to a previous page in the form, if they do, then gform_sourge_page_number always lags by one. I found a better solution (using this hook for an example, but you should be able to use it within any hook that has the $form passed to it):

    function run_script_on_last_page( $form)  {
  if ( !is_admin() ) {
    if ( GFFormDisplay::get_current_page( $form['id'] ) == 10) {
        wp_enqueue_script( 'custom_script', get_template_directory_uri() . '/js/custom_script.js', array( 'jquery' ), null, true );
    }
  }
}

add_action( 'gform_enqueue_scripts_63', 'run_script_on_last_page' );

    GFFormDisplay::get_current_page( $form_id ) is one of many handy undocumented functions.

  4. I wrote a little function that returns the current page:

    // Get Gravity Forms Current Page
// Syntax: gf_current_page()
function gf_get_current_page()
{
    return rgpost('gform_source_page_number_' . $_POST['gform_submit']) ? rgpost('gform_target_page_number_' . $_POST['gform_submit']) : 1;
}

  5. Further to the accepted answer, here is an example of finding the current page, and dynamically finding how many pages are in the form. This example changes button text based on whether it is the last page of the form, instead of enqueueing a script.

    // Change the text of the 'Next' form button to 'Submit' when
// the current page is the final page of the form
add_filter( 'gform_next_button', 'next_to_submit', 10, 2 );
function next_to_submit( $next_button, $form ) {
    $replacement_next_button = $next_button;
    $last_page_number = 1;
    foreach ($form['fields'] as $field) {
        $is_hidden = RGFormsModel::is_field_hidden( $form, $field, array() );
        if ($field['pageNumber'] > $last_page_number && !$is_hidden) {
            $last_page_number = $field['pageNumber'];
        }
    }
    $current_page_number = rgpost('gform_source_page_number_' . $form['id']) ? rgpost('gform_source_page_number_' . $form['id']) : 1;
    if ($last_page_number === $current_page_number) {
        // If the current page is the final page
        $replacement_next_button = str_replace( 'Next', 'Submit', $next_button );
    }
    return $replacement_next_button;
}

  6. Following code works for me in JavaScript:

    $('.gf_step_active .gf_step_number').html()

    It will give you the page number of the current page in multi-page form.

  8. Try using this one:

    var current_visible_page = jQuery('.gf_step_active .gf_step_number').html();
console.log(current_visible_page);

    Use the above method in the console to check how it’s working.