Google Forms - in iFrame (scroll to top after Submit)

[2020travelapp]

Hello all, hello @J805,

Does anyone have a solution to this? I have embedded a long-ish Google form in a HTMP element (with Google’s embed as an iFrame code). It all works as it should however whereas when the user completes the form on Google’s URL directly it scroll’s to the top (where they see a “thank you for your feedback” type message) it doesn’t seem to do that in an iFrame. A search on Google shows various solutions outside of Bubble using Event Listeners, JQuery scripts etc. Is there something I could use inside of Bubble to detect a change in the load status of the iFrame and use this as a trigger to Scroll to the top of the page?

My HTML element:

Embedded form in my app:

I may in time implement the form within Bubble but for now I don’t have time. I don’t want to have to revert to linking to an external form though if at all possible.

Any tips/ideas appreciated.

Thanks,
David

[J805]

Hey @2020travelapp

Good question.

Have you tried these possible solutions: javascript - How to make page scroll to top after submit button is pressed in google form? - Stack Overflow

If it doesn’t work by just pasting in the html element, you can download a plugin to run JS.

Hope that helps.

[2020travelapp]

Hey @J805 ,

Thanks for the reply.

I tried this but it didn’t do anything.

If I were to do the first option where should I put the script?

[J805]

Ok, i got it to work.

After your Google Forms Code, in the HTML element. Just paste this code:

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

</script>  

Here is the example:

Editor: Test805421 | Bubble Editor

Preview: https://test805421.bubbleapps.io/version-test/google_forms?debug_mode=true

Hope that helps!

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

• One-on-One Tutoring
• eLearning Hub
• Video Tutorials

[2020travelapp]

Fantastic

That does the trick, much appreciated @J805

[J805]

No problem. Glad for Stack Overflow having code solutions.