Embedded Google Forms
How to resize the height of the iframe after a submit
In this short article we are going to show a simple trick to fix the annoying way of an embedded Google Forms does not scroll back to the top of the iframe after the form submit.
If you set-up a Google Forms to manages contacts from your web site, maybe you faced with this problem already:
Google provide a useful html snippet to embed your form in an iframe on your web page, like in the next image. Of course, before copy and paste the snippet you're going to increase height parameter as much as possible to avoid the annoying vertical scrollbar.
That's solve the first problem you face with, but as soon as the first user will press the "Submit" button at the bottom of the iframe he/she won't see any Confirmation message because that will be displayed about 900 pixels higher, considering our example.
So, here how we fix it!
1) Following Javascript code is tracing how many times the page in the iframe is loaded, and the second time it resizes the iframe, jumping to the "anchor" (oc-contact) of our contact form.
2) Modify the iframe from Google adding onLoad handler and id
<iframe onload="loaded();" id="oc-contact" ....
<script>
var loadCounter = 0;
function loaded () {
loadCounter += 1;
if (loadCounter === 2) {
$("#oc-contact").attr("height", "500px");
$('#oc-contact').goTo();
}
}
</script>
If you what to see it in action please visit our e-commerce web app dedicated to small shops and retailers:
