Previous and Next button don’t go to top of the page

Hi @klaggy

I hope you’re well today!

The next/prev buttons are meant to switch between form pages without scrolling the page up/down. In fact we had many requests in the past to make sure that it doesn’t scroll because such scrolling usually caused a lot of issues when form was placed on the page with a lot of content.

But I’m not quite sure if I correctly understood your post. You mentioned buttons don’t navigate “to the top of the page” – or did you actually mean top of the form itself (if the form is long enough to go out of the page)?

Perhaps you could share a link to the page with the form in question on your site so we could just see that behavior live?

Kind regards,
Adam

Thanks for the quick response, yes, I meant scroll to the top of the form, not the page, here’s the link: [ short link expanded into link field ]

• This reply was modified 1 year, 3 months ago by Jan Dembowski.
• This reply was modified 1 year, 3 months ago by Jan Dembowski.

@klaggy Do not use short links in these forums, that has been abused in the past and is expanded when found. I have expanded yours into the link field.

The link field cannot be seen by search engines.

Ok, thanks!

Hi @klaggy,

I hope you are doing well today!

Please try the following mu-plugin to achieve the mentioned functionality.

<?php
function forminator_scroll_top_script() {
?>
<script type="text/javascript">
jQuery( function( $ ) {
    var formId = '#forminator-module-6'; // Replace with your Forminator form id
    var lastHeight = $(formId).height(), curHeight, timer;
    
    $(formId).on('click', '.forminator-button-next, .forminator-button-prev', function() {
        if(timer) {
            window.clearTimeout(timer);
        }
            
        timer = window.setTimeout(function() {
            curHeight = $(formId).height();
            if(curHeight != lastHeight) {
                $( 'html, body' ).animate( { scrollTop: $(formId).offset().top }, 'slow' );
                lastHeight = curHeight;
            }
        }, 100);
    });
});
</script>
<?php
}

add_action('wp_footer', 'forminator_scroll_top_script');

In this example, I added “#forminator-module-6” as it was the ID used in the form page. Please replace it if you want to use it with different Forms. You can find this in the source code of your page, or from the Forminator settings.

You can find more information below on how to use mu-plugins.
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins
and
https://www.ads-software.com/support/article/must-use-plugins/

Please always remember to backup your site before making changes and test on a staging site first. Consider consulting with a professional developer if you’re uncomfortable working with code.

Kind regards,
Zafer

Much appreciated! Unfortunately, looks like the script works for 50% of the pages and doesn’t work with Previous…

Hi @klaggy

I hope you are doing well.

Can you please replace the

forminator-button-prev to forminator-button-back I see we updated the class for the previous button.

In case the issue persists please try the following code:

<?php

add_action('wp_footer', 'forminator_scroll_top_script', 9999);
function forminator_scroll_top_script()
{
	global $post;
	if (is_a($post, 'WP_Post') && !has_shortcode($post->post_content, 'forminator_form')) {
		return;
	}
?>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			setTimeout(function() {
				$('.forminator-custom-form').trigger('after.load.forminator');
			}, 200);
			$(document).on('after.load.forminator', function(e, form_id) {
				var formId = '#forminator-module-3615'; // Replace with your Forminator form id
				var lastHeight = $(formId).height(),
					curHeight, timer;

				function scroll_on_click() {

					if (timer) {
						window.clearTimeout(timer);
					}

					timer = window.setTimeout(function() {
						curHeight = $(formId).height();
						if (curHeight != lastHeight) {
							$('html, body').animate({
								scrollTop: $(formId).offset().top
							}, 'slow');
							lastHeight = curHeight;
						}
					}, 100);
				}

				$(formId + ' .forminator-button-next').on('click', scroll_on_click);
				$(formId + ' .forminator-button-back').on('click', scroll_on_click);

			});
		});
	</script>
<?php
}

Best Regards
Patrick Freitas

Hi @klaggy

We haven’t heard from you in a while, I’ll go and mark this thread as resolved. If you have any additional questions or require further help, please let us know!

Kind Regards,
Kris

Sorry for the delay! No, this hasn’t solved the problem, I’ve added the code but the navigation between pages still never goes to the top of the form, please have a look here: https://playeropinion.com/

Hi again @klaggy,

I hope you are doing well today!

Did you change the code to match with your form’s module ID on this line?

var formId = '#forminator-module-3615';

According to the link you have shared, it should be like this

var formId = '#forminator-module-6';

Kind regards,
Zafer

I did indeed.

Hi @klaggy,

Could notice the issue is still the same, possible to also share the from export so that we could have a better idea regarding whether the issue is specific to the form or not?

Please check the following doc on how to export a form:
https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

If you are concerned about any sensitive information in the form, then you can duplicate your form, remove any sensitive information, and then export it.

You can share the export file via Google Drive, Dropbox or any cloud services in the next reply.

Looking forward to your response.

Best Regards,

Nithin

Here it is, I tested it on a blank install and the problem is there: https://drive.google.com/file/d/1pB1q-TLnymgJdlldaUDBOTN1xpPGXOeG/view?usp=sharing

Hi @klaggy,

I could replicate similar when tested in your form. Could you please remove the previous snippet and then try this new snippet and then check whether it works fine?

<?php



add_action('wp_footer', 'forminator_scroll_top_script', 9999);
function forminator_scroll_top_script()
{
    global $post;
    if (is_a($post, 'WP_Post') && !has_shortcode($post->post_content, 'forminator_form')) {
        return;
    }
?>
    <script type="text/javascript">
        jQuery( document ).on( 'after.load.forminator', function( e, formID ) {
            jQuery('#forminator-module-'+formID).find('.forminator-button-next').on('click', function(){
                jQuery("html, body").stop();
                var scrolltop = jQuery('.forminator-pagination').offset().top;
                jQuery("html, body").animate({ scrollTop: scrolltop + 200 }, 500);
            });
            jQuery('#forminator-module-'+formID).find('.forminator-button-back').on('click', function(){
                jQuery("html, body").stop();
                var scrolltop = jQuery('.forminator-pagination').offset().top;
                jQuery("html, body").animate({ scrollTop: scrolltop + 200 }, 500);
            });
        });

        jQuery( document ).on( 'forminator.front.pagination.move', function( e ) {
            jQuery("html, body").stop();
            var scrolltop = jQuery('.forminator-pagination').offset().top;
            jQuery("html, body").animate({ scrollTop: scrolltop + 200 }, 500);
        });
    </script>
<?php
}

You can apply the above snippet as a mu-plugins. Please check this link on how to implement the above code as a mu-plugins:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Regards,

Nithin

That doesn’t work as well, I also tried on my blank install, same thing, I replaced

jQuery('#forminator-module-'+formID)

with

jQuery('#forminator-module-6')

since you didn’t initialize the formID but same result, either way, it’s not working unfortunately… ??