Stop focus to the embedded form
My client's site has an embedded Formstack form using
iframe. The problem is during the page/iframe loading, the browser autofocus to the first field (i.e. First Name textbox). This results unwanted scrolling down. How to fix this?7 Replies
You may have to use JS to find the element that is getting the autofocus and set it to blur(). However that might be too late to prevent the scroll 🤔
I ended up adding
display: none; to that iframe. Then add display: block; after the page loads.
You're right - it will be too late.Following on from your idea, rather than updating the display, as this will no doubt cause the code to "jump", you could update the iframe src after the page loads, adding a placeholder url with no content in the meantime.
you might also be able to use
iframeElement.contentWindow.scrollTo() to scroll it back to the topI never used it before, but maybe one of the
sandbox attribute values can help here? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandboxMDN Web Docs
: The Inline Frame element - HTML: HyperText Markup Language | MDN
The HTML element represents a nested browsing context, embedding another HTML page into the current one.
I know this might seem like a "duhh" question but...
Does Formstack give you the ability to disable autofocus on the first field? I've never used them so I've no clue, but that feels like a setting you should be able to access when managing or creating a form.
also, have you tried to lazy load the iframe with
loading="lazy"?