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.

Leave a Reply

Your email address will not be published. Required fields are marked *