How can I load at page top and prevent "jumping"?

Get Help
, ,
1

Problem: when the user clicks “next” or “previous” on a multi-step form, anchor tags are used which make the form appear like it “jumps” down to the first field available on that step.

Goal: have the form load at page top.

This is a similar request to https://legacy.forums.gravityhelp.com/topic/how-to-manage-page-breaks-to-go-to-top-of-page

In that situation, AJAX was successfully used. Unfortunately, we can’t use AJAX because it conflicts with our theme.

We’re considering writing some jQuery to jump the form back to page top, but this creates 2 jumps: the initial jump down when the form step loads, then a second jump back to page top.

Is there another way to accomplish this goal?

2

You should really focus on fixing the conflict with your theme. AJAX is probably the best solution here.

However, on a non-AJAX form, you can still use the gform_confirmation_anchor filter to scroll the page to the top of your form on a multi-page form (it works on multi-page form transitions as well, despite the name of the filter.)

1 Like
3

Hi Chris. Thanks so much for you response!

We are still investigating on the conflict and would like to have your feedback on this to confirm this is not a plugin bug, we are receiving the following error message when Ajax is enabled:

(index):349 Uncaught ReferenceError: jQuery is not defined

on this piece of code:

<script type='text/javascript'>jQuery(document).ready(function($){gformInitSpinner( 5, '/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery('#gform_ajax_frame_5').on('load',function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= 0;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_5');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_5').length > 0;var is_redirect = contents.indexOf('gformRedirect(){') >= 0;var is_form = form_content.length > 0 && ! is_redirect && ! is_confirmation;if(is_form){jQuery('#gform_wrapper_5').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_5').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_5').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */ jQuery(document).scrollTop(jQuery('#gform_wrapper_5').offset().top); }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_5').val();gformInitSpinner( 5, '/wp-content/plugins/gravityforms/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [5, current_page]);window['gf_submitting_5'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_5').replaceWith(confirmation_content);jQuery(document).scrollTop(jQuery('#gf_5').offset().top);jQuery(document).trigger('gform_confirmation_loaded', [5]);window['gf_submitting_5'] = false;}, 50);}else{jQuery('#gform_5').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [5, current_page]);} );} );</script>

4

Can you share a link to the page on your site where we can see this form? It sounds like jQuery is not being loaded before Gravity Forms, which is why you see the error related to Gravity Forms (we rely on jQuery but it’s not available in the page.)

Thank you.

5

Sure, no problem. Is there a way that I can send the link to you privately?

6

You should be able to message me here if you click on my username. Somewhere on the page (it looks different to me than it does to you.)

Look for a Message function or button. Or, send an email to chris@rocketgenius.com (although email will take longer.)

7

I replied to your email just now