Scroll up on embedded Google Form submit

Google Forms are powerful tools being used to collect data for various purposes. Meetups topics, gift lists, party attendance, you name it. Google Form link can be sent by email, shared on social media but from time to time I want to place it on the website for easy access.

Multi-page form issue

There is not a problem with Google Forms when there is a single page only. The form is being filled, the user is clicking “Submit”, and that’s it.

What was the problem for me is the multi-page form. The data on such a form should be filled on each page. When the first page is filled, and the “next” button is pressed, the form refreshes displaying the second page. But the website view stays on the bottom of the form or even worse – below the bottom of the form. The user is confused because no form is visible. Such a half-filled form is not saved in Google Forms so we don’t even have half of the data.

Solution — scroll the page up

As the solution for this issue, I’m using the simple script which is scrolling the website view up on the form page submit. The script is straight forward and looks like this:

<script>
document.querySelector("iframe").addEventListener("load", 
    function() {
        window.scrollTo({
	  top: 350,
	  left: 0,
	  behavior: 'smooth'
	});
});
</script>

The exact number to put in the “top” parameter should be determined. In my case, it is 350 pixels which are enough to skip the page header and go straight to the form.

If you have more iframes on the page, you should also tweak the query selector to handle the proper one.

6 Replies to “Scroll up on embedded Google Form submit”

  1. Hi this is great thanks. I am finding though that on iPhone it loads subsequent pages zoomed out to about 110-120% and aligned rightish which is annoying. From a user perspective they have to pinch the screen in to get back to the iframe sitting within 100% of the window size. Any ideas what causes this?

    Loading

    document.querySelector(“iframe”).addEventListener(“load”,
    function() {
    window.scrollTo({
    top: 0,
    left: 0,
    behavior: ‘smooth’
    });
    });

    1. The thing is that this is rather the behavior of the Safari engine itself, not the issue with Google Forms. Please note that on iPhone, all browsers have to use the Safari engine. No matter if you are using Firefox, Chrome, or another browser, all of them are using Safari under the hood. The Safari engine is zooming the page once you click on form field. Unfortunately, this zoom is also active after the iFrame reload when you switch from the first page of the form to the second page. I found no good solution to this issue yet…

  2. Very helpful! Worked for my multi-section Google Form embedded on my website. Thank you for sharing.

  3. Your concept is helpful. But this does not work with WordPress. Your post is tagged as WordPress. What I am missing? Thanks for your help.

    BTW, Responsive width is easy with Google form inframe. Just set the width to 100%. Height is the real problem in WordPress.

    1. Hello James,

      In how many WordPress themes you tested this solution? In some themes, the JavaScript included or even CSS can avoid such scrolling I used in this example. In such a case, you should adjust the code for your particular case. I’m using it on various WordPress websites and it works without modification on most of them. Some of them, however, require small adjustments.

Comments are closed.